.match-slider-container {
    width: 100%;
    max-width: 400px;
    height: 100vh;
    max-height: 100vh;
    background: #001a4d; /* matches fan cards */
    border-radius: 24px;
    overflow: visible;
    position: relative;
    margin: 0 auto;
    touch-action: pan-y;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}

.swiper-slide {
    position: relative;
}

/* Card/slide styling */
.match-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: #001a4d !important;
    color: #fff;
    border-radius: 20px;
    border: 1.5px solid #fff;    /* elegant thin white border */
    padding: 16px;
    min-height: 100vh;
    box-sizing: border-box;
    width: 100%;
    max-width: 400px;
    overflow: hidden;
    transition: background 0.3s, border-color 0.2s;
}

/* Active (center) slide */
.swiper-slide-active.match-slide,
.swiper-slide-duplicate-active.match-slide {
    background: #002266 !important;
    border-color: #fff;           /* white border remains */
}

/* Fan cards: next/prev/duplicates */
.swiper-slide-next.match-slide,
.swiper-slide-prev.match-slide,
.swiper-slide-duplicate.match-slide,
.swiper-slide-duplicate-next.match-slide,
.swiper-slide-duplicate-prev.match-slide {
    background: #001a4d !important;
    border-color: #fff;
}

/* Swiper navigation arrows */
.swiper-button-prev,
.swiper-button-next {
    color: #fff;
    background: rgba(0,34,102,0.8);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    top: 50%;
    transform: translateY(-50%);
}
.swiper-button-prev { left: 6px; }
.swiper-button-next { right: 6px; }

/* Modal styling */
.modal-overlay {
    position: fixed;
    z-index: 10000;
    left: 0; top: 0; width: 100vw; height: 100vh;
    background: rgba(0,26,77,0.98);
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-content {
    background: #002266;
    color: #fff;
    border: 1.5px solid #fff;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 75vh;
    padding: 24px 16px;
    overflow-y: auto;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    font-size: 1.15em;
    word-break: break-word;
}

#swipe-feedback { /* ... */ }
#swipe-feedback-img { /* ... */ }
#swipe-feedback-msg { /* ... */ }

body.modal-open {