{"id":235,"date":"2024-05-22T15:27:47","date_gmt":"2024-05-22T15:27:47","guid":{"rendered":"https:\/\/www.buddyupgo.com\/?page_id=235"},"modified":"2024-05-22T15:27:47","modified_gmt":"2024-05-22T15:27:47","slug":"matchup","status":"publish","type":"page","link":"https:\/\/buddyupapi-staging.us35.cdn-alpha.com\/matchup\/","title":{"rendered":"Matchup"},"content":{"rendered":"<div class=\"buddyUpPjaxContainer\" data-buddyup-pjax-container=\"1\"><style>body {\n    background: var(--buddyup-background);\n}\n\n.pinnacleMainNavBar .logo-wrapper img {\n    height: 75px !important;\n    width: auto;\n}\n\n.matchupLayout {\n    position: relative;\n    max-width: 1240px;\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: minmax(280px, 340px) 1fr;\n    gap: 0.9rem;\n    align-items: stretch;\n}\n\n.matchup-main {\n    position: relative;\n}\n\n.matchup-controls {\n    width: 100%;\n}\n\n.matchup-controls > .matchup-controls-inner {\n    background: #fff;\n    border: 1px solid rgba(0, 0, 0, 0.06);\n    border-radius: 12px;\n    box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.05), 0 2px 15px -2px rgba(0, 0, 0, 0.05);\n    padding: 0.95rem;\n}\n\n.matchup-controls h2 {\n    margin-bottom: 0.45rem;\n    font-size: 1.05rem;\n}\n\n.matchup-controls .matchup-controls-subtitle {\n    color: #666;\n    font-size: 0.92rem;\n    line-height: 1.3;\n    margin-bottom: 1rem;\n}\n\n.matchup-controls-close {\n    display: none;\n}\n\n.matchupFiltersForm {\n    border-top: 1px solid rgba(0, 0, 0, 0.08);\n    margin-top: 0.65rem;\n    padding-top: 0.85rem;\n}\n\n.matchup-filter-row {\n    margin-bottom: 0.65rem;\n}\n\n.matchup-filter-row label {\n    display: block;\n    font-size: 0.85rem;\n    font-weight: bold;\n    margin-bottom: 0.25rem;\n}\n\n.matchup-filter-row input,\n.matchup-filter-row select {\n    width: 100%;\n    margin: 0;\n    border-radius: 10px;\n    border: 1px solid rgba(0, 0, 0, 0.12);\n    min-height: 40px;\n    background: #fff;\n}\n\n.matchup-filter-actions {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 0.5rem;\n    margin-top: 0.9rem;\n}\n\n.matchup-filter-actions .buddyUpButton1,\n.matchup-filter-actions .buddyUpButton2 {\n    width: 100%;\n    margin: 0;\n    text-align: center;\n}\n\n.matchup-filter-note {\n    color: #7a7a7a;\n    font-size: 0.8rem;\n    margin: 0.75rem 0 0;\n    line-height: 1.3;\n}\n\n.matchupSidebarTab,\n.matchupSidebarOverlay {\n    display: none;\n}\n\n.matchup-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 720px;\n    background: linear-gradient(180deg, #f9fafc 0%, #f2f3f5 100%);\n    border: 1px solid rgba(0, 0, 0, 0.06);\n    border-radius: 12px;\n    overflow: hidden;\n    position: relative;\n    padding: 3.25rem 1rem 1rem;\n    box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.05), 0 2px 15px -2px rgba(0, 0, 0, 0.05);\n}\n\n.card {\n    width: min(100%, 430px);\n    height: min(68vh, 620px);\n    border-radius: 14px;\n    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);\n    text-align: center;\n    transition: transform 0.35s ease, height 0.35s ease;\n    user-select: none;\n    cursor: grab;\n    overflow: hidden;\n    max-width: 100%;\n    border: 1px solid rgba(0, 0, 0, 0.06);\n    background: #fff;\n    position: relative;\n    perspective: 1200px;\n}\n\n.card-inner {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    transform-style: preserve-3d;\n    transition: transform 0.45s ease;\n}\n\n.card.flipped .card-inner {\n    transform: rotateY(180deg);\n}\n\n.card-face {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    backface-visibility: hidden;\n    -webkit-backface-visibility: hidden;\n}\n\n.card-face-front {\n    overflow: hidden;\n}\n\n.card-face-back {\n    transform: rotateY(180deg);\n    background: #fff;\n    padding: 1rem;\n    text-align: left;\n    display: flex;\n    flex-direction: column;\n    gap: 0.65rem;\n}\n\n.card-back-title {\n    font-size: 1.1rem;\n    font-weight: bold;\n    color: #1f3656;\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n    padding-bottom: 0.45rem;\n}\n\n.card.card-processing {\n    pointer-events: none;\n    filter: saturate(0.92);\n}\n\n.card-image {\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n\n.card-image img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    user-drag: none;\n    user-select: none;\n}\n\n.card-details {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    padding: 5px;\n    position: absolute;\n    width: 100%;\n    bottom: 0;\n\n    background: rgb(0,0,0);\n    background: -moz-linear-gradient(360deg, rgba(0,0,0,1) 4%, rgba(0,0,0,0) 97%);\n    background: -webkit-linear-gradient(360deg, rgba(0,0,0,1) 4%, rgba(0,0,0,0) 97%);\n    background: linear-gradient(360deg, rgba(0,0,0,1) 4%, rgba(0,0,0,0) 97%);\n    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#000000\",endColorstr=\"#000000\",GradientType=1);\n}\n\n.card-details .userName {\n    font-size: 1.3rem;\n    color: #fff;\n    margin-bottom: .8rem;\n}\n\n.extra-details {\n    padding: 0;\n    text-align: left;\n    font-size: 0.9em;\n    color: #666;\n    display: block;\n    max-height: 100%;\n    overflow: auto;\n    background: transparent;\n}\n\n.extra-details p {\n    padding-bottom: .5rem;\n}\n\n.matchupActionFeedback {\n    position: absolute;\n    top: 1rem;\n    left: 50%;\n    transform: translate(-50%, -12px);\n    min-width: 210px;\n    max-width: calc(100% - 1.5rem);\n    border-radius: 999px;\n    background: rgba(30, 30, 30, 0.84);\n    color: #fff;\n    font-size: 0.95rem;\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.4rem;\n    padding: 0.5rem 0.95rem;\n    opacity: 0;\n    z-index: 20;\n    pointer-events: none;\n    transition: opacity 0.26s ease, transform 0.26s ease;\n}\n\n.matchupActionFeedback.active {\n    opacity: 1;\n    transform: translate(-50%, 0);\n}\n\n.matchupActionFeedback.accept {\n    background: rgba(26, 132, 79, 0.9);\n}\n\n.matchupActionFeedback.reject {\n    background: rgba(186, 49, 49, 0.9);\n}\n\n.matchupActionFeedback.info {\n    background: rgba(37, 77, 163, 0.9);\n}\n\n.cards-message {\n    text-align: center;\n    font-size: 1.12rem;\n    color: #666;\n    padding: 20px 26px;\n    max-width: 640px;\n}\n\n.cards-message .buddyUpLoadingEl i {\n    margin-bottom: 1rem;\n}\n\n\/* It's a Match! Overlay *\/\n.match-overlay {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0, 0, 0, 0.85);\n    z-index: 9999;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    animation: fadeIn 0.3s ease-in;\n}\n\n@keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n.match-content {\n    position: relative;\n    text-align: center;\n    animation: scaleIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n@keyframes scaleIn {\n    from {\n        transform: scale(0.5);\n        opacity: 0;\n    }\n    to {\n        transform: scale(1);\n        opacity: 1;\n    }\n}\n\n.match-content h1 {\n    font-size: 3.5rem;\n    color: #ff6b9d;\n    margin: 0 0 1rem 0;\n    font-weight: bold;\n    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);\n    animation: pulse 1s infinite alternate;\n}\n\n@keyframes pulse {\n    from { transform: scale(1); }\n    to { transform: scale(1.05); }\n}\n\n.match-images {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 2rem;\n    margin: 2rem 0;\n}\n\n.match-images img {\n    width: 120px;\n    height: 120px;\n    border-radius: 50%;\n    border: 4px solid #fff;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n    object-fit: cover;\n}\n\n.match-images .heart-icon {\n    font-size: 2.5rem;\n    color: #ff6b9d;\n    animation: heartBeat 1s infinite;\n}\n\n@keyframes heartBeat {\n    0%, 100% { transform: scale(1); }\n    25% { transform: scale(1.2); }\n    50% { transform: scale(1); }\n}\n\n.match-content p {\n    color: #fff;\n    font-size: 1.3rem;\n    margin: 1.5rem 0;\n}\n\n.match-actions {\n    display: flex;\n    gap: 1rem;\n    justify-content: center;\n    margin-top: 2rem;\n}\n\n.match-actions button {\n    padding: 12px 30px;\n    border: none;\n    border-radius: 25px;\n    font-size: 1rem;\n    font-weight: bold;\n    cursor: pointer;\n    transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.match-actions button:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n}\n\n.match-actions .btn-message {\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    color: #fff;\n}\n\n.match-actions .btn-continue {\n    background: #fff;\n    color: #333;\n}\n\n\/* Confetti *\/\n.confetti {\n    position: absolute;\n    width: 10px;\n    height: 10px;\n    background: #ff6b9d;\n    animation: confettiFall 3s linear forwards;\n}\n\n@keyframes confettiFall {\n    to {\n        transform: translateY(100vh) rotate(720deg);\n        opacity: 0;\n    }\n}\n\n\/* Responsive styles *\/\n@media (max-width: 600px) {\n    .match-content h1 {\n        font-size: 2.5rem;\n    }\n\n    .match-images {\n        gap: 1rem;\n    }\n\n    .match-images img {\n        width: 80px;\n        height: 80px;\n    }\n\n    .match-images .heart-icon {\n        font-size: 2rem;\n    }\n\n    .match-content p {\n        font-size: 1.1rem;\n    }\n\n    .match-actions {\n        flex-direction: column;\n    }\n\n    .match-actions button {\n        width: 100%;\n    }\n}\n\n\/* View Matches button *\/\n.viewMatchesButtonWrapper {\n    text-align: left;\n}\n\n.viewMatchesButtonWrapper a {\n    margin: 0 0 0.75rem;\n    width: 100%;\n    text-align: center;\n}\n\n.matchupBadgeIconsWrapper i:before {\n    background: var(--primary-color);\n}\n\n.cardArrow {\n    z-index: 8;\n    position: absolute;\n    top: 12px;\n    bottom: auto;\n    left: 50%;\n    transform: translateX(-50%);\n    pointer-events: auto;\n    width: 42px;\n    height: 42px;\n    border-radius: 999px;\n    border: 1px solid rgba(0, 0, 0, 0.18);\n    background: rgba(255, 255, 255, 0.94);\n    color: #1f3656;\n    margin: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);\n}\n\n.cardArrow:hover,\n.cardArrow:focus {\n    background: #fff;\n    border-color: rgba(0, 0, 0, 0.28);\n}\n\n.cardArrowLeft {\n    left: calc(50% - 58px);\n}\n\n.cardArrowRight {\n    left: calc(50% + 58px);\n}\n\n@media (max-width: 1080px) {\n    .matchupLayout {\n        grid-template-columns: 290px 1fr;\n    }\n\n    .cardArrowLeft { left: calc(50% - 58px); }\n    .cardArrowRight { left: calc(50% + 58px); }\n}\n\n@media (max-width: 900px) {\n    .matchupLayout {\n        display: block;\n        padding-top: 0.15rem;\n    }\n\n    .matchup-controls {\n        position: fixed;\n        left: 0;\n        top: calc(var(--buddyup-mobile-header-height, 56px) + env(safe-area-inset-top, 0px));\n        bottom: calc(var(--buddyup-mobile-nav-height, 70px) + 8px);\n        width: min(84vw, 360px);\n        transform: translateX(-110%);\n        transition: transform 0.3s ease;\n        z-index: 95;\n    }\n\n    .matchup-controls > .matchup-controls-inner {\n        height: 100%;\n        overflow-y: auto;\n        border-radius: 0 12px 12px 0;\n    }\n\n    #buddyUpMatchupWrapper.matchup-sidebar-open .matchup-controls {\n        transform: translateX(0);\n    }\n\n    .matchup-controls-close {\n        display: inline-flex;\n        position: absolute;\n        top: 0.5rem;\n        right: 0.5rem;\n        border: none;\n        background: transparent;\n        color: #666;\n        font-size: 1.2rem;\n        width: 34px;\n        height: 34px;\n        align-items: center;\n        justify-content: center;\n        z-index: 2;\n        margin: 0;\n    }\n\n    .matchupSidebarOverlay {\n        display: block;\n        position: fixed;\n        inset: 0;\n        background: rgba(0, 0, 0, 0.42);\n        z-index: 94;\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 0.26s ease;\n    }\n\n    #buddyUpMatchupWrapper.matchup-sidebar-open .matchupSidebarOverlay {\n        opacity: 1;\n        pointer-events: auto;\n    }\n\n    .matchupSidebarTab {\n        display: inline-flex;\n        position: fixed;\n        left: 0;\n        top: auto;\n        bottom: calc(var(--buddyup-mobile-nav-height, 70px) + env(safe-area-inset-bottom, 0px) + 14px);\n        width: auto;\n        height: 42px;\n        padding: 0 14px;\n        border-radius: 0 999px 999px 0;\n        border: 1px solid rgba(0, 0, 0, 0.12);\n        border-left: 0;\n        background: #fff;\n        color: #334;\n        align-items: center;\n        gap: 0.5rem;\n        justify-content: center;\n        z-index: 96;\n        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);\n        margin: 0;\n        font-size: 0.88rem;\n        font-weight: 700;\n        letter-spacing: 0.02em;\n    }\n\n    .matchupSidebarTab i {\n        font-size: 0.95rem;\n    }\n\n    #buddyUpMatchupWrapper.matchup-sidebar-open .matchupSidebarTab {\n        opacity: 0;\n        pointer-events: none;\n        transform: translateX(-120%);\n    }\n\n    .matchup-container {\n        min-height: calc(100dvh - var(--buddyup-mobile-header-height, 56px) - var(--buddyup-mobile-nav-offset, 70px) - env(safe-area-inset-top, 0px) - 24px);\n        border-radius: 12px;\n        padding: 3rem 0.75rem 0.75rem;\n    }\n\n    .card {\n        width: calc(100vw - 2.1rem);\n        max-width: 520px;\n        height: min(68dvh, 620px);\n    }\n\n    .cardArrow {\n        opacity: 0.7;\n        top: 10px;\n        bottom: auto;\n    }\n\n    .cardArrowLeft {\n        left: calc(50% - 54px);\n        transform: translateX(-50%);\n    }\n\n    .cardArrowRight {\n        left: calc(50% + 54px);\n        right: auto;\n        transform: translateX(-50%);\n    }\n}\n\n@media (max-width: 1024px) {\n    html.buddyup-matchup-shell,\n    body.buddyup-matchup-shell {\n        height: var(--buddyup-mobile-usable-vh, 100dvh);\n        max-height: var(--buddyup-mobile-usable-vh, 100dvh);\n        overflow: hidden;\n    }\n\n    body.buddyup-matchup-shell #buddyUpTopNav,\n    body.buddyup-matchup-shell .buddyup-topnav {\n        display: none !important;\n    }\n\n    #buddyUpMatchupWrapper {\n        height: calc(100dvh - var(--buddyup-mobile-header-height, 56px) - var(--buddyup-mobile-nav-offset, 70px) - env(safe-area-inset-top, 0px));\n        max-height: calc(100dvh - var(--buddyup-mobile-header-height, 56px) - var(--buddyup-mobile-nav-offset, 70px) - env(safe-area-inset-top, 0px));\n        overflow: hidden;\n    }\n\n    #buddyUpMatchupWrapper .matchupLayout,\n    #buddyUpMatchupWrapper .matchup-main,\n    #buddyUpMatchupWrapper .matchup-container {\n        height: 100%;\n        min-height: 0;\n    }\n\n    #buddyUpMatchupWrapper .matchup-container {\n        border-radius: 10px;\n        padding: 0.5rem;\n    }\n\n    #buddyUpMatchupWrapper .card {\n        height: 100%;\n        max-height: 100%;\n    }\n\n    #buddyUpMatchupWrapper .extra-details {\n        max-height: 100%;\n        overflow: auto;\n    }\n}\n\n\n\/* Free Tier Message *\/\n#buddyUpMatchUpFree {\n    min-height: 45vh;\n    text-align: center;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n#buddyUpMatchUpFree .buddyUpMatchUpFreeContent {\n    z-index: 1;\n    position: relative;\n}\n\n#buddyUpMatchUpFree .buddyUpMatchUpFreeContent h1 {\n    font-size: 2rem;\n    font-weight: bold;\n    padding: 0;\n    margin-bottom: .5rem;\n}\n\n#buddyUpMatchUpFree .buddyUpMatchUpFreeContent p {\n    padding: 0;\n    margin: 0 auto 1rem;\n    width: 450px;\n    max-width: 100%;\n}\n\n#buddyUpMatchUpFree .fakeCardWrapper {\n    opacity: .5;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    pointer-events: none;\n}\n\n#buddyUpMatchUpFree .card {\n    margin: 0 auto;\n    width: 270px;\n    height: 400px;\n    background: #ececec;\n    cursor: default;\n    opacity: 1;\n    transform: translateX(0);\n}\n\n#buddyUpMatchUpFree .card img {\n    opacity: .3;\n}\n\n#buddyUpMatchUpFree .card img {\n    border-bottom: 1px solid rgba(0,0,0,.2);\n}\n\n#buddyUpMatchUpFree .card .fakeText {\n    height: 25px;\n    width: calc(70% - 2rem);\n    background: rgba(0,0,0,.05);\n    border-radius: 5px;\n    margin: .8rem 1rem;\n}\n\n#buddyUpMatchUpFree .card .fakeText:first-of-type {\n    margin-top: 1.3rem;\n    width: calc(90% - 2rem);\n}\n\n#buddyUpMatchUpFree .card.fakeSwipeRight {\n    animation: fakeSwipeRight 1s;\n}\n\n#buddyUpMatchUpFree .card.fakeSwipeLeft {\n    animation: fakeSwipeLeft 1s;\n}\n\n@keyframes fakeSwipeRight {\n    0% {\n        transform: translateX(0);\n        opacity: 1;\n    }\n    89% {\n        opacity: 0;\n    }\n    90% {\n        opacity: 0;\n        transform: translateX(80%);\n    }\n    91% {\n        transform: translateX(0) scale(.9);\n    }\n    100% {\n        opacity: 1;\n        transform: translateX(0) scale(1);\n    }\n}\n\n@keyframes fakeSwipeLeft {\n    0% {\n        transform: translateX(0);\n        opacity: 1;\n    }\n    89% {\n        opacity: 0;\n    }\n    90% {\n        opacity: 0;\n        transform: translateX(-80%);\n    }\n    91% {\n        transform: translateX(0) scale(.9);\n    }\n    100% {\n        opacity: 1;\n        transform: translateX(0) scale(1);\n    }\n}<\/style><div id=\"buddyUpMatchupWrapper\">\n        <section class=\"matchupLayout\">\n        <aside id=\"matchupControlsSidebar\" class=\"matchup-controls\" aria-label=\"Matchup controls\" aria-hidden=\"false\">\n            <button id=\"matchupSidebarClose\" class=\"matchup-controls-close\" type=\"button\" aria-label=\"Close matchup controls\">\n                <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"><\/i>\n            <\/button>\n\n            <div class=\"matchup-controls-inner\">\n                <h2>Matchup Controls<\/h2>\n                <p class=\"matchup-controls-subtitle\">Swipe right to match and left to pass. Use filters to refine who appears in your current stack.<\/p>\n\n                <div class=\"viewMatchesButtonWrapper hidden\">\n                    <a href=\"https:\/\/buddyupapi-staging.us35.cdn-alpha.com\/matches\/\" class=\"buddyUpButton1\">\n                        <span class=\"matchupBadgeIconsWrapper\"><i class=\"fa fa-regular fa-id-badge fa-fw\"><\/i><i class=\"fa-solid fa-id-badge fa-fw badge-2\"><\/i><\/span>\n                        My Matches\n                    <\/a>\n                <\/div>\n\n                <p class=\"buddyUpSwipeMessage hidden\">Tip: Tap the card to flip for details, then drag or use keyboard arrows to swipe.<\/p>\n\n                <form id=\"matchupFiltersForm\" class=\"matchupFiltersForm\" novalidate>\n                    <div class=\"matchup-filter-row\">\n                        <label for=\"matchupFilterZip\">Zip Code<\/label>\n                        <input id=\"matchupFilterZip\" type=\"text\" inputmode=\"numeric\" pattern=\"[0-9]*\" maxlength=\"10\" placeholder=\"e.g. 32801\" \/>\n                    <\/div>\n                    <div class=\"matchup-filter-row\">\n                        <label for=\"matchupFilterRadius\">Radius<\/label>\n                        <select id=\"matchupFilterRadius\">\n                            <option value=\"0\">Any distance<\/option>\n                            <option value=\"10\">10 miles<\/option>\n                            <option value=\"25\">25 miles<\/option>\n                            <option value=\"50\">50 miles<\/option>\n                            <option value=\"100\">100 miles<\/option>\n                        <\/select>\n                    <\/div>\n                    <div class=\"matchup-filter-row\">\n                        <label for=\"matchupFilterInterest\">Interest<\/label>\n                        <input id=\"matchupFilterInterest\" type=\"text\" placeholder=\"hiking, paddleboarding...\" \/>\n                    <\/div>\n                    <div class=\"matchup-filter-row\">\n                        <label for=\"matchupFilterGender\">Gender Preference<\/label>\n                        <select id=\"matchupFilterGender\">\n                            <option value=\"\">No preference<\/option>\n                            <option value=\"male\">Male<\/option>\n                            <option value=\"female\">Female<\/option>\n                            <option value=\"other\">Other<\/option>\n                        <\/select>\n                    <\/div>\n\n                    <div class=\"matchup-filter-actions\">\n                        <button type=\"submit\" class=\"buddyUpButton1\">Apply Filters<\/button>\n                        <button type=\"button\" id=\"matchupFiltersReset\" class=\"buddyUpButton1 buddyUpButton2\">Reset<\/button>\n                    <\/div>\n                    <p class=\"matchup-filter-note\">Filters currently apply to the loaded stack. Full ranking logic will run server-side in the next phase.<\/p>\n                <\/form>\n            <\/div>\n        <\/aside>\n\n        <button id=\"matchupSidebarTab\" class=\"matchupSidebarTab\" type=\"button\" aria-controls=\"matchupControlsSidebar\" aria-expanded=\"false\" aria-label=\"Open filters\">\n            <i class=\"fa-solid fa-sliders\" aria-hidden=\"true\"><\/i>\n            <span>Filters<\/span>\n        <\/button>\n        <div id=\"matchupSidebarOverlay\" class=\"matchupSidebarOverlay\" aria-hidden=\"true\"><\/div>\n\n        <div class=\"matchup-main\">\n            <div class=\"matchup-container\">\n                <div class=\"cards-message\"><\/div>\n            <\/div>\n            <div id=\"matchupActionFeedback\" class=\"matchupActionFeedback\" aria-live=\"polite\"><\/div>\n        <\/div>\n    <\/section>\n<\/div><script>(async function(){\n    const currentActiveUser = BUDDYUP.getCurrentUser();\n    const userSearchWrapper = document.getElementById('buddyUpMatchupWrapper');\n\n    \/\/ Fix View Matches button link\n    jQuery(document).ready(function($){\n        const matchesLink = buddyUpVariables && buddyUpVariables.matches_link;\n        if (matchesLink) {\n            $('.viewMatchesButtonWrapper a').attr('href', matchesLink);\n        }\n    });\n\n    if (!currentActiveUser) {\n        let errMessageContent = `<p>Please log in or register to match up with buddies!<\/p>\n            <a href=\"${buddyUpVariables.login_link}\" class=\"buddyUpButton1\">Log in<\/a>\n            <a href=\"${buddyUpVariables.register_link}\" class=\"buddyUpButton1\" style=\"margin-left: .5rem;\">Sign Up<\/a>`;\n        let errMessage = BUDDYUP.errorPage('Please log in', errMessageContent);\n        if (userSearchWrapper) userSearchWrapper.innerHTML = errMessage;\n        return;\n    }\n\n    var matchupData = { users: [], activeUsers: [], done: false };\n\n    jQuery(document).ready(function($){\n        \/\/ Matchup runs in its own mobile shell; hide desktop nav when this view is active.\n        const syncMatchupShell = () => {\n            const hasMatchup = !!document.getElementById('buddyUpMatchupWrapper');\n            const isMobileShell = window.matchMedia('(max-width: 1024px)').matches;\n            document.documentElement.classList.toggle('buddyup-matchup-shell', hasMatchup);\n            document.body.classList.toggle('buddyup-matchup-shell', hasMatchup);\n\n            const shouldHideTopNav = hasMatchup && isMobileShell;\n            const legacyTopNav = document.getElementById('buddyUpTopNav');\n            if (legacyTopNav) {\n                if (shouldHideTopNav) legacyTopNav.style.display = 'none';\n                else legacyTopNav.style.removeProperty('display');\n            }\n\n            document.querySelectorAll('.buddyup-topnav').forEach(el => {\n                if (shouldHideTopNav) el.style.display = 'none';\n                else el.style.removeProperty('display');\n            });\n        };\n\n        \/\/ Reapply after PJAX swaps so the shell class stays accurate.\n        syncMatchupShell();\n        BUDDYUP.setGlobalHandler('matchup.shell.pagechange', document, 'buddyUpPageChange', syncMatchupShell);\n        BUDDYUP.setGlobalHandler('matchup.shell.resize', window, 'resize', syncMatchupShell);\n\n        let currentCardIndex = 0;\n        let isDragging = false;\n        let startPos = 0;\n        let currentTranslate = 0;\n        let prevTranslate = 0;\n        let currentUser = null;\n        let feedbackTimeout = null;\n        let isSwipeInFlight = false;\n        const getSwipeThreshold = () => (window.innerWidth <= 550 ? 140 : 280);\n\n        const $wrapper = $('#buddyUpMatchupWrapper');\n        const $sidebar = $('#matchupControlsSidebar');\n        const $sidebarOverlay = $('#matchupSidebarOverlay');\n        const $sidebarTab = $('#matchupSidebarTab');\n        const $sidebarClose = $('#matchupSidebarClose');\n\n        const filterControls = {\n            zip: document.getElementById('matchupFilterZip'),\n            radius: document.getElementById('matchupFilterRadius'),\n            interest: document.getElementById('matchupFilterInterest'),\n            gender: document.getElementById('matchupFilterGender'),\n            form: document.getElementById('matchupFiltersForm'),\n            reset: document.getElementById('matchupFiltersReset'),\n        };\n\n        const filtersState = {\n            zip: '',\n            radius: 0,\n            interest: '',\n            gender: '',\n        };\n\n        function isMobileLayout(){\n            return window.matchMedia('(max-width: 900px)').matches;\n        }\n\n        function normalizeText(value){\n            return String(value == null ? '' : value).trim().toLowerCase();\n        }\n\n        function normalizeInterests(interests){\n            if (Array.isArray(interests)) {\n                return interests.map(item => String(item == null ? '' : item).trim()).filter(Boolean);\n            }\n\n            if (typeof interests === 'string') {\n                return interests.split(',').map(item => item.trim()).filter(Boolean);\n            }\n\n            return [];\n        }\n\n        function getUserZip(user){\n            return normalizeText(user?.zip || user?.postal_code || user?.postalCode || '');\n        }\n\n        function normalizeGenderToken(value){\n            const raw = normalizeText(value);\n            if (raw === '') return '';\n\n            const compact = raw.replace(\/[\\s_-]+\/g, '');\n\n            if (['m', 'male', 'man', 'boy', '1'].includes(compact)) return 'male';\n            if (['f', 'female', 'woman', 'girl', '2'].includes(compact)) return 'female';\n\n            if ([\n                'other', 'o', 'nonbinary', 'nb', 'nonbinary', 'nonbinaryperson',\n                'prefernottosay', 'x', '3'\n            ].includes(compact)) {\n                return 'other';\n            }\n\n            if (raw.startsWith('m')) return 'male';\n            if (raw.startsWith('f')) return 'female';\n            return '';\n        }\n\n        function getUserGender(user){\n            const candidates = [\n                user?.match_gender,\n                user?.matchup_meta?.gender,\n                user?.matchup?.gender,\n                user?.gender,\n                user?.sex,\n                user?.gender_identity,\n            ];\n\n            for (const candidate of candidates) {\n                const normalized = normalizeGenderToken(candidate);\n                if (normalized !== '') return normalized;\n            }\n\n            return '';\n        }\n\n        function cardListSource(){\n            return Array.isArray(matchupData.activeUsers) ? matchupData.activeUsers : [];\n        }\n\n        function hasActiveFilters(){\n            return filtersState.zip !== '' || filtersState.interest !== '' || filtersState.gender !== '' || Number(filtersState.radius) > 0;\n        }\n\n        function evaluateUserAgainstFilters(user){\n            const result = {\n                pass: true,\n                reasons: [],\n                userId: user && typeof user === 'object' ? (user.id || user.user_id || null) : null,\n            };\n\n            if (!user || typeof user !== 'object') {\n                result.pass = false;\n                result.reasons.push('invalid_user_object');\n                return result;\n            }\n\n            const userInterests = normalizeInterests(user.interests).map(normalizeText);\n            const userZip = getUserZip(user);\n            const userGender = getUserGender(user);\n\n            if (filtersState.zip !== '' && userZip !== '' && userZip !== filtersState.zip) {\n                result.pass = false;\n                result.reasons.push(`zip_mismatch:${userZip}!=${filtersState.zip}`);\n            }\n\n            if (filtersState.zip !== '' && userZip === '') {\n                result.pass = false;\n                result.reasons.push('zip_missing');\n            }\n\n            if (filtersState.interest !== '') {\n                const foundInterest = userInterests.some(interest => interest.includes(filtersState.interest));\n                if (!foundInterest) {\n                    result.pass = false;\n                    result.reasons.push(`interest_mismatch:${filtersState.interest}`);\n                }\n            }\n\n            if (filtersState.gender !== '' && userGender !== filtersState.gender) {\n                result.pass = false;\n                result.reasons.push(`gender_mismatch:${userGender || '(empty)'}!=${filtersState.gender}`);\n            }\n\n            result.userGender = userGender;\n            result.userZip = userZip;\n            result.userInterests = userInterests;\n            return result;\n        }\n\n        function userMatchesFilters(user){\n            return evaluateUserAgainstFilters(user).pass;\n        }\n\n        function setFiltersFromForm(){\n            filtersState.zip = normalizeText(filterControls.zip?.value || '').replace(\/\\s+\/g, '');\n            filtersState.radius = Number(filterControls.radius?.value || 0) || 0;\n            filtersState.interest = normalizeText(filterControls.interest?.value || '');\n            filtersState.gender = normalizeText(filterControls.gender?.value || '');\n        }\n\n        function resetFiltersForm(){\n            if (filterControls.zip) filterControls.zip.value = '';\n            if (filterControls.radius) filterControls.radius.value = '0';\n            if (filterControls.interest) filterControls.interest.value = '';\n            if (filterControls.gender) filterControls.gender.value = '';\n\n            filtersState.zip = '';\n            filtersState.radius = 0;\n            filtersState.interest = '';\n            filtersState.gender = '';\n        }\n\n        function serverFilterPayload(){\n            const lat = currentActiveUser && Number.isFinite(Number(currentActiveUser.latitude))\n                ? Number(currentActiveUser.latitude)\n                : null;\n            const lon = currentActiveUser && Number.isFinite(Number(currentActiveUser.longitude))\n                ? Number(currentActiveUser.longitude)\n                : null;\n\n            return {\n                zip: filtersState.zip,\n                radius: Number(filtersState.radius) || 0,\n                interest: filtersState.interest,\n                gender: filtersState.gender,\n                latitude: lat,\n                longitude: lon,\n            };\n        }\n\n        function applyFiltersToLoadedUsers(){\n            const users = Array.isArray(matchupData.users) ? matchupData.users : [];\n\n            const evaluations = users.map(user => ({ user, eval: evaluateUserAgainstFilters(user) }));\n\n            matchupData.activeUsers = evaluations.filter(entry => entry.eval.pass).map(entry => entry.user);\n            currentCardIndex = 0;\n\n            if (users.length > 0 && matchupData.activeUsers.length === 0 && hasActiveFilters()) {\n                showContainerMessage('No users match the current filters. Try broadening the filters or resetting.');\n                showActionFeedback('info', 'No users matched your filters', 1400);\n                return;\n            }\n\n            if (hasActiveFilters()) {\n                showActionFeedback('info', `${matchupData.activeUsers.length} user${matchupData.activeUsers.length === 1 ? '' : 's'} in your filtered stack`, 1400);\n            }\n\n            showNextCard();\n        }\n\n        function closeGlobalMobileShelfIfOpen(){\n            const shelfMenu = document.getElementById('buddyUpShelfMenu');\n            const shelfOverlay = document.getElementById('buddyUpShelfOverlay');\n            const shelfToggle = document.getElementById('buddyUpShelfMenuToggle');\n\n            if (shelfMenu && shelfMenu.classList.contains('open')) {\n                shelfMenu.classList.remove('open');\n                if (shelfOverlay) shelfOverlay.classList.remove('open');\n                document.body.classList.remove('buddyup-mobile-nav-active');\n                if (shelfToggle) shelfToggle.setAttribute('aria-expanded', 'false');\n                shelfMenu.setAttribute('aria-hidden', 'true');\n            }\n        }\n\n        function openSidebar(){\n            if (!isMobileLayout()) return;\n            closeGlobalMobileShelfIfOpen();\n            $wrapper.addClass('matchup-sidebar-open');\n            $sidebar.attr('aria-hidden', 'false');\n            $sidebarTab.attr('aria-expanded', 'true');\n        }\n\n        function closeSidebar(){\n            if (!isMobileLayout()) return;\n            $wrapper.removeClass('matchup-sidebar-open');\n            $sidebar.attr('aria-hidden', 'true');\n            $sidebarTab.attr('aria-expanded', 'false');\n        }\n\n        function syncSidebarForViewport(){\n            if (isMobileLayout()) {\n                closeSidebar();\n            } else {\n                $wrapper.removeClass('matchup-sidebar-open');\n                $sidebar.attr('aria-hidden', 'false');\n                $sidebarTab.attr('aria-expanded', 'false');\n            }\n        }\n\n        function initSidebarControls(){\n            $sidebarTab.on('click', function(){\n                if ($wrapper.hasClass('matchup-sidebar-open')) {\n                    closeSidebar();\n                } else {\n                    openSidebar();\n                }\n            });\n\n            $sidebarClose.on('click', closeSidebar);\n            $sidebarOverlay.on('click', closeSidebar);\n\n            BUDDYUP.setGlobalHandler('matchup.sidebar.escape', document, 'keydown', e => {\n                if (e.key === 'Escape') closeSidebar();\n            });\n\n            BUDDYUP.setGlobalHandler('matchup.sidebar.resize', window, 'resize', () => {\n                syncSidebarForViewport();\n                reconcileCardAfterResize();\n            });\n            syncSidebarForViewport();\n        }\n\n        function initFiltersControls(){\n            if (filterControls.form) {\n                filterControls.form.addEventListener('submit', event => {\n                    event.preventDefault();\n                    setFiltersFromForm();\n                    if (hasActiveFilters()) {\n                        currentCardIndex = 0;\n                        getMatchupUsers();\n                    } else {\n                        applyFiltersToLoadedUsers();\n                    }\n                    closeSidebar();\n                });\n            }\n\n            if (filterControls.reset) {\n                filterControls.reset.addEventListener('click', () => {\n                    resetFiltersForm();\n                    currentCardIndex = 0;\n                    getMatchupUsers();\n                });\n            }\n        }\n\n        function clearCardViewport(){\n            const $container = $('.matchup-container');\n            $container.find('.card, .cardArrow, .cards-message').remove();\n        }\n\n        function showContainerMessage(messageHtml){\n            clearCardViewport();\n            $('.matchup-container').append(`<div class=\"cards-message\">${messageHtml}<\/div>`);\n        }\n\n        function triggerArrowSwipe(direction){\n            if (currentUser === null || isSwipeInFlight) return;\n\n            const width = window.innerWidth + 200;\n            const swipeType = direction === 'right' ? 'accept' : 'reject';\n            $('.card').css('transform', direction === 'right' ? `translateX(${width}px)` : `translateX(-${width}px)`);\n            showIndicator(swipeType, currentUser);\n            currentUser = null;\n        }\n\n        function initArrowControls(){\n            $('.matchup-container').off('click.matchupArrow', '.cardArrow').on('click.matchupArrow', '.cardArrow', function(){\n                if ($(this).hasClass('cardArrowRight')) {\n                    triggerArrowSwipe('right');\n                } else {\n                    triggerArrowSwipe('left');\n                }\n            });\n        }\n\n        function computeCardHeightPx(){\n            const viewportH = window.innerHeight || document.documentElement.clientHeight || 700;\n            const target = Math.min(Math.round(viewportH * 0.68), 620);\n            return Math.max(360, target);\n        }\n\n        function applyCardDimensions($card){\n            if (!$card || !$card.length) return;\n\n            const containerEl = document.querySelector('.matchup-container');\n            const containerH = containerEl ? containerEl.clientHeight : 0;\n            let height = computeCardHeightPx();\n\n            if (containerH > 0) {\n                height = Math.min(height, Math.max(300, containerH - 24));\n            }\n\n            $card.css('height', `${height}px`);\n        }\n\n        function mountCardForUser(user, zIndex){\n            const $nextCard = createCard(user);\n            applyCardDimensions($nextCard);\n            $('.matchup-container').append($nextCard);\n            $('.matchup-container').append(`<button class=\"cardArrow cardArrowLeft\" type=\"button\" aria-label=\"Pass\"><i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"><\/i><\/button>`);\n            $('.matchup-container').append(`<button class=\"cardArrow cardArrowRight\" type=\"button\" aria-label=\"Like\"><i class=\"fa-solid fa-check\" aria-hidden=\"true\"><\/i><\/button>`);\n            $nextCard.css('z-index', Number(zIndex) || 0);\n        }\n\n        function reconcileCardAfterResize(){\n            const hasCard = !!document.querySelector('.matchup-container .card');\n            if (hasCard) {\n                applyCardDimensions($('.matchup-container .card').first());\n                return;\n            }\n\n            const usersToRender = cardListSource();\n            if (!Array.isArray(usersToRender) || usersToRender.length === 0) return;\n\n            const visibleIndex = Math.max(0, currentCardIndex - 1);\n            const user = usersToRender[visibleIndex];\n            if (!user) return;\n\n            clearCardViewport();\n            mountCardForUser(user, visibleIndex);\n        }\n\n        function createCard(user){\n            const fullName = `${user.first_name || ''} ${user.last_name || ''}`.trim() || 'Buddy';\n            const interests = normalizeInterests(user.interests);\n\n            const card = $('<div class=\"card\">');\n            const cardInner = $('<div class=\"card-inner\">');\n            const cardDetails = $('<div class=\"card-details\">').append($('<div class=\"userName\">').text(fullName));\n            const cardImage = $('<div class=\"card-image\">')\n                .append($('<img>').attr('src', BUDDYUP.profileImageSrc(user.profile_image)).attr('alt', `${fullName} profile image`).attr('onerror', 'BUDDYUP.onErrProfileImage(this)'))\n                .append(cardDetails);\n\n            const frontFace = $('<div class=\"card-face card-face-front\">').append(cardImage);\n            const extraDetails = $('<div class=\"extra-details\">');\n            const city = user.city || '-';\n            const state = user.state || '-';\n            const aboutMe = user.about_me || '-';\n            extraDetails\n                .append($('<p>').append($('<strong>').text('City:')).append(document.createTextNode(` ${city}`)))\n                .append($('<p>').append($('<strong>').text('State:')).append(document.createTextNode(` ${state}`)))\n                .append($('<p>').append($('<strong>').text('Interests:')).append('<br>').append(document.createTextNode(interests.length ? interests.join(', ') : '-')))\n                .append($('<p>').append($('<strong>').text('About Me:')).append('<br>').append(document.createTextNode(aboutMe)));\n\n            const backFace = $('<div class=\"card-face card-face-back\">')\n                .append($('<div class=\"card-back-title\">').text(fullName))\n                .append(extraDetails);\n\n            cardInner.append(frontFace).append(backFace);\n            card.append(cardInner);\n            setupCard(card, user);\n            return card;\n        }\n\n        function showActionFeedback(type, message, duration){\n            const feedbackEl = document.getElementById('matchupActionFeedback');\n            if (!feedbackEl) return;\n\n            const icon = type === 'accept'\n                ? '<i class=\"fa-solid fa-thumbs-up\" aria-hidden=\"true\"><\/i>'\n                : type === 'reject'\n                    ? '<i class=\"fa-solid fa-circle-xmark\" aria-hidden=\"true\"><\/i>'\n                    : '<i class=\"fa-solid fa-circle-info\" aria-hidden=\"true\"><\/i>';\n\n            feedbackEl.innerHTML = `${icon}<span>${message}<\/span>`;\n            feedbackEl.className = `matchupActionFeedback active ${type}`;\n\n            if (feedbackTimeout) {\n                window.clearTimeout(feedbackTimeout);\n                feedbackTimeout = null;\n            }\n\n            feedbackTimeout = window.setTimeout(() => {\n                feedbackEl.classList.remove('active', 'accept', 'reject', 'info');\n            }, Number(duration) || 900);\n        }\n\n        async function showIndicator(type, user){\n            if (isSwipeInFlight) return;\n            isSwipeInFlight = true;\n\n            const actionVerb = type === 'accept' ? 'Like sent' : 'Passed';\n            showActionFeedback(type, actionVerb, 900);\n\n            const cardEl = document.querySelector('.matchup-container .card');\n            if (cardEl) cardEl.classList.add('card-processing');\n\n            const minimumFeedbackDuration = new Promise(resolve => window.setTimeout(resolve, 700));\n            const swipeChange = await BUDDYUP.apiRequest('matchup', {\n                id: user.id,\n                swipe: type,\n                filters: serverFilterPayload(),\n            });\n            await minimumFeedbackDuration;\n\n            if (swipeChange.status === 'success'){\n                const isMatch = swipeChange.match === true || swipeChange.match === 1;\n                if (type === 'accept' && isMatch){\n                    showMatchOverlay(user);\n                } else {\n                    showNextCard();\n                }\n\n            } else {\n                const currentCard = document.querySelector('.matchup-container .card');\n                if (currentCard) {\n                    currentCard.style.transform = 'none';\n                    currentCard.classList.remove('card-processing');\n                }\n\n                const errMsg = swipeChange?.message || '';\n                const modalContent = errMsg && String(errMsg).trim() !== ''\n                    ? errMsg\n                    : `An error occurred sending while swiping. Please try again.`;\n                const isSwipeLimit = \/right swipe limit|swipe limit\/i.test(String(errMsg));\n                const modalHeading = isSwipeLimit ? 'Swipe limit reached' : 'An error occurred';\n                if (isSwipeLimit) {\n                    BUDDYUP.subscriptionModal(modalContent, modalHeading);\n                } else {\n                    BUDDYUP.openModal(modalContent, modalHeading, 'buddyUpTextCenter');\n                }\n            }\n\n            isSwipeInFlight = false;\n        }\n\n        BUDDYUP.setGlobalHandler('matchup.keydown', document, 'keydown', e => {\n            if (currentUser !== null && !isSwipeInFlight){\n                if (e.key === 'ArrowRight'){ triggerArrowSwipe('right'); }\n                if (e.key === 'ArrowLeft'){ triggerArrowSwipe('left'); }\n            }\n        });\n\n        function setupCard($card, user){\n            currentUser = user;\n            let startEvent;\n\n            $card.on('mousedown touchstart', function(event){\n                event.preventDefault();\n                startPos = getPositionX(event);\n                isDragging = false;\n                $card.css('transition', 'none'); \/\/ Disable transition during dragging\n                $(window).on('mousemove touchmove', touchMove);\n                $(window).on('mouseup touchend', touchEnd);\n            });\n            \n            function touchMove(event){\n                const currentPosition = getPositionX(event);\n                const diff = Math.abs(currentPosition - startPos);\n\n                if (diff > 10){\n                    isDragging = true;\n                    currentTranslate = prevTranslate + currentPosition - startPos;\n                    $card.css('transform', `translateX(${currentTranslate}px)`);\n                }\n            }\n\n            function touchEnd(event){\n                $(window).off('mousemove touchmove', touchMove);\n                $(window).off('mouseup touchend', touchEnd);\n\n                const movedBy = currentTranslate - prevTranslate;\n                const swipeThreshold = getSwipeThreshold();\n\n                if (!isDragging){\n                    toggleCardDetails($card);\n                } else if (Math.abs(movedBy) > swipeThreshold && !isSwipeInFlight){\n                    if (movedBy < -swipeThreshold){\n                        $card.css('transform', 'translateX(-100vw)');\n                        showIndicator('reject', user);\n                    } else if (movedBy > swipeThreshold){\n                        $card.css('transform', 'translateX(100vw)');\n                        showIndicator('accept', user);\n                    }\n                } else {\n                    $card.css('transform', 'translateX(0)');\n                    $card.css('transition', 'transform 0.3s ease-in-out'); \/\/ Re-enable transition after dragging\n                    prevTranslate = 0;\n                    currentTranslate = 0;\n                }\n            }\n\n            function getPositionX(event){\n                return event.type.includes('mouse') ? event.pageX : event.originalEvent.touches[0].clientX;\n            }\n\n\n            function toggleCardDetails($card){\n                $card.toggleClass('flipped');\n            }\n        }\n\n        function showMatchOverlay(user){\n            const currentUser = BUDDYUP.getCurrentUser();\n            const currentUserImage = BUDDYUP.profileImageSrc(currentUser.profile_image);\n            const matchedUserImage = BUDDYUP.profileImageSrc(user.profile_image);\n            \n            \/\/ Create overlay with confetti\n            const overlay = $(`\n                <div class=\"match-overlay\">\n                    <div class=\"match-content\">\n                        <h1>It's a Match! \ud83c\udf89<\/h1>\n                        <div class=\"match-images\">\n                            <img decoding=\"async\" src=\"${currentUserImage}\" alt=\"Your profile\" onerror=\"BUDDYUP.onErrProfileImage(this)\">\n                            <span class=\"heart-icon\">\u2764\ufe0f<\/span>\n                            <img decoding=\"async\" src=\"${matchedUserImage}\" alt=\"${user.first_name}'s profile\" onerror=\"BUDDYUP.onErrProfileImage(this)\">\n                        <\/div>\n                        <p>You and ${user.first_name} have both swiped right!<\/p>\n                        <p>Go to your Matches page to connect with them.<\/p>\n                        <div class=\"match-actions\">\n                            <button class=\"btn-continue\">Keep Swiping<\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            `);\n            \n            \/\/ Add confetti\n            const colors = ['#ff6b9d', '#4ecdc4', '#44e5e7', '#f7d969', '#a8dadc', '#e63946'];\n            for (let i = 0; i < 50; i++) {\n                const confetti = $('<div class=\"confetti\"><\/div>');\n                const randomColor = colors[Math.floor(Math.random() * colors.length)];\n                const randomLeft = Math.random() * 100;\n                const randomDelay = Math.random() * 0.5;\n                \n                confetti.css({\n                    'background': randomColor,\n                    'left': randomLeft + '%',\n                    'animation-delay': randomDelay + 's'\n                });\n                \n                overlay.find('.match-content').append(confetti);\n            }\n            \n            $('body').append(overlay);\n            \n            \/\/ Handle button clicks\n            overlay.find('.btn-continue').on('click', function() {\n                overlay.fadeOut(300, function() {\n                    $(this).remove();\n                    showNextCard();\n                });\n            });\n        }\n\n        function showNextCard(){\n            currentUser = null;\n            clearCardViewport();\n            const usersToRender = cardListSource();\n\n            if (currentCardIndex < usersToRender.length){\n                const user = usersToRender[currentCardIndex];\n                mountCardForUser(user, currentCardIndex);\n                currentCardIndex++;\n            } else if (matchupData.done === false && !hasActiveFilters()) {\n                getMatchupUsers();\n            } else if (matchupData.done === false && hasActiveFilters()) {\n                showContainerMessage('No more users in your filtered stack. Reset filters or broaden your preferences.');\n            } else {\n                showContainerMessage('No new Buddy\\'s here. Try again later, new Buddy\\'s are always joining or planning their next excursion!');\n            }\n        }\n\n        \/\/ Prevent default drag behavior on images\n        $('img').on('dragstart', function(event){\n            event.preventDefault();\n        });\n        \n        \/\/ Get new set of users\n        async function getMatchupUsers(){\n            const message = currentCardIndex === 0 ? `Loading Matchup` : `Getting more users`;\n            const loadingEl = BUDDYUP.loading(message);\n            showContainerMessage(loadingEl);\n\n            const usersListResponse = await BUDDYUP.apiRequest('matchup-list', {\n                filters: serverFilterPayload(),\n            });\n            clearCardViewport();\n            \n            if (usersListResponse && usersListResponse.status === 'error') {\n                const msg = usersListResponse.message || 'An error occurred loading Matchup.';\n                BUDDYUP.openModal(msg, 'Error', 'buddyUpTextCenter');\n                matchupData.users = [];\n                matchupData.done = true;\n                return;\n            } else {\n                document.querySelector('.buddyUpSwipeMessage').classList.remove('hidden');\n                document.querySelector('.viewMatchesButtonWrapper').classList.remove('hidden');\n                if (usersListResponse.status === 'success' && usersListResponse.users && ['object', 'array'].includes(typeof usersListResponse.users) && usersListResponse.users.length > 0){\n                    matchupData.users = usersListResponse.users;\n                    matchupData.done = false;\n                } else {\n                    matchupData.users = [];\n                    matchupData.done = true;\n                }\n\n                if (hasActiveFilters()) {\n                    applyFiltersToLoadedUsers();\n                } else {\n                    matchupData.activeUsers = matchupData.users.slice();\n                    currentCardIndex = 0;\n                    showNextCard();\n                }\n            }\n        }\n\n        initSidebarControls();\n        initFiltersControls();\n        initArrowControls();\n\n        \/\/ Swipe gestures on matchup sidebar\n        if ($sidebar.length && typeof BUDDYUP.initShelfSwipeGestures === 'function') {\n            BUDDYUP.initShelfSwipeGestures({\n                shelf: $sidebar[0],\n                tab: $sidebarTab.length ? $sidebarTab[0] : null,\n                onOpen: openSidebar,\n                onClose: closeSidebar,\n                isOpen: function() { return $wrapper.hasClass('matchup-sidebar-open'); },\n                key: 'matchup.sidebar',\n            });\n        }\n\n        \/\/ Initial card setup\n        getMatchupUsers();\n    });\n})();<\/script><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/full-width-no-header.php","meta":{"footnotes":""},"class_list":["post-235","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/buddyupapi-staging.us35.cdn-alpha.com\/api\/wp\/v2\/pages\/235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buddyupapi-staging.us35.cdn-alpha.com\/api\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/buddyupapi-staging.us35.cdn-alpha.com\/api\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/buddyupapi-staging.us35.cdn-alpha.com\/api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buddyupapi-staging.us35.cdn-alpha.com\/api\/wp\/v2\/comments?post=235"}],"version-history":[{"count":0,"href":"https:\/\/buddyupapi-staging.us35.cdn-alpha.com\/api\/wp\/v2\/pages\/235\/revisions"}],"wp:attachment":[{"href":"https:\/\/buddyupapi-staging.us35.cdn-alpha.com\/api\/wp\/v2\/media?parent=235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}