html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDgKNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

    /*SIDEBAR MOBILE*/
@media (max-width: 576px) {
    .mobile-dense {
        padding: 0.5rem 0.25rem !important;
        font-size: 0.875rem;
        line-height: 1.2;
    }

        .mobile-dense i {
            font-size: 1rem;
            margin-right: 0.25rem !important;
        }

    .mobile-section-title {
        font-size: 1rem !important;
        margin-bottom: 0.5rem;
        padding: 0 0.5rem;
    }

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

    .offcanvas-header {
        padding: 0.75rem 1rem;
    }

    .offcanvas-body {
        padding: 0.5rem 1rem;
    }

    /* Reduce spacing between sections */
    .py-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    hr {
        margin: 0.5rem auto !important;
    }
}

/* Ensure proper spacing on larger screens */
@media (min-width: 576px) {
    .mobile-dense {
        padding: 0.75rem 0.5rem;
    }
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

/* Add these styles to your app.css file */

/* General Layout */
:root {
    --sidebar-width: 250px;
    --sidebar-collapsed-width: 70px;
    --topbar-height: 60px;
    --transition-speed: 0.3s;
    --wimbledon-green: #006633;
    --wimbledon-light-green: #108944;
    --wimbledon-purple: #512358;
    --wimbledon-light-purple: #72366d;
    --dark-red: #860000;
    --usopen-blue: #1c91d0;
    --usopen-yellow: #ff69b4;
    --usopen-light-blue: #4e65c8;
    --usopen-lighter-blue: #9ba6e3;
    --usopen-pale-blue: #d0d6f5;
    --usopen-light-yellow: #ffe14d;
    --usopen-lighter-yellow: #ffeda6;
    --usopen-pale-yellow: #fff9d9;
    /* Shadow variables */
    --shadow-light: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.nickname-check-icon {
    position: absolute;
    right: 15px;
    color: var(--usopen-blue);
    font-size: 1.2rem;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* Topbar styles */
.topbar {
    height: var(--topbar-height);
    background-color: #fff;
    z-index: 1030;
}

[data-bs-theme="dark"] .topbar {
    background-color: #212529;
    color: #fff;
}

/* Sidebar styles */
.sidebar {
    width: var(--sidebar-width);
    background-color: #f8f9fa;
    transition: width var(--transition-speed) ease;
    overflow-x: hidden;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

    .sidebar.collapsed {
        width: var(--sidebar-collapsed-width);
    }

.sidebar-nav {
    padding: 1rem 0;
}

.sidebar .nav-link {
    padding: 0.75rem 1rem;
    color: #495057;
    display: flex;
    align-items: center;
    border-radius: 0.25rem;
    margin: 0.2rem 0.5rem;
    transition: all 0.2s ease;
}




    .sidebar .nav-link:hover {
        /*background-color: rgba(0, 0, 0, 0.05);*/
    }

    .sidebar .nav-link.active {
        color: var(--usopen-yellow) !important;
        font-weight: bold;
    }

.sidebar.collapsed .sidebar-text {
    display: none;
}

/* Main content area */
.content {
    padding-top: 0;
    overflow-y: auto;
}

/* Dark mode styles */
[data-bs-theme="dark"] {
    --bs-body-bg: #212529;
    --bs-body-color: #f8f9fa;
}

    [data-bs-theme="dark"] .sidebar {
        background-color: #2c3034;
        border-color: rgba(255, 255, 255, 0.1);
    }

        [data-bs-theme="dark"] .sidebar .nav-link {
            color: #adb5bd;
        }

            [data-bs-theme="dark"] .sidebar .nav-link:hover {
                background-color: rgba(255, 255, 255, 0.05);
            }

            [data-bs-theme="dark"] .sidebar .nav-link.active {
                background-color: rgba(13, 110, 253, 0.2);
            }


/* Enhanced dark mode styles */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    margin-right: 0.5rem;
}

    .theme-switch-wrapper .form-switch {
        margin-bottom: 0;
        cursor: pointer;
    }

.form-check-input:checked {
    background-color: #6366f1;
    border-color: #6366f1;
}

/* Animation for switch */
.form-check-input {
    transition: background-position 0.15s ease-in-out, background-color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

/* Icon styling */
.form-check-label i {
    vertical-align: middle;
    transition: all 0.3s ease;
}

[data-bs-theme="dark"] .form-check-label .bi-moon-fill {
    color: #f0c420;
}

[data-bs-theme="light"] .form-check-label .bi-sun-fill {
    color: #ff9800;
}

/* Smooth transition between modes */
body, .sidebar, .topbar, .content, .card, .dropdown-menu {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Additional dark mode styles for components */
[data-bs-theme="dark"] .card {
    background-color: #2c3034;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .btn-outline-secondary {
    color: #adb5bd;
    border-color: #495057;
}

    [data-bs-theme="dark"] .btn-outline-secondary:hover {
        background-color: #495057;
        color: #fff;
    }

[data-bs-theme="dark"] .dropdown-menu {
    background-color: #343a40;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .dropdown-item {
    color: #e9ecef;
}

    [data-bs-theme="dark"] .dropdown-item:hover {
        background-color: #495057;
        color: #fff;
    }

[data-bs-theme="dark"] .dropdown-header {
    color: #adb5bd;
}

[data-bs-theme="dark"] .table {
    color: #e9ecef;
    border-color: #495057;
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}




/* Responsive sidebar behavior */

/* Medium screens (md) - show only icons */
@media (max-width: 991.98px) {
    .sidebar {
        width: var(--sidebar-collapsed-width);
    }

        .sidebar .sidebar-text {
            display: none;
        }

        .sidebar .nav-link i {
            margin-right: 0 !important;
        }

        /* Center icons in collapsed sidebar */
        .sidebar .nav-link {
            justify-content: center;
            padding: 0.75rem;
        }
}

/* Small screens (sm) - hide sidebar completely */
@media (max-width: 767.98px) {
    .sidebar {
        position: fixed;
        left: -100%;
        top: var(--topbar-height);
        height: calc(100vh - var(--topbar-height));
        z-index: 1020;
        transition: left var(--transition-speed) ease;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

        /* Show sidebar when toggled */
        .sidebar.collapsed {
            left: 0;
            width: var(--sidebar-width);
        }

            /* Restore text in burger menu view */
            .sidebar.collapsed .sidebar-text {
                display: inline-block;
            }

            .sidebar.collapsed .nav-link i {
                margin-right: 0.5rem !important;
            }

            .sidebar.collapsed .nav-link {
                justify-content: flex-start;
            }

    /* Adjust main content when sidebar is hidden */
    .content {
        margin-left: 0 !important;
        width: 100%;
    }
}


.gradient-background {
    background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
    transition: background 0.3s ease;
}

[data-bs-theme="dark"] .gradient-background {
    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}

.navbar {
    z-index: 40;
    background: #ffffff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background-color 0.3s ease;
}

[data-bs-theme="dark"] .navbar {
    background: #1a1a1a;
}

.app-container {
    position: relative;
    /*overflow-x: hidden;*/
}

.content-area {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.cursor-pointer {
    cursor: pointer;
}

/*WIMBLEDON*/
/* Wimbledon-inspired Modern Layout Additions */

.hero-banner-30 {
    background: url('/img/header1.png') top/cover no-repeat;
    min-height: 30vh;
    position: relative;
}

@media screen and (max-width: 480px) {
    .hero-banner-30 {
        display: none;
    }
}


@media screen and (max-width: 768px) {
    .hero-banner-30 {
        display:none;
    }
}

@media screen and (max-width: 768px) {
    .hero-banner-30 {
        display:none;
    }
}


.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(28, 145, 208, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%);
    z-index: 1;
}

.usopen-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(28, 145, 208, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%);
    z-index: 1;
}

.ao-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(28, 145, 208, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%);
    z-index: 1;
}

/* Custom min-height utility */
.min-vh-50 {
    min-height: 50vh;
}

/* Enhance navbar with modern touches */
.navbar {
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.navbar-brand img {
    transition: transform 0.3s ease;
}

.navbar:hover .navbar-brand img {
    transform: scale(1.05);
}

/* Enhanced card styles */
.modern-card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-light);
}

    .modern-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-medium);
    }

/* Enhanced button styles */
.btn {
    border-radius: 6px;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    transition: all 0.3s ease;
}


.btn {
    border-radius: 6px;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-usopen {
    background: var(--usopen-blue) !important;
    color: white !important;
    border: none;
}

    .btn-usopen:hover {
        background: var(--usopen-yellow) !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 102, 51, 0.3);
    }

/* Custom progress bars */
.progress {
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(90deg, var(--wimbledon-green), var(--wimbledon-light-green));
}

.progress-bar-usopen {
    background: linear-gradient(90deg, var(--usopen-blue), var(--usopen-light-blue));
}

/* Custom animations for page elements */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-container {
    animation: fadeIn 0.5s ease-out;
}

/* Enhanced tournament cards */
.tournament-card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    height: 220px;
}

.tournament-card-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.tournament-card:hover .tournament-card-img {
    transform: scale(1.1);
}

.tournament-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .hero-banner {
        min-height: 30vh;
    }
}

@media (max-width: 767.98px) {
    .hero-banner {
        min-height: 30vh;
    }

    .tournament-card {
        height: 180px;
    }
}


.trophy-circle-wimbledon {
    width: 40px;
    height: 40px;
    font-size: 15px;
    transition: all 0.3s ease;
    border: 2px solid white;
    outline: 3px solid var(--wimbledon-purple);
}

.text-usopen-yellow {
    color: var(--usopen-yellow);
}


.trophy-circle-usopen {
    background: var(--usopen-blue);
    width: 40px;
    height: 40px;
    font-size: 15px;
    transition: all 0.3s ease;
    border: 2px solid white;
    outline: 3px solid var(--usopen-yellow);
}

.trophy-circle-wimbledon:hover {
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.5);
}


.upcoming-tournaments-card {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* Responsive adjustments */
@media (max-width: 480px) {
    .mobile-tournament-item {
        flex: 0 0 calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
    }

    .mobile-tournaments-container {
        gap: 0.5rem;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .mobile-tournaments-container {
        scroll-behavior: smooth;
    }

    .tournament-card:hover {
        transform: none;
    }
}

.tournaments-list {
    max-height: 400px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

    .tournaments-list::-webkit-scrollbar {
        width: 4px;
    }

    .tournaments-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .tournaments-list::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
    }

        .tournaments-list::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.5);
        }

.tournament-item {
    transition: all 0.3s ease;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .tournament-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    }

        .tournament-item:hover .bg-dark {
            opacity: 0.7 !important;
        }

    /* Ensure text is always readable */
    .tournament-item .position-relative {
        z-index: 2;
    }

    /* Smooth overlay transitions */
    .tournament-item .bg-dark {
        transition: opacity 0.3s ease;
    }

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .upcoming-tournaments-card {
        margin-top: 2rem;
    }

    .tournaments-list {
        max-height: 300px;
    }
}

@media (max-width: 767.98px) {
    .tournament-item {
        padding: 0.75rem !important;
    }

        .tournament-item h6 {
            font-size: 0.9rem;
        }

        .tournament-item .small {
            font-size: 0.8rem;
        }

    .tournaments-list {
        max-height: 250px;
    }
}



/**/
@media (max-width: 768px) {
    .permanent-sidebar {
        width: 280px;
        min-width: 280px;
    }
}

@media (max-width: 576px) {
    .permanent-sidebar {
        width: 250px;
        min-width: 250px;
    }
}


.nav-item a {
    color: var(--usopen-blue) !important;
}

/* Optional styling for better appearance */
.offcanvas-header {
    position: relative;
    padding: 1rem;
}

.logo-container {
    text-align: center;
}

/*.offcanvas .card {
    border: 1px solid #ddd;
    transition: transform 0.2s ease;
}

    .offcanvas .card:hover {*/
        /*transform: scale(1.05);*/
        /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }*/


/* Add these styles to fix mobile sidebar scrolling behavior */

/* Enhanced Offcanvas Mobile Scroll Behavior */
/*.offcanvas {
    overflow: hidden;*/ /* Prevent outer scrolling */
/*}

.offcanvas-body {
    overflow-y: auto;*/ /* Enable scrolling within the menu */
    /*overflow-x: hidden;*/ /* Prevent horizontal scrolling */
    /*-webkit-overflow-scrolling: touch;*/ /* Smooth scrolling on iOS */
    /*height: calc(100vh - 120px);*/ /* Adjust based on header height */
    /*position: relative;
}*/

/* Prevent body scroll when offcanvas is open */
/*body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}*/

/* Mobile-specific offcanvas improvements */
/*@media (max-width: 767.98px) {
    .offcanvas {
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
    }

    .offcanvas-header {
        flex-shrink: 0;*/ /* Prevent header from shrinking */
        /*position: sticky;
        top: 0;
        background: inherit;
        z-index: 1;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .offcanvas-body {
        flex: 1 1 auto;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        height: auto !important;
        max-height: none !important;
        padding-bottom: 2rem;*/ /* Extra space at bottom */
    /*}*/

        /* Improve scrollbar styling on mobile */
        /*.offcanvas-body::-webkit-scrollbar {
            width: 4px;
        }

        .offcanvas-body::-webkit-scrollbar-track {
            background: transparent;
        }

        .offcanvas-body::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 2px;
        }

            .offcanvas-body::-webkit-scrollbar-thumb:hover {
                background: rgba(0, 0, 0, 0.4);
            }
}*/

/* Fix for very small mobile screens */
/*@media (max-width: 480px) {
    .offcanvas-body {
        padding: 0.25rem 0.75rem 2rem;
    }

    .mobile-dense {
        padding: 0.375rem 0.2rem !important;
        font-size: 0.8rem;
        line-height: 1.1;
    }

        .mobile-dense i {
            font-size: 0.9rem;
            margin-right: 0.2rem !important;
        }
}*/

/* Additional fixes for iOS Safari */
/*@supports (-webkit-touch-callout: none) {
    .offcanvas-body {
        -webkit-overflow-scrolling: touch;
        transform: translate3d(0, 0, 0);*/ /* Force hardware acceleration */
    /*}
}*/

/* Ensure proper touch scrolling behavior */
/*.offcanvas .nav-link {
    touch-action: manipulation;*/ /* Improve touch responsiveness */
/*}*/

/* Fix for potential z-index issues */
/*.offcanvas.show {
    z-index: 1055 !important;
}

.offcanvas-backdrop {
    z-index: 1050 !important;
}*/


.nav-link {
    font-size: 1rem;
    font-weight: 500;
    color: #000;
}


/* Responsive adjustments */
@media (max-width: 576px) {
    .card-body {
        padding: 1.5rem !important;
    }

    .form-control-lg {
        padding: 0.625rem 0.875rem;
        font-size: 0.95rem;
    }
}


/**ERROR PAGES*/

/* Responsive Design */
@media (max-width: 768px) {
    .error-digit {
        font-size: 5rem;
    }

        .error-digit.middle {
            font-size: 4rem;
        }

    .error-title {
        font-size: 2rem;
    }

    .error-subtitle {
        font-size: 1.1rem;
    }

    .error-content {
        padding: 1rem;
    }

    .error-actions {
        margin-bottom: 2rem;
    }

}

@media (max-width: 576px) {
    .error-digit {
        font-size: 4rem;
    }

        .error-digit.middle {
            font-size: 3rem;
        }

    .error-actions {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

}


/* Responsive adjustments */
@media (max-width: 768px) {
    .match-card {
        padding: 12px;
    }

    .player-name {
        font-size: 14px;
    }

    .match-time {
        font-size: 12px;
    }
}


@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}


/* Large screens: 3 columns */
@media (min-width: 992px) {
    .matches-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Medium screens: 2 columns */
@media (min-width: 768px) and (max-width: 991px) {
    .matches-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Small screens: 1 column */
@media (max-width: 767px) {
    .matches-grid {
        grid-template-columns: 1fr;
    }
}


/*WIMBLEDON MATCH BOX*/
.match-box {
    position: relative;
    font-family: "Gotham 5r", Helvetica, Arial, sans-serif;
}

    .tiebreak {
        position: relative;
        top: -9px;
        font-size: 9px;
    }

/* Responsive scores - decrease size on small screens */
@media (max-width: 768px) {
    .tiebreak {
        font-size: 7px;
    }
}

@media (max-width: 480px) {
    .tiebreak {
        width: 6px;
    }
}

    .match-box .match-status {
        position: relative;
        padding-top: 5px;
        padding-left: 9px;
        padding-bottom: 5px;
        display: flex;
        flex-flow: column;
        border-top: 2px solid #cbcbcb;
        border-right: 2px solid #cbcbcb;
        border-bottom: 2px solid #cbcbcb;
        border-radius: 8px;
        height: 167px;
        background: #fff;
    }

        .match-box .match-status .blue-border {
            width: 9px;
            height: 167px;
            background: var(--usopen-blue);
            position: absolute;
            top: -2px;
            left: -1px;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }

        .match-box .match-status .correct-winner-border {
            width: 9px;
            height: 167px;
            background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity,.5)) !important;
            position: absolute;
            top: -2px;
            left: -1px;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }

.correct-winner-text {
    color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity,.5)) !important;
}

.correct-set-score-text {
    color: var(--bs-success);
}

        .match-box .match-status .correct-set-score-border {
            width: 9px;
            height: 167px;
            background: var(--bs-success);
            position: absolute;
            top: -2px;
            left: -1px;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }

        .match-box .match-status .correct-game-score-border {
            width: 9px;
            height: 167px;
            background: var(--usopen-yellow);
            position: absolute;
            top: -2px;
            left: -1px;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }

        .match-box .match-status .no-score-border {
            width: 9px;
            height: 167px;
            background: var(--bs-danger);
            position: absolute;
            top: -2px;
            left: -1px;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }

.match-box .match-status .close-call-border {
    width: 9px;
    height: 167px;
    background: var(--bs-warning);
    position: absolute;
    top: -2px;
    left: -1px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}



.match-box .match-status .event-info {
    text-transform: uppercase;
    border-bottom: 1px solid var(--mud-palette-divider);
    color: #616161;
    font-size: 12px;
    height: 20px;
    padding: 0px 5px;
}

        .match-box .match-status .team-info.team-one {
            margin-top: 5px;
        }

        .match-box .match-status .team-info {
            display: flex;
            height: 40px;
        }

        .match-box .match-status .results-info {
            font-size: 0px;
            text-transform: uppercase;
            color: #bbb;
            position: absolute;
            right: 9px;
            top: 65px;
            transform: translateY(-50%);
            width: 149px;
            background-color: #fff;
            text-align: center;
        }

        .match-box .match-status .results-info-pts {
            display: inline-block;
            width: 24px;
            font-size: 9px;
            margin-right: 3px;
        }

        .match-box .match-status .name, .match-box .match-status .seed {
            float: left;
            font-size: 12px;
            font-weight: bold;
            height: 39px;
            line-height: 39px;
            color: #000;
        }

        .match-box .match-status .flag {
            flex: 0 0 17px;
            align-self: center;
            margin-left: 4px;
        }

            .match-box .match-status .flag img {
                width: 17px;
                height: 10px;
            }

        .match-box .match-status .team-info.singles .team-name .member-one {
            display: flex;
        }

        .match-box .match-status .team-info .team-name {
            flex: 0 0 auto;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
            width: calc(100% - 175px);
            text-transform: uppercase;
            height: 40px;
        }

.team-name {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    width: calc(100% - 175px);
    text-transform: uppercase;
    height: 40px;
}


        .match-box .match-status .event-info .event-round {
            float: right;
            margin-right: 2px;
        }

        .match-box .match-status .team-info.singles .name {
            overflow: hidden;
        }

        .match-box .match-status .seed {
            margin-left: 5px;
            flex: 0 0 15px;
            font-size: 10px;
            cursor: default;
        }

        .match-box .match-status .team-info.singles .team-name .member-two {
            display: none;
        }

        .match-box .match-status .team-info .match-results {
            flex: 0 0 154px;
        }

            .match-box .match-status .team-info .match-results .results-wrapper {
                float: left;
                cursor: default;
            }

        .match-box .match-status .team-info.team-one .match-results .results-wrapper .pts, .match-box .match-status .team-info.team-one .match-results .results-wrapper .set {
            padding-bottom: 3px;
        }

        .match-box .match-status .team-info .match-results .results-wrapper .pts {
            visibility: hidden;
            margin-right: 3px;
        }

        .match-box .match-status .team-info .match-results .results-wrapper .pts, .match-box .match-status .team-info .match-results .results-wrapper .set {
            float: left;
            width: 24px;
            height: 39px;
            line-height: 39px;
            font-size: 16px;
            text-align: center;
            color: #54008b;
        }

.scores {
    float: left;
    width: 24px;
    height: 39px;
    line-height: 39px;
    font-size: 14px;
    text-align: center;
    /*color: #54008b;*/
    font-weight: bold;
}

/* Responsive scores - decrease size on small screens */
@media (max-width: 768px) {
    .scores {
        font-size: 12px;
        width: 19px;
    }
}

@media (max-width: 480px) {
    .scores {
        width: 14px;
        font-size: 11px;
    }

    .prediction-display{
        font-size: 10px;
    }
}

        .match-box .match-status .team-info.team-one .match-results .results-wrapper .pts, .match-box .match-status .team-info.team-one .match-results .results-wrapper .set {
            padding-bottom: 3px;
        }

        .match-box .match-status .team-info .match-results .results-wrapper .pts, .match-box .match-status .team-info .match-results .results-wrapper .set {
            float: left;
            width: 24px;
            height: 39px;
            line-height: 39px;
            font-size: 16px;
            text-align: center;
            color: #54008b;
        }

        .match-box .match-status .event-notes {
            text-transform: uppercase;
            color: #616161;
            padding-left: 5px;
            padding-right: 3px;
            font-size: 10px;
            margin-top: 6px;
        }

            .match-box .match-status .event-notes .duration {
                float: left;
            }

            .match-box .match-status .event-notes .update {
                float: right;
                margin-right: 5px;
            }

        .match-box .match-status .results-info-set {
            width: 24px;
            display: inline-block;
            text-align: center;
            font-size: 9px;
        }


        .match-box .match-status .name,
        .match-box .match-status .seed {
            float: left;
            font-size: 12px;
            font-weight: bold;
            height: 39px;
            line-height: 39px;
            color: #000;
        }

        /* Media query for smartphones */
@media (max-width: 768px) { /* Adjust the max-width if targeting smaller screens */
    .match-box .match-status .name,
    .match-box .match-status .seed {
        font-size: 10px; /* Set font size to 10px for smartphones */
    }

    .match-box .match-status .team-info .match-results .results-wrapper .pts, .match-box .match-status .team-info .match-results .results-wrapper .set {
        font-size: 14px;
    }

    .match-box .match-status .event-info {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .match-box .match-status .name,
    .match-box .match-status .seed {
        font-size: 9px;
    }

    .match-box .match-status .team-info .match-results .results-wrapper .pts, .match-box .match-status .team-info .match-results .results-wrapper .set {
        font-size: 13px;
    }

    .match-box .match-status .event-info {
        font-size: 10px;
    }
}


/* Responsive Design */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .join-code-wrapper {
        flex-direction: column;
        padding: 20px;
        gap: 15px;
    }

    .join-input {
        padding: 1rem;
        font-size: 1.1rem;
    }

    .join-btn {
        width: 100%;
        padding: 1rem;
    }

    .game-details {
        padding-right: 0;
        margin-bottom: 2rem;
    }

    .preview-actions {
        text-align: center;
    }

    .nickname-section {
        padding: 1rem;
    }
}


/*HERO BANNER RESPONSIVE*/
/* Landscape orientation on mobile */
@media (max-width: 767.98px) and (orientation: landscape) {
    .hero-banner {
        min-height: 50vh;
    }

    .hero-content-wrapper {
        min-height: 45vh;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-subtitle {
        font-size: 0.95rem;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .hero-banner {
        background-image: url('/img/header1_mobile.png'); /* Use high-res image if available */
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .hero-buttons .btn {
        transition: none;
    }

        .hero-buttons .btn:hover {
            transform: none;
        }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .usopen-overlay {
        background: linear-gradient(135deg, rgba(2, 40, 141, 0.8) 0%, rgba(255, 212, 1, 0.8) 100%);
    }
}

/* Tablet styles */
@media (max-width: 991.98px) {
    .hero-banner {
        min-height: 50vh;
    }

    .hero-content-wrapper {
        min-height: 40vh;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }
}

/* Mobile styles */
@media (max-width: 767.98px) {
    .hero-banner {
        min-height: 40vh;
        background-attachment: scroll; /* Better performance on mobile */
    }

    .hero-content-wrapper {
        min-height: 35vh;
        text-align: center;
    }

    .hero-title {
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
    }

    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .hero-buttons {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

        .hero-buttons .btn {
            width: 100%;
            max-width: 280px;
            padding: 0.875rem 1.5rem;
            font-size: 0.95rem;
        }
}

/* Small mobile styles */
@media (max-width: 575.98px) {
    .hero-banner {
        min-height: 35vh;
    }

    .hero-content-wrapper {
        min-height: 30vh;
        padding: 1rem 0;
    }

    .hero-title {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .hero-subtitle {
        font-size: 0.9rem;
        padding: 0.75rem 1rem;
        margin-bottom: 1.5rem;
    }

    .hero-buttons .btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }

    /* Adjust container padding for very small screens */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}


/* Animations */
    @keyframes pulse-border {
        0%, 100%

    {
        border-left-color: #f44336;
    }

    50% {
        border-left-color: #ff8a80;
    }

    }

    @keyframes pulse-dot {
        0%, 100%

    {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    }

    @keyframes flow-animation {
        0%

    {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }

    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .tournament-title

    {
        font-size: 2rem;
    }

    .tournament-meta {
        gap: 1rem;
    }

    .bracket-grid {
        gap: 3rem;
    }

    .bracket-column {
        min-width: 300px;
    }

    .match-card {
        padding: 0.75rem;
    }

    .player-name {
        font-size: 0.85rem;
        max-width: 120px;
    }

    .set-score {
        font-size: 0.8rem;
        min-width: 18px;
    }

    /* Adjust connector sizes for mobile */
    .bracket-connector {
        width: 1.5rem;
        right: -1.5rem;
    }

        .bracket-connector::before {
            width: 0.75rem;
            right: -0.75rem;
        }

    }

    @media (max-width: 480px) {
        .tournament-title

    {
        font-size: 1.75rem;
    }

    .bracket-column {
        min-width: 280px;
    }

    .tournament-meta, .tournament-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .player-name {
        max-width: 100px;
    }

    .bracket-grid {
        gap: 2.5rem;
    }

    }

    /*hide arrows from number input*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}


/*PRED GAMES DASHBOARD*/

/* Responsive adjustments */
/* Responsive adjustments */
/* Dashboard Layout */
.dashboard-container {
    padding-bottom: 80px; /* Space for mobile tabs */
}

/* Desktop Top Tabs */
.desktop-tabs {
    margin-bottom: 1.5rem;
}

.horizontal-tabs {
    width: 100%;
}

    .horizontal-tabs .mud-tabs-panels {
        display: none; /* Hide panel content as we show it in main area */
    }

    /* Enhanced tab styling for desktop */
    .horizontal-tabs .mud-tab {
        min-width: 200px;
        padding: 12px 24px;
        font-weight: 500;
        transition: all 0.3s ease;
    }

        .horizontal-tabs .mud-tab:hover {
            background-color: var(--mud-palette-action-hover);
        }

        .horizontal-tabs .mud-tab.mud-tab-active {
            background-color: var(--mud-palette-primary-lighten);
            color: var(--mud-palette-primary-text);
        }

/* Tab Content Area */
.tab-content-area {
    min-height: 70vh;
    width: 100%;
}

.tab-content-wrapper {
    padding: 2rem;
    min-height: 70vh;
}

.tab-content-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--mud-palette-divider);
}

.tab-content-body {
    height: 100%;
}

 /*Mobile Bottom Tab Bar*/ 
.mobile-tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.bottom-tab-bar {
    height: 70px;
    border-radius: 0;
    border-top: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
}

.tab-icon-button {
    border-radius: 50%;
    transition: all 0.3s ease;
}

    .tab-icon-button:hover {
        transform: scale(1.1);
    }

/* iOS-specific styling for better accessibility */
/*.mobile-tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
}

.bottom-tab-bar {
    height: 70px;
    background: #fff;
    border-radius: 0 !important;
    border-top: 1px solid #e0e0e0;
}*/

/* iOS Safe Area Support */
/*.ios-safe-area {
    padding-bottom: env(safe-area-inset-bottom);
    min-height: calc(70px + env(safe-area-inset-bottom));
}*/

/* Ensure content area has bottom padding to prevent overlap */
/*.content-area {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
}*/

/* Alternative approach for better iOS thumb reach */
/*@supports (-webkit-touch-callout: none) {*/
    /* iOS-specific styling */
    /*.bottom-tab-bar {
        height: 65px;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    .ios-safe-area {
        min-height: calc(65px + max(20px, env(safe-area-inset-bottom)));
    }*/
    /* Move tab bar higher on iOS for better thumb accessibility */
    /*.mobile-tabs {
        bottom: env(safe-area-inset-bottom);
    }

    .content-area {
        padding-bottom: calc(65px + max(20px, env(safe-area-inset-bottom)));
    }
}

.tab-icon-button {
    border-radius: 12px !important;
    transition: all 0.2s ease;
}

    .tab-icon-button:hover {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
        transform: translateY(-2px);
    }*/

    /* Active state styling */
    /*.tab-icon-button .mud-button-root[aria-pressed="true"] {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
    }*/

/* Ensure proper spacing on different screen sizes */
/*@media (max-width: 576px) {
    .tab-icon-button {
        min-width: 44px;
        min-height: 44px;
    }
}

@media (min-width: 577px) and (max-width: 991px) {
    .tab-icon-button {
        min-width: 48px;
        min-height: 48px;
    }
}*/


/* Existing styles for matches */
.card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: none;
}

.card-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.matches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    overflow-y: auto;
}

.match-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-left: 4px solid var(--usopen-blue);
    border-radius: 8px;
    padding: 12px;
    transition: all 0.3s ease;
    position: relative;
    min-height: 140px;
    display: flex;
    flex-direction: column;
}

    .match-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 82, 204, 0.15);
        border-left-color: var(--usopen-blue);
    }

.match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.match-time {
    font-weight: 600;
    color: var(--usopen-blue);
    font-size: 13px;
}

.match-status {
    font-size: 12px;
}

.players-section {
    text-align: center;
    margin-bottom: 8px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.player-name {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 14px;
    margin: 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vs-text {
    color: #6c757d;
    font-size: 11px;
    font-weight: 500;
    margin: 4px 0;
}

.match-details {
    text-align: center;
    margin-bottom: 8px;
    font-size: 12px;
}

.match-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: auto;
}

.status-live {
    background-color: #dc3545 !important;
    color: white;
    display: flex;
    align-items: center;
    gap: 4px;
}

.status-scheduled {
    background-color: var(--usopen-blue) !important;
    color: white;
}

.status-completed {
    background-color: #6c757d !important;
    color: white;
}

.status-cancelled {
    background-color: #dc3545 !important;
    color: white;
}

.status-postponed {
    background-color: #ffc107 !important;
    color: #212529;
}

.live-dot {
    width: 6px;
    height: 6px;
    background-color: white;
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
}

.deadline-text {
    color: #dc3545;
    font-size: 10px;
    font-weight: 500;
}

.prediction-display {
    background: #f8f9fa;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    color: #495057;
}

.prediction-status {
    position: absolute;
    bottom: 23px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
}

.predicted-winner {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    white-space: nowrap;
}

/* Quick Actions Mobile Styles */
.quick-actions-mobile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quick-action-btn {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    transition: all 0.2s ease;
}

    .quick-action-btn:hover {
        background-color: var(--mud-palette-action-hover);
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
@media (max-width: 991.98px) {
    .dashboard-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .tab-content-wrapper {
        padding: 1rem;
    }
}

@media (max-width: 768px) {
    .dashboard-container {
        padding-left: 0rem;
        padding-right: 0rem;
    }

    .tab-content-wrapper {
        padding: 0rem;
    }
}


/*HOME.razor*/

/* Responsive Design */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.2rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .cta-title {
        font-size: 2rem;
    }

    .hero-height {
        min-height: 40vh;
    }
}

/*Upcoming tournaments*/
/* Responsive adjustments */
@media (max-width: 768px) {
    .games-title {
        font-size: 2rem;
    }

    .prediction-game-card {
        min-height: 250px !important;
    }

    .btn-game-action {
        padding: 0.8rem 2rem;
        font-size: 1.1rem;
    }

    .btn-view-all-games {
        padding: 0.8rem 2rem;
        font-size: 1.1rem;
    }

    .game-stats {
        padding: 0.75rem;
    }

    .stat-number {
        font-size: 1.5rem !important;
    }

    .game-title {
        font-size: 1.2rem;
    }
}

@media (max-width: 576px) {
    .prediction-game-card {
        min-height: 220px !important;
    }

    .games-title {
        font-size: 1.8rem;
    }

    .btn-view-all-games,
    .btn-create-game,
    .btn-browse-games {
        width: 100%;
        max-width: 300px;
        margin-bottom: 0.5rem;
    }

    .game-stats {
        flex-direction: column;
        gap: 0.5rem;
    }

    .stat-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.25rem 0;
    }

    .stat-number, .stat-label {
        display: inline;
    }
}

/* Animation for cards loading */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*PRED GAMES DASHBOARD*/
/* Responsive adjustments for mobile header */
@media (max-width: 767px) {
    .tab-content-header .d-flex {
        gap: 1rem;
    }

    .quick-actions-mobile {
        flex-shrink: 0;
    }

    .quick-action-btn {
        min-width: 40px;
        min-height: 40px;
    }
}

/*USER PROFILE*/

/* Profile Page Styling */
.profile-container {
    padding-bottom: 80px; /* Space for mobile tabs */
}

.profile-stat-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-divider);
}

    .profile-stat-item:last-child {
        border-bottom: none;
    }

.activity-stat {
    text-align: center;
    padding: 16px 8px;
}

.membership-info {
    padding: 16px;
}

.delete-consequences {
    color: var(--mud-palette-text-secondary);
    margin: 16px 0;
    padding-left: 20px;
}

    .delete-consequences li {
        margin: 8px 0;
    }

/* Desktop Tabs */
.desktop-tabs .horizontal-tabs {
    width: 100%;
}

.horizontal-tabs .mud-tabs-panels {
    display: none;
}

.horizontal-tabs .mud-tab {
    min-width: 150px;
    padding: 12px 24px;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .horizontal-tabs .mud-tab:hover {
        background-color: var(--mud-palette-action-hover);
    }

    .horizontal-tabs .mud-tab.mud-tab-active {
        background-color: var(--mud-palette-primary-lighten);
        color: var(--mud-palette-primary-text);
    }

/* Tab Content */
.tab-content-area {
    min-height: 70vh;
    width: 100%;
}

.tab-content-wrapper {
    padding: 2rem;
    min-height: 70vh;
}

.tab-content-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--mud-palette-divider);
}

.tab-content-body {
    height: 100%;
}

/* Mobile Bottom Tab Bar */
.mobile-tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.bottom-tab-bar {
    height: 70px;
    border-radius: 0;
    border-top: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
}

.tab-icon-button {
    border-radius: 50%;
    transition: all 0.3s ease;
}

    .tab-icon-button:hover {
        transform: scale(1.1);
    }

/* Responsive */
@media (max-width: 768px) {
    .tab-content-wrapper {
        padding: 1rem;
    }
}

/* Footer positioning fix */
.tennis-footer {
    margin-top: auto; /* This pushes footer to bottom but allows it to flow naturally */
}

/* Ensure consistent layout behavior */
.app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.content-container {
    flex: 1;
    /*padding: 1rem;*/
}

/* Prevent scroll issues when switching layouts */
body {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Ensure consistent scrolling behavior */
html {
    scroll-behavior: smooth;
}

/* Fix for mobile webkit scrolling issues */
@supports (-webkit-overflow-scrolling: touch) {
    .content-area {
        -webkit-overflow-scrolling: touch;
    }
}

/* Add these rules at the end of your existing CSS to fix scrolling issues */

/* Reset and ensure consistent behavior */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
    position: relative;
}

/* Fix for layout switching issues */
.app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
}

/* Ensure content area scrolls properly */
.content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    position: relative;
    min-height: 0; /* Important: allows flex child to shrink */
}

.content-container {
    flex: 1;
    /*padding: 1rem;*/
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Footer positioning - ensure it doesn't interfere with scrolling */
.tennis-footer {
    margin-top: auto;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

/* Force reflow on layout changes */
.app-container.layout-changed {
    transform: translateZ(0);
}

/* Fix for webkit scrolling issues */
@supports (-webkit-overflow-scrolling: touch) {
    .content-area {
        -webkit-overflow-scrolling: touch;
    }
}

/* Prevent body scroll issues during navigation */
body.blazor-navigating {
    overflow: hidden auto;
}

/* Reset any potential transform issues */
.content-area * {
    /*transform: none !important;*/
}

/* Ensure consistent height calculations */
.min-vh-100 {
    min-height: 100vh !important;
}

/* Fix for potential MudBlazor conflicts */
.mud-main-content {
    overflow: visible !important;
}

/*CONFIRM EMAIL*/
@media (max-width: 768px) {
    .confirmation-card {
        padding: 2rem;
        margin: 1rem;
    }

        .confirmation-card h1 {
            font-size: 1.5rem;
        }
}


/*Player img*/
/* Default size for mobile/tablet (20px) */
.player-image {
    width: 20px;
    height: 20px;
}

.player-placeholder {
    width: 20px;
    height: 20px;
    background-color: #eee;
    color: #000;
    display: inline-block;
    text-align: center;
    line-height: 20px;
    vertical-align: middle;
}

/* Desktop/Laptop screens (992px and up) - 30px */
@media (min-width: 992px) {
    .player-image {
        width: 30px;
        height: 30px;
    }

    .player-placeholder {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }
}

/* Legacy classes - keeping for backward compatibility */
.thirty {
    width: 30px;
    height: 30px;
}

.circle-icon {
    width: 30px;
    height: 30px;
    background-color: #eee;
    color: #000;
    display: inline-block;
    text-align: center;
    line-height: 30px;
    vertical-align: middle;
}


/* Small screens (sm) - decrease by 2px */
@media (max-width: 767.98px) {
    .radioText {
        font-size: 0.875rem; /* ~14px, decreased by 2px from 16px */
    }
}

/* Extra small screens (xs) - decrease by 3px */
@media (max-width: 575.98px) {
    .radioText {
        font-size: 0.71em; /* ~13px, decreased by 3px from 16px */
    }
}

/*MyPredictionGames iPAD*/
/* iPad Mini Responsive Design - Horizontal Mode */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .my-prediction-games-section {
        padding: 2rem 0;
    }

    .games-title {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .prediction-game-card {
        min-height: 240px; /* Reduced for better fit */
    }

    .game-title {
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
    }

    .tournament-info {
        margin-bottom: 1rem;
        font-size: 0.9rem;
    }

    .association-badge {
        padding: 0.25rem 0.75rem;
        font-size: 0.75rem;
    }

    .game-stats {
        padding: 0.75rem;
    }

    .stat-number {
        font-size: 1.5rem !important;
    }

    .stat-label {
        font-size: 0.7rem;
    }

    .btn-game-action {
        padding: 0.8rem 2rem;
        font-size: 1rem;
    }

    .btn-view-all-games {
        padding: 0.8rem 2rem;
        font-size: 1rem;
    }
}

/* Additional iPad Mini specific adjustments */
@media screen and (width: 1024px) and (height: 768px) {
    .container {
        max-width: 95%;
        padding: 0 1rem;
    }

    .row.g-4 {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }

    .prediction-game-card {
        min-height: 220px;
    }

    .card-content {
        padding: 1rem;
    }

    .games-title {
        font-size: 1.8rem;
    }
}

/* Portrait mode iPad adjustments */
@media screen and (min-width: 768px) and (max-width: 834px) and (orientation: portrait) {
    .prediction-game-card {
        min-height: 260px;
    }
}

/* Better responsive text sizing */
@media (max-width: 991.98px) {
    .game-title {
        font-size: 1.3rem;
        line-height: 1.3;
    }

    .tournament-info {
        font-size: 0.85rem;
    }

    .association-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.6rem;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .prediction-game-card:hover {
        transform: none;
        box-shadow: 0 10px 25px rgba(2, 40, 141, 0.2) !important;
    }

    .prediction-game-card-hover {
        display: none; /* Hide hover overlay on touch devices */
    }

    .prediction-game-card {
        cursor: default;
    }
}




/* Modern Match Card Design with Flexbox - Fixed to keep containers side by side */

/* Container */
.match-list-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

/* Main Card */
.modern-match-card {
    position: relative;
    border-radius: 12px !important;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    min-width: 0; /* Prevent overflow */
    width: 100%; /* Ensure full width */
}

/* Status Border */
.match-status-border {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    z-index: 2;
}

.border-blue {
    background: var(--usopen-blue);
}

.border-cc-primary {
    border-color: #1c91d0 !important;
}

.border-cc-close{
    border-color: var(--mud-palette-warning);
}

    .match-status-border.blue-border {
        background: var(--usopen-blue);
    }

    .match-status-border.correct-winner-border {
        background: rgba(var(--bs-success-rgb), 0.5);
    }

    .match-status-border.correct-set-score-border {
        background: var(--bs-success);
    }

    .match-status-border.correct-game-score-border {
        background: var(--usopen-yellow);
    }

    .match-status-border.no-score-border {
        background: var(--bs-danger);
    }

.correct-winner-badge {
    background:rgba(var(--bs-success-rgb), 0.5);
    color: white !important;
}

.correct-set-score-badge {
    background: var(--bs-success);
    color: white !important;
}

/* Header Section */
.match-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1rem 0.5rem 1.5rem;
    border-bottom: 1px solid var(--mud-palette-divider);
    min-width: 0; /* Prevent overflow */
}

.match-time-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0; /* Prevent overflow */
}

/* Main Content - ALWAYS keep containers side by side */
.match-content-flex {
    display: flex;
    flex-direction: row; /* Force row direction on ALL screen sizes */
    padding: 1rem 1rem 0.5rem 1.5rem;
    gap: 1rem; /* Reduced gap for smaller screens */
    min-width: 0; /* Prevent overflow */
    align-items: flex-start; /* Align items to top */
}

/* Players Section */
.players-section-flex {
    flex: 1 1 auto; /* Allow growing and shrinking but maintain space */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0; /* Allow shrinking */
    max-width: calc(100% - 140px); /* Reserve space for predictions */
}

.player-row-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 2.5rem;
    min-width: 0; /* Prevent overflow */
}

.player-info-flex {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0; /* Allow shrinking */
}

.player-details-flex {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0; /* Allow shrinking */
    overflow: hidden; /* Prevent text overflow */
}

.player-name-text {
    font-weight: 600 !important;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    flex-shrink: 1; /* Allow shrinking */
    display: flex; /* Make MudText a flex container */
    align-items: center; /* Center align the text */
    line-height: 1.5; /* Consistent line height */
    height: 1.5rem; /* Match the flag container height */
}

.player-country {
    flex-shrink: 0;
}

/* Predictions Section - ALWAYS stay on the right */
.predictions-section-flex {
    display: flex;
    flex-direction: row; /* Keep predictions horizontal */
    gap: 0.5rem; /* Reduced gap for small screens */
    flex-shrink: 0; /* Never shrink */
    align-items: flex-start;
    min-width: 120px; /* Minimum width to prevent collapse */
    max-width: 140px; /* Maximum width to prevent taking too much space */
}

.prediction-column-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem; /* Reduced gap */
    min-width: 50px; /* Minimum width for each column */
    flex: 1; /* Equal width for both columns */
}

.prediction-label {
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 0.7rem; /* Smaller for all screens */
    text-align: center;
}

/* Radio Groups */
.winner-radio-group,
.sets-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem; /* Smaller gap */
    align-items: center;
    width: 100%;
}

.radio-option-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.125rem; /* Minimal gap */
    width: 100%;
}

    .radio-option-flex.player-two-radio {
        margin-top: 0.125rem; /* Minimal margin */
    }

.radio-text {
    font-weight: 500 !important;
    color: var(--mud-palette-text-primary) !important;
    font-size: 0.65rem !important;
    white-space: nowrap;
    line-height: 1;
}

/* Results Section */
.results-column-flex {
    display: flex;
    flex-direction: column;
    align-content: center;
    /*gap: 0.75rem;*/
    min-width: 120px;
    max-width: 140px;
    cursor: pointer;
    transition: all 0.2s ease;
    align-items: center;
    flex-shrink: 0; /* Never shrink */
}


.result-row-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem; /* Minimal gap */
}

.scores-flex {
    display: flex;
    gap: 0.125rem; /* Minimal gap */
    align-items: center;
    flex-wrap: nowrap; /* Prevent wrapping */
}

.set-score-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.score-text {
    font-weight: 700 !important;
    color: var(--usopen-blue) !important;
    min-width: 18px; /* Reduced width */
    text-align: center;
    font-size: 0.8rem; /* Smaller font for all screens */
}

.tiebreak-text {
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 0.55rem !important;
    color: var(--mud-palette-text-secondary) !important;
    background: var(--mud-palette-surface);
    border-radius: 50%;
    min-width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Footer Section */
.match-footer-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem 1rem 1.5rem;
    border-top: 1px solid var(--mud-palette-divider);
    min-width: 0; /* Prevent overflow */
    flex-wrap: wrap; /* Allow wrapping if needed */
    gap: 0.5rem;
}

.deadline-info-flex {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0; /* Prevent overflow */
}

/* Status Indicators */
.saving-indicator-flex,
.save-message-flex,
.predicted-winner-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0.5rem 1.5rem;
    background: var(--mud-palette-action-hover);
    border-top: 1px solid var(--mud-palette-divider);
    min-width: 0; /* Prevent overflow */
}

/* Enhanced Responsive Design - Keep side-by-side layout on ALL screens */

/* Large tablets and small desktops */
@media (max-width: 991.98px) {
    .match-content-flex {
        gap: 0.375rem;
    }

    .predictions-section-flex {
        min-width: 110px;
        max-width: 130px;
    }

    .prediction-column-flex {
        min-width: 45px;
    }
}
.serve-icon {
    width: 14px !important;
    transform: rotate(45deg);
}
/* Medium screens (tablets) - KEEP SIDE BY SIDE */
@media (max-width: 768px) {

    /* DO NOT change flex-direction to column */
    .match-content-flex {
        flex-direction: row !important; /* Force row layout */
        gap: 0.25rem;
        padding: 0.75rem 0.75rem 0.5rem 1rem;
    }

    .players-section-flex {
        max-width: calc(100% - 120px); /* Adjust for smaller predictions area */
    }

    .predictions-section-flex {
        min-width: 100px;
        max-width: 120px;
        gap: 0.25rem;
    }

    .prediction-column-flex {
        min-width: 40px;
    }

    .player-name-text {
        max-width: 100%; /* Reduce player name width */
        font-size: 0.75rem !important;
    }

    .serve-icon{
        width: 14px !important;
        transform: rotate(45deg);
    }

    .radio-text {
        font-size: 0.6rem !important;
    }

    .prediction-label {
        font-size: 0.65rem;
    }

    .match-header-flex,
    .match-content-flex,
    .match-footer-flex {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* Small screens (large phones) - STILL KEEP SIDE BY SIDE */
@media (max-width: 576px) {
    .match-list-container {
        gap: 0.75rem;
    }

    .modern-match-card {
        margin: 0 0.125rem;
    }

    .match-header-flex {
        padding: 0.75rem 0.5rem 0.5rem 0.75rem;
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    /* FORCE ROW LAYOUT */
    .match-content-flex {
        flex-direction: row !important; /* Never change to column */
        padding: 0.75rem 0.5rem 0.5rem 0.75rem;
        gap: 0.125rem;
    }

    .match-footer-flex {
        padding: 0.5rem 0.5rem 0.75rem 0.75rem;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

    .players-section-flex {
        max-width: calc(100% - 100px); /* Adjust for very small predictions area */
    }

    .player-details-flex {
        flex-direction: row;
        align-items: center;
        gap: 0.125rem;

    }

    .player-name-text {
        max-width: 100%;
        font-size: 0.7rem !important;
    }

    .serve-icon{
        width: 13px;
        transform: rotate(45deg);
    }

    .predictions-section-flex {
        min-width: 80px;
        max-width: 100px;
        gap: 0.125rem;
    }

    .prediction-column-flex {
        min-width: 35px;
    }

    .prediction-label {
        font-size: 0.6rem;
    }

    .radio-text {
        font-size: 0.55rem !important;
    }

    .score-text {
        font-size: 0.75rem !important;
        min-width: 16px;
    }

    .tiebreak-text {
        font-size: 0.6rem !important;
        min-width: 8px;
        height: 8px;
        top: -4px;
        right: -4px;
    }

    .result-row-flex {
        gap: 0.125rem;
    }

    .scores-flex {
        gap: 0.0625rem;
    }
}

/* Extra small screens (small phones) - STILL SIDE BY SIDE */
@media (max-width: 480px) {
    .match-list-container {
        padding: 0;
        gap: 0.5rem;
    }

    .modern-match-card {
        margin: 0;
        border-radius: 8px !important;
    }

    .match-header-flex {
        padding: 0.5rem 0.375rem 0.375rem 0.5rem;
    }

    /* MAINTAIN ROW LAYOUT */
    .match-content-flex {
        flex-direction: row !important; /* Always row */
        padding: 0.5rem 0.375rem 0.375rem 0.5rem;
        gap: 0.0625rem;
    }

    .match-footer-flex {
        padding: 0.375rem 0.375rem 0.5rem 0.5rem;
    }

    .players-section-flex {
        max-width: calc(100% - 80px); /* Very tight space for predictions */
    }


    .player-name-text {
        max-width: 100%;
        font-size: 0.65rem !important;
    }

    .serve-icon {
        width: 13px;
        transform: rotate(45deg);
    }

    .predictions-section-flex {
        min-width: 70px;
        max-width: 80px;
        gap: 0.0625rem;
    }

    .prediction-column-flex {
        min-width: 30px;
    }

    .prediction-label {
        font-size: 0.55rem;
    }

    .radio-text {
        font-size: 0.5rem !important;
    }

    .score-text {
        font-size: 0.7rem !important;
        min-width: 14px;
    }

    .match-time-info {
        gap: 0.25rem;
    }
}

/* Extra extra small screens (very small phones) - STILL SIDE BY SIDE */
@media (max-width: 360px) {
    .match-list-container {
        gap: 0.375rem;
    }

    .modern-match-card {
        border-radius: 6px !important;
    }

    .match-header-flex {
        padding: 0.375rem 0.25rem 0.25rem 0.375rem;
        font-size: 0.75rem;
    }

    /* FORCE ROW EVEN ON VERY SMALL SCREENS */
    .match-content-flex {
        flex-direction: row !important; /* Never column */
        padding: 0.375rem 0.25rem 0.25rem 0.375rem;
        gap: 0.03125rem;
    }

    .match-footer-flex {
        padding: 0.25rem 0.25rem 0.375rem 0.375rem;
    }

    .players-section-flex {
        max-width: calc(100% - 70px); /* Minimal space for predictions */
    }

    .player-name-text {
        max-width: 100%;
        font-size: 0.68rem !important;
        text-wrap: wrap;
    }

    .serve-icon {
        width: 12px;
        transform: rotate(45deg);
    }

    .predictions-section-flex {
        min-width: 60px;
        max-width: 70px;
        gap: 0.03125rem;
    }

    .prediction-column-flex {
        min-width: 25px;
    }

    .prediction-label {
        font-size: 0.5rem;
    }

    .radio-text {
        font-size: 0.45rem !important;
    }

    .score-text {
        font-size: 0.65rem !important;
        min-width: 12px;
    }

    .player-info-flex {
        gap: 0.25rem;
    }

    .player-details-flex {
        gap: 0.0625rem;
    }
}

/* Dark theme adjustments */
[data-bs-theme="dark"] .modern-match-card {
    background-color: var(--mud-palette-surface) !important;
    border-color: var(--mud-palette-divider) !important;
}

    [data-bs-theme="dark"] .modern-match-card:hover {
        background-color: var(--mud-palette-background-grey) !important;
    }

/* Animation for radio button transitions */
.mud-radio-button {
    transition: all 0.2s ease !important;
}

    .mud-radio-button:hover {
        transform: scale(1.05); /* Reduced scale for small screens */
    }

/* Enhanced MudBlazor component styling */
.modern-match-card .mud-chip {
    font-weight: 500 !important;
    letter-spacing: 0.3px; /* Reduced letter spacing */
}

.modern-match-card .mud-radio {
    margin: 0 !important;
}

.modern-match-card .mud-radio-group {
    gap: 0.125rem; /* Minimal gap for mobile */
}

/* Ensure MudBlazor components are properly sized on small screens */
@media (max-width: 480px) {
    .modern-match-card .mud-chip {
        font-size: 0.65rem !important;
        padding: 0.0625rem 0.25rem !important;
    }

    .modern-match-card .mud-icon {
        font-size: 0.75rem !important;
    }

    .modern-match-card .mud-radio {
        transform: scale(0.75);
    }
}

@media (max-width: 360px) {
    .modern-match-card .mud-radio {
        transform: scale(0.65);
    }
}

/* Fix for horizontal overflow on all screen sizes */
.modern-match-card * {
    box-sizing: border-box;
}

.modern-match-card {
    box-sizing: border-box;
    max-width: 100%;
}

/* Prevent any element from causing horizontal scroll */
.match-header-flex,
.match-content-flex,
.match-footer-flex,
.players-section-flex,
.predictions-section-flex,
.player-row-flex,
.player-info-flex,
.player-details-flex {
    max-width: 100%;
    box-sizing: border-box;
}


/* Add these touch-optimized styles after your existing CSS */

/* Touch-Optimized Match Cards */
.touch-prediction-btn {
    min-height: 44px !important; /* Apple's recommended minimum touch target */
    min-width: 44px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

    .touch-prediction-btn:hover {
        border: 0 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    }

/* Touch-optimized selection areas */
.touch-winner-selection,
.touch-sets-selection {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    min-width: 60px;
}

/* Enhanced touch targets for mobile */
@media (max-width: 768px) {
    .touch-prediction-btn {
        min-height: 48px !important;
        min-width: 48px !important;
        font-size: 0.85rem !important;
    }

    .prediction-column-flex {
        min-width: 55px !important;
    }

    .predictions-section-flex {
        gap: 0.75rem !important;
    }
}

/* Extra touch-friendly for small screens */
@media (max-width: 480px) {
    .touch-prediction-btn {
        min-height: 50px !important;
        min-width: 50px !important;
        font-size: 0.8rem !important;
        padding: 0.75rem 0.5rem !important;
    }

    .prediction-column-flex {
        min-width: 60px !important;
    }

    .touch-winner-selection,
    .touch-sets-selection {
        gap: 0.75rem;
    }
}

/* Touch feedback animations */
@keyframes touchFeedback {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

/* Improved tap targets for touch devices */
@media (hover: none) and (pointer: coarse) {
    /* This targets touch devices specifically */
    .touch-prediction-btn {
        min-height: 48px !important;
        min-width: 48px !important;
        font-size: 1rem !important;
    }

    .modern-match-card:hover {
        transform: none !important; /* Disable hover effects on touch */
    }

    .results-column-flex:hover {
        background-color: transparent !important;
    }

}


/* High contrast mode support */
@media (prefers-contrast: high) {
    .touch-prediction-btn {
        border-width: 2px !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .touch-prediction-btn {
        transition: none !important;
    }

        .touch-prediction-btn:hover {
            transform: none !important;
        }

        .touch-prediction-btn:active {
            animation: none !important;
        }
}

/* Dark theme support for touch buttons */
[data-bs-theme="dark"] .touch-prediction-btn {
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1) !important;
}

    [data-bs-theme="dark"] .touch-prediction-btn:hover {
        box-shadow: 0 4px 8px rgba(255, 255, 255, 0.15) !important;
    }

/* Ensure proper spacing and alignment */
/*.prediction-label {
    text-align: center !important;*/
    /*margin-bottom: 0.5rem !important;*/
    /*font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

.prediction-label {
    text-align: left !important;
    margin-bottom: 0.5rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}*/

/* Enhanced visual hierarchy for touch interface */
.modern-match-card {
    /*padding: 1rem !important;*/
    margin-bottom: 1rem !important;
}

@media (max-width: 768px) {
    .modern-match-card {
        padding: 0rem 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    .modern-match-card {
        padding: 0.1rem 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
}

/* Improve touch scrolling */
.match-list-container {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}


/* Aligned Player Rows with Winner Buttons */
.aligned-player-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 44px !important; /* Match button height */
    padding: 0.25rem 0 !important;
}

    .aligned-player-row .player-info-flex {
        flex: 1 !important;
        min-width: 0 !important; /* Allow shrinking */
    }

.winner-button-container {
    flex-shrink: 0 !important;
    width: 44px !important; /* Fixed width for consistency */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.aligned-winner-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

/* Sets section styling */
.sets-section-flex {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 80px !important;
    max-width: 100px !important;
    flex-shrink: 0 !important;
}

/* Responsive adjustments for aligned layout */
@media (max-width: 768px) {
    .aligned-player-row {
        min-height: 48px !important;
    }

    .winner-button-container {
        width: 48px !important;
    }

    .aligned-winner-btn {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        font-size: 0.9rem !important;
    }

    .sets-section-flex {
        min-width: 70px !important;
        max-width: 90px !important;
    }
}

@media (max-width: 480px) {
    .aligned-player-row {
        min-height: 50px !important;
    }

    .winner-button-container {
        width: 50px !important;
    }

    .aligned-winner-btn {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        font-size: 0.85rem !important;
    }

    .sets-section-flex {
        min-width: 65px !important;
        max-width: 80px !important;
    }
}

@media (max-width: 360px) {
    .aligned-winner-btn {
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        min-height: 45px !important;
        font-size: 0.8rem !important;
    }

    .winner-button-container {
        width: 45px !important;
    }

    .sets-section-flex {
        min-width: 60px !important;
        max-width: 75px !important;
    }
}

/* Touch device optimizations for aligned layout */
@media (hover: none) and (pointer: coarse) {
    .aligned-winner-btn {
        font-size: 1.1rem !important;
    }

        .aligned-winner-btn:active {
            background-color: var(--mud-palette-primary-darken) !important;
            transform: scale(0.95) !important;
        }
}

/* Ensure consistent spacing */
.aligned-player-row .player-details-flex {
    gap: 0.5rem !important;
}

@media (max-width: 480px) {
    .aligned-player-row .player-details-flex {
        gap: 0.25rem !important;
    }
}


.players-header {
    flex: 1 !important;
    min-width: 0 !important;
}

.winner-header {
    width: 44px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

.sets-header {
    width: 80px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

.result-header {
    width: 80px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

.tip-header {
    width: 80px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}


.tip-column-flex {
    display: flex !important;
    flex-direction: column !important;
    /*gap: 0.75rem !important;*/
    min-width: 80px !important;
    max-width: 80px !important;
    flex-shrink: 0 !important;
}

.tip-row-flex {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 2.5rem !important;
}

/* Responsive adjustments for headers */
@media (max-width: 768px) {
    .column-headers-flex {
        padding: 0.375rem 0.75rem 0.25rem 1rem !important;
    }

    .winner-header {
        width: 48px !important;
    }

    .sets-header,
    .result-header,
    .tip-header {
        width: 70px !important;
    }

    .tip-column-flex {
        min-width: 70px !important;
        max-width: 70px !important;
    }
}

@media (max-width: 480px) {
    .column-headers-flex {
        padding: 0.25rem 0.5rem 0.25rem 0.75rem !important;
    }

/*    .fi{
        width: 1em;
    }*/

    .winner-header {
        width: 50px !important;
    }

    .sets-header,
    .result-header,
    .tip-header {
        width: 65px !important;
    }

    .tip-column-flex {
        min-width: 65px !important;
        max-width: 65px !important;
    }
}

@media (max-width: 360px) {
    .winner-header {
        width: 45px !important;
    }

    .fi{
        width: 0.8em;
    }

    .sets-header,
    .result-header,
    .tip-header {
        width: 60px !important;
    }

    .tip-column-flex {
        min-width: 60px !important;
        max-width: 60px !important;
    }
}

/* Dark theme support for headers */
[data-bs-theme="dark"] .column-headers-flex {
    background-color: var(--mud-palette-dark) !important;
    border-bottom-color: var(--mud-palette-divider) !important;
}

/* Enhanced visual hierarchy */
.prediction-label {
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    color: var(--mud-palette-text-secondary) !important;
}

/* Add these alignment styles for result and tip rows */

/* Ensure Result and Tip rows have matching heights */
.aligned-result-row,
.aligned-tip-row {
    display: flex !important;
    align-items: center !important;
    min-height: 2.5rem !important;
    padding: 0.25rem 0 !important;
}

.aligned-result-row {
    justify-content: center !important;
}

.aligned-tip-row {
    justify-content: center !important;
}

/* Enhanced alignment for results and tips columns */

/* Results section structure fix */
.results-section-flex {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.5rem !important;

    flex-shrink: 0 !important;
    align-items: center !important; /* Changed from flex-start to stretch */
    min-height: 80px !important; /* Ensure full height */
}

/* Results column improvements */
.results-column-flex {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* Distribute space evenly */
    min-width: 80px !important;
    max-width: 120px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    /*gap: 0.5rem !important;*/ /* Match tip column gap */
}

/* Tip column improvements */
.tip-column-flex {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* Match results column */
    min-width: 80px !important;
    max-width: 80px !important;
    flex-shrink: 0 !important;
    /*gap: 0.5rem !important;*/ /* Match results column gap */
}

/* Ensure both row types have identical heights */
.aligned-result-row,
.aligned-tip-row {
    display: flex !important;
    align-items: center !important;
    min-height: 2.5rem !important; /* Exact same height */
    max-height: 2.5rem !important; /* Prevent expansion */
    padding: 0.25rem 0 !important;
    flex: 1 !important; /* Equal distribution of space */
}

.aligned-result-row {
    justify-content: flex-start !important;
}

.aligned-tip-row {
    justify-content: center !important;
}

/* Fix score display to maintain consistent height */
.scores-flex {
    display: flex !important;
    gap: 0.125rem !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    min-height: 1.5rem !important;
    max-height: 1.5rem !important; /* Prevent height variations */
    /*overflow: hidden !important;*/ /* Contain any overflow */
}

/* Ensure set scores don't break alignment */
.set-score-flex {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    min-width: 18px !important;
    max-width: 18px !important; /* Prevent expansion */
    /*height: 1.5rem !important;*/ /* Fixed height */
}

/* Score text standardization */
.score-text {
    font-weight: 700 !important;
    color: var(--usopen-blue) !important;
    min-width: 18px !important;
    max-width: 18px !important;
    text-align: center !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    /*text-overflow: ellipsis !important;*/
}

/* Tiebreak positioning fix */
.tiebreak-text {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    font-size: 0.55rem !important;
    color: var(--mud-palette-text-secondary) !important;
    background: var(--mud-palette-surface) !important;
    border-radius: 50% !important;
    min-width: 10px !important;
    height: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    z-index: 1 !important;
}

/* MudChip alignment standardization */
.tip-row-flex .mud-chip {
    min-width: 32px !important;
    max-width: 60px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

.result-header,
.tip-header {
    width: 80px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    /*padding: 0 0.25rem !important;*/ /* Add some padding for better alignment */
}

/* Responsive adjustments with maintained proportions */
@media (max-width: 768px) {
    .aligned-result-row,
    .aligned-tip-row {
        min-height: 2.25rem !important;
        max-height: 2.25rem !important;
    }

    .results-column-flex {
        gap: 0.5rem !important;
        min-width: 70px !important;
        max-width: 100px !important;
    }

    .tip-column-flex {
        gap: 0.5rem !important;
        min-width: 70px !important;
        max-width: 70px !important;
    }

    .result-header,
    .tip-header {
        width: 70px !important;
    }

    .score-text {
        font-size: 0.8rem !important;
        min-width: 16px !important;
        max-width: 16px !important;
    }

    .set-score-flex {
        min-width: 16px !important;
        max-width: 16px !important;
        height: 1.25rem !important;
    }
}

@media (max-width: 480px) {
    .aligned-result-row,
    .aligned-tip-row {
        min-height: 2rem !important;
        max-height: 2rem !important;
    }

    .results-column-flex {
        min-width: 65px !important;
        max-width: 90px !important;
    }

    .tip-column-flex {
        min-width: 65px !important;
        max-width: 65px !important;
    }

    .result-header,
    .tip-header {
        width: 65px !important;
    }

    .score-text {
        font-size: 0.75rem !important;
        min-width: 14px !important;
        max-width: 14px !important;
    }

    .set-score-flex {
        min-width: 14px !important;
        max-width: 14px !important;
        height: 1rem !important;
    }

    .tiebreak-text {
        font-size: 0.6rem !important;
        min-width: 8px !important;
        height: 8px !important;
        top: -4px !important;
        right: -4px !important;
    }
}

@media (max-width: 360px) {
    .results-column-flex {
        
        min-width: 60px !important;
        max-width: 80px !important;
    }

    .tip-column-flex {
        min-width: 60px !important;
        max-width: 60px !important;
    }

    .result-header,
    .tip-header {
        width: 60px !important;
    }
}

/* Additional fixes for specific alignment issues */
.results-section-flex .results-column-flex,
.results-section-flex .tip-column-flex {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Force equal distribution of space */
.results-column-flex > .aligned-result-row,
.tip-column-flex > .aligned-tip-row {
    flex: 1 1 50% !important; /* Each row takes exactly 50% of available space */
    display: flex !important;
    align-items: center !important;
}



.mobile-sets-row {
    display: none !important;
    padding: 0.75rem 1rem 0.5rem 1.5rem !important;
    border-top: 1px solid var(--mud-palette-divider) !important;
    background-color: var(--mud-palette-background-grey) !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

.mobile-sets-header {
    text-align: center !important;
}

.mobile-sets-buttons {
    display: flex !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}

.mobile-sets-btn {
    min-width: 60px !important;
    min-height: 44px !important;
    flex: 0 0 auto !important;
}

/* Hide sets column on mobile screens */
.mobile-hide-sets {
    /*display: flex !important;*/
}

/* Show mobile sets row and hide sets column on screens 480px */
@media (max-width: 480px) {
    .mobile-hide-sets {
        display: none !important;
    }

    .mobile-sets-row {
        display: flex !important;
    }

    .mobile-sets-buttons {
        gap: 0.375rem !important;
    }

    .mobile-sets-btn {
        min-width: 55px !important;
        min-height: 48px !important;
        font-size: 0.8rem !important;
    }

    .mobile-sets-header {
        margin-bottom: 0rem !important;
    }   

    .mobile-sets-row {
        padding: 0.5rem 0.5rem 0.5rem 0.75rem !important;
        gap: 0.5rem !important;
    }
}

/* Extra small screens adjustments */
@media (max-width: 360px) {
    .mobile-sets-buttons {
        gap: 0.25rem !important;
    }

    .mobile-sets-btn {
        min-width: 50px !important;
        min-height: 46px !important;
        font-size: 0.75rem !important;
    }

    .mobile-sets-row {
        padding: 0.375rem 0.25rem 0.375rem 0.375rem !important;
        gap: 0.375rem !important;
    }
}

/* Ensure buttons are properly sized for touch */
@media (hover: none) and (pointer: coarse) and (max-width: 480px) {
    .mobile-sets-btn {
        min-height: 50px !important;
        font-size: 0.85rem !important;
    }

        .mobile-sets-btn:active {
            background-color: var(--mud-palette-secondary-darken) !important;
            transform: scale(0.95) !important;
        }
}

/* Dark theme support for mobile sets row */
[data-bs-theme="dark"] .mobile-sets-row {
    background-color: var(--mud-palette-dark) !important;
    border-top-color: var(--mud-palette-divider) !important;
}

/* Ensure three buttons fit properly on small screens */
@media (max-width: 480px) {
    .mobile-sets-buttons {
        max-width: 100% !important;
        justify-content: space-evenly !important;
    }

        /* For Best of 3 tournaments (2 buttons) */
        .mobile-sets-buttons:has(.mobile-sets-btn:nth-child(2):last-child) {
            gap: 1rem !important;
        }

        /* For Grand Slam tournaments (3 buttons) */
        .mobile-sets-buttons:has(.mobile-sets-btn:nth-child(3):last-child) .mobile-sets-btn {
            flex: 1 1 calc(33.333% - 0.375rem) !important;
            max-width: calc(33.333% - 0.375rem) !important;
        }
}

@media (max-width: 360px) {
    /* Adjust for very small screens */
    .mobile-sets-buttons:has(.mobile-sets-btn:nth-child(3):last-child) .mobile-sets-btn {
        flex: 1 1 calc(33.333% - 0.25rem) !important;
        max-width: calc(33.333% - 0.25rem) !important;
        min-width: 45px !important;
    }
}

/* Visual feedback for touch interactions */
.mobile-sets-btn {
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

    .mobile-sets-btn:active {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }

    /* Accessibility improvements */
    .mobile-sets-btn:focus {
        outline: 2px solid var(--mud-palette-secondary) !important;
        outline-offset: 2px !important;
    }

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .mobile-sets-btn {
        transition: none !important;
    }

        .mobile-sets-btn:active {
            transform: none !important;
        }
}


/*MUDTOGGLE FOR TIPS*/
/* Player Name Toggle Buttons for MudToggleGroup */

/* Update the players section to take full width when using player name buttons */
.players-section-flex {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

/* Player Name Toggle Group Styling */
.player-name-buttons {
    width: 100% !important;
    gap: 0.75rem !important;
}

.player-name-toggle {
    min-height: 60px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    padding: 0.5rem !important;
    width: 100% !important;
}

    .player-name-toggle:hover {
        border: 0 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    }

.player-toggle-content {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.player-toggle-info {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    min-width: 0 !important;
}

.player-toggle-name {
    font-weight: 600 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.player-country {
    flex-shrink: 0 !important;
}

/* Remove the separate winner selection section when using player name buttons */
.player-name-buttons ~ .winner-selection-flex {
    display: none !important;
}

/* Adjust column headers when using player name buttons */
.player-name-buttons ~ .sets-selection-flex {
    min-width: 80px !important;
    max-width: 100px !important;
}

/* Responsive adjustments for player name buttons */
@media (max-width: 768px) {
    .player-name-toggle {
        min-height: 55px !important;
        padding: 0.375rem !important;
    }

    .player-toggle-info {
        gap: 0.375rem !important;
    }

    .player-toggle-name {
        font-size: 0.75rem !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .player-name-toggle {
        min-height: 50px !important;
        padding: 0.25rem !important;
    }

    .player-toggle-info {
        gap: 0.25rem !important;
    }

    .player-toggle-name {
        font-size: 0.7rem !important;
        max-width: 100% !important;
    }

    /* Hide sets selection on mobile when using player name buttons */
    .player-name-buttons ~ .sets-selection-flex {
        display: none !important;
    }
}

@media (max-width: 360px) {
    .player-name-toggle {
        min-height: 45px !important;
        padding: 0.2rem !important;
    }

    .player-toggle-name {
        font-size: 0.65rem !important;
        max-width: 100% !important;
    }
}

/* Touch device optimizations for player name buttons */
@media (hover: none) and (pointer: coarse) {
    .player-name-toggle {
        min-height: 65px !important;
        padding: 0.75rem !important;
    }

        .player-name-toggle:active {
            transform: scale(0.98) !important;
        }
}

/* Dark theme support for player name buttons */
[data-bs-theme="dark"] .player-name-toggle {
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1) !important;
}

    [data-bs-theme="dark"] .player-name-toggle:hover {
        box-shadow: 0 4px 8px rgba(255, 255, 255, 0.15) !important;
    }

/* Accessibility improvements */
.player-name-toggle:focus {
    outline: 2px solid var(--mud-palette-primary) !important;
    outline-offset: 2px !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .player-name-toggle {
        transition: none !important;
    }

        .player-name-toggle:hover {
            transform: none !important;
        }

        .player-name-toggle:active {
            transform: none !important;
        }
}

/* Ensure proper alignment within toggle items */
.player-name-buttons .mud-toggle-item .mud-button-root {
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Fix for MudBlazor toggle item content */
.player-name-buttons .mud-toggle-item .mud-button-label {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
}

/* Update column headers layout */
.column-headers-flex {
    display: flex !important;
    padding: 0.5rem 0.8rem 0.25rem 1.5rem;
    border-bottom: 1px solid var(--mud-palette-divider);
    background-color: var(--mud-palette-background-grey);
    font-weight: 600 !important;
}

.players-header {
    flex: 1 !important;
    min-width: 0 !important;
}

/* Remove winner header when using player name buttons */
.player-name-buttons ~ * .winner-header {
    display: none !important;
}

/* Update mobile sets row for player name buttons layout */
@media (max-width: 480px) {
    .mobile-sets-row {
        display: flex !important;
        padding: 0.75rem 1rem 0.5rem 1.5rem !important;
        border-top: 1px solid var(--mud-palette-divider) !important;
        background-color: var(--mud-palette-background-grey) !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
}


.live-matches-container {
    width: 100%;
    margin-bottom: 2rem;
}

.live-matches-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.section-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
}

.live-count {
    background: #f44336;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    animation: pulse-live 2s infinite;
    white-space: nowrap;
}

.no-matches-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    min-height: 200px;
}

/* Skeleton Loading Styles */
.skeleton-container {
    width: 100%;
    overflow: hidden;
}

.matches-skeleton-flex {
    display: flex;
    gap: 1.5rem;
    padding: 1rem 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .matches-skeleton-flex::-webkit-scrollbar {
        display: none;
    }

.skeleton-card-wrapper {
    flex: 0 0 auto;
    min-width: 350px;
    max-width: 400px;
}

.skeleton-match-card {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.skeleton-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.skeleton-columns {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.skeleton-players {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skeleton-player {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.skeleton-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Horizontal Scroll Container */
.horizontal-scroll-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
}

    .scroll-arrow:hover {
        background: #f5f5f5 !important;
        transform: translateY(-50%) scale(1.1);
    }

.scroll-arrow-left {
    left: -0.5rem;
}

.scroll-arrow-right {
    right: -0.5rem;
}

.scrollable-content {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    padding: 0 2rem;
}

    .scrollable-content::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

.matches-flex {
    display: flex;
    gap: 1.5rem;
    min-width: fit-content;
    padding: 1rem 0;
}

.match-card-wrapper {
    flex: 0 0 auto;
    min-width: 350px;
    max-width: 400px;
}

/* Live animations */
@keyframes pulse-live {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .match-card-wrapper {
        min-width: 300px;
        max-width: 320px;
    }

    .scrollable-content {
        padding: 0 1rem;
    }
}

@media (max-width: 480px) {
    .match-card-wrapper {
        min-width: 280px;
        max-width: 300px;
    }

    .scrollable-content {
        padding: 0 0.5rem;
    }
}

/* Surface indicator styling */
.surface-indicator {
    min-width: 80px;
}



.surface-overlay {
    transition: background 0.3s ease;
}


/*H2H*/
/* Container */
.h2h-container {
    max-width: 100%;
}

/* Main Summary Card */
.h2h-summary-card {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 1rem;
    background: ghostwhite;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ============== DESKTOP LAYOUT (768px) ============== */
.h2h-desktop {
    align-items: center;
    justify-content: space-between;
    min-height: 80px;
}

.player-section {
    flex: 1;
    display: flex;
    justify-content: center;
}

.player-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.player-image-h2h {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e9ecef;
}

.player-image-h2h-placeholder {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content:center;
    border-radius: 50%;
    border: 2px solid #e9ecef;
}

.player-name {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    white-space: nowrap;
}

.h2h-record-section {
    flex: 0 0 auto;
    text-align: center;
    padding: 0 2rem;
    border-left: 2px solid #e9ecef;
    border-right: 2px solid #e9ecef;
    min-width: 120px;
}

.h2h-record {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.h2h-summary {
    font-size: 0.9rem;
    color: #6c757d;
    white-space: nowrap;
}

/* ============== MOBILE LAYOUT (<768px) ============== */
.h2h-mobile {
    text-align: center;
}

.players-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*margin-bottom: 1rem;*/
    padding: 0 0.5rem;
}

.mobile-player-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0; /* Allow text truncation */
}

.mobile-player-image-h2h {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e9ecef;
    margin-bottom: 0.25rem;
}

.mobile-player-image-h2h-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e9ecef;
    margin-bottom: 0.25rem;
}

.mobile-flag {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.mobile-player-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #2c3e50;
    text-align: center;
    word-break: break-word;
    line-height: 1.2;
}

.mobile-vs {
    font-size: 0.9rem;
    font-weight: 700;
    color: #6c757d;
    padding: 0 0.5rem;
    flex: 0 0 auto;
}

.mobile-record-row {
    border-top: 1px solid #e9ecef;
    padding-top: 0.75rem;
}

.mobile-h2h-record {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.mobile-h2h-summary {
    font-size: 0.8rem;
    color: #6c757d;
    line-height: 1.3;
}

/* ============== RECENT MATCHES SECTION ============== */
.recent-matches-card {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.recent-matches-header {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e9ecef;
}

    .recent-matches-header h6 {
        margin: 0;
        color: #2c3e50;
        font-weight: 600;
    }

/* Desktop Recent Matches */
.h2h-match-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f8f9fa;
}

    .h2h-match-item:last-child {
        border-bottom: none;
    }

.tournament {
    flex: 1;
    font-size: 0.9rem;
    color: #495057;
}

.result {
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0 0.5rem;
}

.date {
    font-size: 0.8rem;
    color: #6c757d;
    min-width: 60px;
    text-align: right;
}

/* Mobile Recent Matches */
.mobile-match-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f8f9fa;
}

    .mobile-match-item:last-child {
        border-bottom: none;
    }

.mobile-match-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: left;
}

.mobile-tournament {
    font-size: 0.8rem;
    color: #495057;
    font-weight: 500;
}

.mobile-date {
    font-size: 0.7rem;
    color: #6c757d;
    margin-top: 0.1rem;
}

.mobile-result {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.8rem;
    min-width: 30px;
    text-align: center;
}

/* ============== RESULT STYLING ============== */
.h2h-win {
    background-color: #d4edda;
    color: #155724;
}

.h2h-loss {
    background-color: #f8d7da;
    color: #721c24;
}

.h2h-unknown {
    background-color: #e2e3e5;
    color: #6c757d;
}

/* ============== EXTRA SMALL SCREENS (360px) ============== */
@media (max-width: 359px) {
    .h2h-summary-card {
        padding: 0.75rem;
        border-radius: 8px;
    }

    .players-row {
        /*margin-bottom: 0.75rem;*/
        padding: 0 0.25rem;
    }

    .mobile-player-image-h2h {
        width: 28px;
        height: 28px;
    }

    .mobile-player-image-h2h {
        width: 28px;
        height: 28px;
    }

    .mobile-player-name {
        font-size: 0.75rem;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-vs {
        font-size: 0.8rem;
        padding: 0 0.25rem;
    }

    .mobile-h2h-record {
        font-size: 1.25rem;
    }

    .mobile-h2h-summary {
        font-size: 0.75rem;
        padding: 0 0.5rem;
    }

    .recent-matches-card {
        padding: 0.75rem;
    }

    .mobile-tournament {
        font-size: 0.75rem;
    }

    .mobile-date {
        font-size: 0.65rem;
    }

    .mobile-result {
        font-size: 0.75rem;
        padding: 0.2rem 0.4rem;
        min-width: 25px;
    }
}

/* ============== VERY SMALL SCREENS (<320px) ============== */
@media (max-width: 319px) {
    .h2h-summary-card {
        padding: 0.5rem;
    }

    .players-row {
        gap: 0.125rem;
    }

    .mobile-player-info {
        max-width: calc(50% - 30px); /* Even less space */
    }

    .mobile-player-image-h2h {
        width: 24px;
        height: 24px;
    }

    .mobile-player-image-h2h-placeholder {
        width: 24px;
        height: 24px;
    }

    .mobile-player-name {
        font-size: 0.7rem;
        line-height: 1.1;
        max-height: 1.8em; /* Slightly reduce height */
    }

    .mobile-vs {
        min-width: 60px;
        max-width: 60px;
    }

    .mobile-flag {
        font-size: 0.65rem;
    }

    .recent-matches-card {
        padding: 0.5rem;
    }

    .mobile-tournament {
        font-size: 0.65rem;
    }

    /* Very compact table for tiny screens */
    .recent-matches-mobile th:first-child {
        width: 40px !important;
    }
}

/* ============== CRITICAL FIXES FOR <345px ============== */
@media (max-width: 345px) {
    .h2h-container {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .h2h-summary-card {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .players-row {
        min-width: 0 !important;
        overflow: hidden !important;
        flex-wrap: nowrap !important; /* Prevent wrapping */
    }

    .mobile-player-info {
        min-width: 0 !important;
        overflow: hidden !important;
        max-width: calc(40% - 15px) !important; /* More aggressive space reduction */
    }

    .mobile-player-name {
        /*font-size: 0.68rem !important;*/
        max-height: 1.6em !important;
        line-height: 1.1 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .mobile-vs {
        flex-shrink: 0 !important;
    }

    .mobile-tournament {
        font-size: 0.65rem;
    }

    .donut-inner-text {
        font-size: 3.5rem !important;
    }

    /* Ensure table doesn't overflow */
    .recent-matches-mobile .mud-table {
        font-size: 0.6rem !important;
    }

    .recent-matches-mobile th,
    .recent-matches-mobile td {
        padding: 0.25rem !important;
    }
}


/* (keeping all existing styles and adding new ones for auto-rejoin) */
/* US Open Color Scheme - Hero Section */
.search-join-hero {
    background: linear-gradient(135deg, var(--usopen-blue) 0%, var(--usopen-light-blue) 100%);
    left: 0px !important;
    right: 0px !important;
    min-height: 46vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    position: relative;
    overflow: hidden;
}

    .search-join-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
        opacity: 0.3;
    }

.hero-join-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    width: 100%;
}

.hero-join-icon {
    font-size: 5rem !important;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hero-join-title {
    font-size: 4rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@media (max-width: 480px) {
    .hero-join-title {
        font-size: 2rem;
        font-weight: 700;
        color: white;
        margin-bottom: 0.5rem;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .hero-join-icon {
        font-size: 4rem;
        color: var(--usopen-yellow);
        margin-bottom: 1rem;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
}

.hero-join-subtitle {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 3rem;
    font-weight: 300;
}

.btn-join-hero {
    background: var(--usopen-yellow);
    color: var(--usopen-blue);
    border: none;
    padding: 1.25rem 2.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 212, 1, 0.3);
}

    .btn-join-hero:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(255, 212, 1, 0.4);
        color: var(--usopen-blue);
        background: var(--usopen-light-yellow);
    }

.join-form-container {
    margin-top: 2rem;
}

.join-code-wrapper {
    position: relative;
    max-width: 700px;
    margin: 0 auto 2rem;
    display: flex;
    align-items: center;
    background: white;
    border-radius: 25px;
    padding: 10px;
    box-shadow: 0 10px 40px rgba(2, 40, 141, 0.2);
    gap: 10px;
    border: 3px solid var(--usopen-yellow);
}

.search-icon {
    margin-left: 20px;
    color: var(--usopen-blue);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.join-input {
    flex: 1;
    border: none;
    padding: 1.25rem 1rem;
    font-size: 1.3rem;
    font-weight: 600;
    background: transparent;
    border-radius: 25px;
    outline: none;
    color: var(--usopen-blue);
    text-align: center;
}

    .join-input::placeholder {
        color: #999;
        font-weight: 400;
    }

.join-btn {
    background: var(--usopen-blue);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

    .join-btn:hover:not(:disabled) {
        background: var(--usopen-light-blue);
        transform: translateY(-1px);
        box-shadow: 0 4px 15px rgba(2, 40, 141, 0.3);
    }

    .join-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* Auto Rejoin Button Styling */
.auto-rejoin-btn {
    background: linear-gradient(135deg, var(--usopen-orange) 0%, #ff9500 100%);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

    .auto-rejoin-btn:hover:not(:disabled) {
        background: linear-gradient(135deg, #e67e00 0%, #e68500 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 15px rgba(255, 140, 0, 0.4);
    }

    .auto-rejoin-btn:disabled {
        opacity: 0.8;
        cursor: not-allowed;
    }

    .auto-rejoin-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s;
    }

    .auto-rejoin-btn:hover::before {
        left: 100%;
    }

.status-message {
    max-width: 600px;
    margin: 1rem auto;
    padding: 1.25rem 1.5rem;
    border-radius: 15px;
    text-align: center;
    font-weight: 500;
    font-size: 1.1rem;
}

    .status-message.error {
        background: rgba(220, 53, 69, 0.1);
        color: #dc3545;
        border: 2px solid rgba(220, 53, 69, 0.3);
    }

    .status-message.success {
        background: rgba(25, 135, 84, 0.1);
        color: #198754;
        border: 2px solid rgba(25, 135, 84, 0.3);
    }

.help-text {
    margin-top: 2rem;
    text-align: center;
}

    .help-text p {
        color: rgba(255, 255, 255, 0.8);
        font-size: 1rem;
        margin: 0;
    }

.game-preview-section {
    padding: 60px 0;
    background: #f8f9fa;
}

.preview-card {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    max-width: 1000px;
    margin: 0 auto;
    border-top: 4px solid var(--usopen-blue);
}

.preview-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f0f0f0;
}

    .preview-header h3 {
        color: var(--usopen-blue);
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

        .preview-header h3 i {
            color: var(--usopen-yellow);
        }

.game-details {
    padding-right: 2rem;
}

.game-name {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--usopen-blue);
    margin-bottom: 1rem;
}

.tournament-info {
    color: var(--usopen-blue);
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

    .tournament-info i {
        color: var(--usopen-yellow);
    }

.game-description {
    color: #666;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.game-stats-preview {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    font-size: 1rem;
}

    .stat-item i {
        color: var(--usopen-blue);
    }

.preview-actions {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.already-member-card,
.game-full-card,
.auto-rejoin-member-card,
.cannot-rejoin-card {
    text-align: center;
    padding: 1.5rem;
    border-radius: 15px;
    margin-bottom: 1rem;
}

.already-member-card {
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
    border: 2px solid rgba(25, 135, 84, 0.2);
}

.auto-rejoin-member-card {
    background: rgba(255, 140, 0, 0.1);
    color: #ff8c00;
    border: 2px solid rgba(255, 140, 0, 0.2);
    position: relative;
}

    .auto-rejoin-member-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, transparent 0%, rgba(255, 140, 0, 0.05) 50%, transparent 100%);
        border-radius: 13px;
    }

.auto-rejoin-message {
    font-style: italic;
    opacity: 0.9;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.cannot-rejoin-card,
.game-full-card {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border: 2px solid rgba(220, 53, 69, 0.2);
}

    .already-member-card h5,
    .game-full-card h5,
    .auto-rejoin-member-card h5,
    .cannot-rejoin-card h5 {
        margin: 0.5rem 0;
        font-weight: 600;
    }

    .already-member-card p,
    .game-full-card p,
    .auto-rejoin-member-card p,
    .cannot-rejoin-card p {
        margin: 0.5rem 0;
        opacity: 0.8;
    }

/* Nickname Section Styles */
.nickname-section {
    background: var(--usopen-blue);
    color: white !important;
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 2px solid var(--usopen-light-blue);
}

.nickname-title {
    color: var(--usopen-blue);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-align: center;
}

    .nickname-title i {
        color: var(--usopen-yellow);
    }

.nickname-subtitle {
    color: white;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    text-align: center;
}

.nickname-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    border-radius: 10px;
    border: 2px solid #e9ecef;
    padding: 5px;
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
}

    .nickname-input-wrapper:focus-within {
        border-color: var(--usopen-blue);
        box-shadow: 0 0 0 0.2rem rgba(2, 40, 141, 0.25);
    }

.nickname-icon {
    margin-left: 15px;
    color: var(--usopen-blue);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.nickname-input {
    flex: 1;
    border: none;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    background: transparent;
    border-radius: 10px;
    outline: none;
    color: var(--usopen-blue);
}

    .nickname-input::placeholder {
        color: #999;
        font-weight: 400;
    }

.nickname-error {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    text-align: center;
}

.nickname-help {
    text-align: center;
    color: #666;
    font-size: 0.85rem;
}

.join-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .faq-hero {
        padding: 2rem 1rem !important;
    }
}

.faq-content {
    padding: 60px 0;
    background-color: #f8f9fa;
    min-height: calc(100vh - 300px);
}

.category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e2e8f0;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .mobile-game-item {
        flex: 0 0 calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
    }

    .mobile-games-container {
        gap: 0.5rem;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .mobile-games-container {
        scroll-behavior: smooth;
    }

    .prediction-game-card:hover {
        transform: none;
    }

    .mobile-action-overlay {
        opacity: 0.6;
    }
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .mobile-public-game-item {
        flex: 0 0 calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
    }

    .mobile-public-games-container {
        gap: 0.5rem;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .mobile-public-games-container {
        scroll-behavior: smooth;
    }

    .game-card:hover {
        transform: none;
    }

    .mobile-public-action-overlay {
        opacity: 0.6;
    }
}

/* Existing styles... */
/*.tournament-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.tournament-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

.tournament-card-hover {
    background: rgba(0, 0, 0, 0.8);
    transition: opacity 0.3s ease;
    backdrop-filter: blur(1px);
}

.tournament-card:hover .tournament-card-hover {
    opacity: 1 !important;
}

.tournament-card:hover .tournament-card-content {
    opacity: 0;
}

.tournament-card-content {
    transition: opacity 0.3s ease;
}

.tournament-card-hover .btn-usopen {
    transform: scale(1);
    transition: transform 0.2s ease;
}

    .tournament-card-hover .btn-usopen:hover {
        transform: scale(1.05);
    }*/

/* Mobile Horizontal Scroll Styles */
.mobile-tournaments-swipe {
    touch-action: pan-x;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}

.mobile-tournaments-container {
    display: flex;
    transition: transform 0.3s ease;
    touch-action: pan-x;
    gap: 1rem;
    min-height: 320px; /* Ensure consistent height */
}

.mobile-tournament-item {
    flex: 0 0 calc(100vw - 2rem);
    max-width: calc(100vw - 2rem);
    min-width: 280px;
}

/* Swipe Indicator Dots */
.swipe-indicators {
    gap: 0.5rem;
}

.swipe-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .swipe-dot.active {
        background-color: var(--usopen-blue);
        transform: scale(1.2);
    }

    .swipe-dot:hover {
        background-color: var(--usopen-yellow);
    }

/* iOS and Touch Device Fixes */
@media (hover: none) and (pointer: coarse) {
    /* This targets touch devices specifically */
    .tournament-card:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

        .tournament-card:hover .tournament-card-hover {
            opacity: 0 !important;
        }

        .tournament-card:hover .tournament-card-content {
            opacity: 1 !important;
        }
}

/* Disable hover effects on mobile screens */
@media (max-width: 767.98px) {
    .tournament-card:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

        .tournament-card:hover .tournament-card-hover {
            opacity: 0 !important;
        }

        .tournament-card:hover .tournament-card-content {
            opacity: 1 !important;
        }

    /* Disable all hover transitions on mobile */
    .tournament-card-hover {
        display: none !important;
    }
}

/* Specific iOS Safari fixes */
@supports (-webkit-touch-callout: none) {
    /* iOS-specific styling */
    .mobile-tournaments-container .tournament-card:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

        .mobile-tournaments-container .tournament-card:hover .tournament-card-hover {
            opacity: 0 !important;
        }

    .mobile-tournaments-container .tournament-card-hover {
        display: none !important;
    }
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .mobile-tournament-item {
        flex: 0 0 calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
    }

    .mobile-tournaments-container {
        gap: 0.5rem;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .mobile-tournaments-container {
        scroll-behavior: smooth;
    }

    .tournament-card:hover {
        transform: none;
    }
}

/* iOS and Touch Device Fixes */
@media (hover: none) and (pointer: coarse) {
    /* This targets touch devices specifically */
    .prediction-game-card:hover {
        transform: none !important;
        box-shadow: 0 20px 40px rgba(2, 40, 141, 0.2) !important;
    }

        .prediction-game-card:hover .prediction-game-card-hover {
            opacity: 0 !important;
        }

        .prediction-game-card:hover .card-content {
            opacity: 1 !important;
        }
}

/* Disable hover effects on mobile screens */
@media (max-width: 767.98px) {
    .prediction-game-card:hover {
        transform: none !important;
        box-shadow: 0 20px 40px rgba(2, 40, 141, 0.2) !important;
    }

        .prediction-game-card:hover .prediction-game-card-hover {
            opacity: 0 !important;
        }

        .prediction-game-card:hover .card-content {
            opacity: 1 !important;
        }

    /* Disable all hover transitions on mobile */
    .prediction-game-card-hover {
        display: none !important;
    }
}

/* Specific iOS Safari fixes */
@supports (-webkit-touch-callout: none) {
    /* iOS-specific styling */
    .mobile-games-container .prediction-game-card:hover {
        transform: none !important;
        box-shadow: 0 20px 40px rgba(2, 40, 141, 0.2) !important;
    }

        .mobile-games-container .prediction-game-card:hover .prediction-game-card-hover {
            opacity: 0 !important;
        }

    .mobile-games-container .prediction-game-card-hover {
        display: none !important;
    }
}

/* iOS and Touch Device Fixes */
@media (hover: none) and (pointer: coarse) {
    /* This targets touch devices specifically */
    .game-card:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

        .game-card:hover .game-card-hover {
            opacity: 0 !important;
        }

        .game-card:hover .game-card-content {
            opacity: 1 !important;
        }
}

/* Disable hover effects on mobile screens */
@media (max-width: 767.98px) {
    .game-card:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

        .game-card:hover .game-card-hover {
            opacity: 0 !important;
        }

        .game-card:hover .game-card-content {
            opacity: 1 !important;
        }

    /* Disable all hover transitions on mobile */
    .game-card-hover {
        display: none !important;
    }
}

/* Specific iOS Safari fixes */
@supports (-webkit-touch-callout: none) {
    /* iOS-specific styling */
    .mobile-public-games-container .game-card:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

        .mobile-public-games-container .game-card:hover .game-card-hover {
            opacity: 0 !important;
        }

    .mobile-public-games-container .game-card-hover {
        display: none !important;
    }
}

/* Responsive adjustments */
@media (max-width: 576px) {

        .carousel-game-item .prediction-game-card {
            /*max-width: 300px;*/
            min-height: 260px;
        }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .prediction-game-card:hover {
        transform: none;
        box-shadow: 0 10px 25px rgba(2, 40, 141, 0.2) !important;
    }

    .prediction-game-card-hover {
        display: none;
    }

    .mobile-action-overlay {
        opacity: 0.6;
    }
}

.mud-swipearea {
    touch-action: pan-y !important;
}



/* Custom WTA Pink Background Class */
.bg-wta-pink {
    background-color: #ff69b4 !important;
    color: white !important;
}

/* Ensure WTA badges have proper styling */
.association-badge.bg-wta-pink {
    background-color: #ff69b4 !important;
    color: white !important;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 6px rgba(255, 105, 180, 0.3);
}


@media (min-width: 992px) {
    .tab-content-wrapper {
        padding-bottom: 0; /* Remove extra padding on desktop */
    }
}

.scroll-to-top-nofooter {
    bottom: 90px !important;
}

@media (min-width: 992px) {
    .scroll-to-top-nofooter {
        bottom: 20px !important;
    }
}


/*COOKIE*/
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
    .cookie-consent-overlay {
        padding: 10px;
    }

    .cookie-consent-modal {
        max-height: 95vh;
    }

    .cookie-buttons {
        flex-direction: column;
    }

        .cookie-buttons .mud-button {
            width: 100%;
        }
}



/*
    ================ Tipp Abgabe Old Style Mobile Friendly ==============
*/

/* Mobile-Friendly Match List Styles */

/* Main Container */
.matches-container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Mobile Match Card */
.mobile-match-card {
    background: white;
    border-radius: 12px;
    border-left: 4px solid var(--usopen-blue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

    .mobile-match-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

/* Status Border Indicators */
.mobile-status-border {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    z-index: 1;
}

    .mobile-status-border.blue-border {
        background: var(--usopen-blue);
    }

    .mobile-status-border.correct-winner-border {
        background: rgba(var(--bs-success-rgb), 0.5);
    }

    .mobile-status-border.correct-set-score-border {
        background: var(--bs-success);
    }

    .mobile-status-border.correct-game-score-border {
        background: var(--usopen-yellow);
    }

    .mobile-status-border.no-score-border {
        background: var(--bs-danger);
    }

/* Match Header */
.mobile-match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--mud-palette-background-grey);
    border-bottom: 1px solid var(--mud-palette-divider);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.match-time-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--usopen-blue);
}

.match-time {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Players Section */
.mobile-players-section {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mobile-player-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-radius: 8px;
    transition: all 0.2s ease;
    min-height: 50px;
}

    .mobile-player-row.winner-row {
        background: rgba(var(--bs-success-rgb), 0.05);
        border: 1px solid rgba(var(--bs-success-rgb), 0.2);
    }

/* Player Info */
.mobile-player-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.player-details {
    flex: 1;
    min-width: 0;
}

.player-name-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.player-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary);
}

.player-seed {
    background: var(--mud-palette-background-grey);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Prediction Section */
.mobile-prediction-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.winner-selection {
    display: flex;
    align-items: center;
}

/* Score Display */
.score-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

    .score-display:hover {
        background: var(--mud-palette-action-hover);
    }

.serve-indicator {
    width: 20px;
    display: flex;
    justify-content: center;
}

.serve-icon {
    transform: rotate(45deg);
    font-size: 0.875rem !important;
}

.match-scores {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.set-score, .game-score {
    font-weight: 700;
    color: var(--usopen-blue);
    min-width: 20px;
    text-align: center;
    font-size: 0.875rem;
}

.tiebreak-score {
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
    margin-left: 1px;
}

.prediction-score {
    min-width: 20px;
    text-align: center;
    padding: 0.125rem 0.25rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.75rem;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-primary);
}

/* Sets Prediction Section */
.mobile-sets-section {
    padding: 0.75rem 1rem;
    background: var(--mud-palette-action-hover);
    border-top: 1px solid var(--mud-palette-divider);
}

.sets-header {
    text-align: center;
    margin-bottom: 0.75rem;
}

.sets-label {
    font-weight: 600 !important;
    color: var(--mud-palette-text-secondary) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sets-buttons {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sets-btn {
    min-width: 60px !important;
    min-height: 40px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    touch-action: manipulation;
}

    .sets-btn:active {
        transform: scale(0.98);
    }

/* Match Footer */
.mobile-match-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    gap: 0.5rem;
    min-height: 60px;
}

.footer-left, .footer-right {
    flex: 0 0 auto;
}

.footer-center {
    flex: 1;
    text-align: center;
    min-width: 0;
}

.prediction-summary {
    font-weight: 500 !important;
    color: var(--mud-palette-text-secondary) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 0.8rem !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .matches-container {
        padding: 0 0.5rem;
    }

    .mobile-match-card {
        margin-bottom: 0.75rem;
        border-radius: 8px;
    }

    .mobile-match-header {
        padding: 0.5rem 0.75rem;
        gap: 0.375rem;
    }

    .mobile-players-section {
        padding: 0.75rem;
        gap: 0.5rem;
    }

    .mobile-player-row {
        padding: 0.375rem 0;
        min-height: 45px;
    }

    .player-name {
        font-size: 0.85rem;
    }

    .mobile-match-footer {
        padding: 0.5rem 0.75rem;
        min-height: 50px;
    }

    .sets-buttons {
        gap: 0.375rem;
    }

    .sets-btn {
        min-width: 55px !important;
        min-height: 36px !important;
        font-size: 0.8rem !important;
    }
}

@media (max-width: 480px) {
    .matches-container {
        padding: 0 0.25rem;
    }

    .mobile-match-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .match-time-info {
        justify-content: center;
    }

    .mobile-player-row {
        min-height: 40px;
        padding: 0.25rem 0;
    }

    .mobile-player-info {
        gap: 0.5rem;
    }

    .player-name {
        font-size: 0.8rem;
    }

    .player-seed {
        font-size: 0.7rem;
        padding: 0.0625rem 0.25rem;
    }

    .score-display {
        gap: 0.25rem;
    }

    .set-score, .game-score {
        font-size: 0.8rem;
        min-width: 18px;
    }

    .prediction-score {
        font-size: 0.7rem;
        min-width: 18px;
    }

    .mobile-match-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        text-align: center;
        min-height: auto;
    }

    .footer-left, .footer-center, .footer-right {
        flex: none;
    }

    .sets-btn {
        min-width: 50px !important;
        min-height: 32px !important;
        font-size: 0.75rem !important;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .mobile-match-card:hover {
        transform: none;
    }

    .mobile-player-row {
        min-height: 50px;
    }

    .sets-btn {
        min-height: 44px !important; /* Apple's recommended minimum */
    }

    .score-display:hover {
        background: transparent;
    }
}

/* Dark Theme Support */
[data-bs-theme="dark"] .mobile-match-card {
    background: var(--mud-palette-surface);
    border-color: var(--mud-palette-divider);
}

[data-bs-theme="dark"] .mobile-match-header {
    background: var(--mud-palette-dark);
}

[data-bs-theme="dark"] .mobile-sets-section {
    background: var(--mud-palette-dark);
}

[data-bs-theme="dark"] .mobile-match-footer {
    background: var(--mud-palette-dark);
}

/* Loading and Empty States */
.matches-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 1rem;
}

.matches-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    gap: 0.5rem;
}



@media (max-width: 360px) {
    .tile-text {
        font-size: .74rem !important;
    }
}

@media (max-width: 340px) {
    .tile-text {
        font-size: .66rem !important;
    }
}




/*MODERN MATCH CARD COMPACT*/
/* Compact Match Card Styles */
.modern-match-card-compact {
    position: relative;
    background: white;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    padding: 8px 12px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

    .modern-match-card-compact:hover {
        box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    }

.match-status-border-compact {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 8px 0 0 8px;
}

/* Header Compact */
.match-header-flex-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*margin-bottom: 6px;*/
    padding-bottom: 4px;
    border-bottom: 1px solid #f0f0f0;
}

.match-time-info-compact {
    display: flex;
    align-items: center;
    gap: 4px;
}

.compact-text {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
}

.compact-chip {
    height: 18px !important;
    font-size: 0.65rem !important;
    padding: 0 6px !important;
}

/* Main Content Compact */
.match-content-compact {
    margin-bottom: 6px;
}

.players-prediction-compact,
.players-results-compact {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.player-row-compact,
.result-player-row-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
    min-height: 36px;
}

    .player-row-compact:hover {
        background-color: #f8f9fa;
    }

    .player-row-compact.selected-player {
        background-color: var(--mud-palette-primary-lighten);
        border: 1px solid var(--mud-palette-primary);
    }

.result-player-row-compact {
    cursor: default;
}

.player-info-compact {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.player-country-compact {
    font-size: 14px;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .player-info-compact {
        gap: 3px !important;
    }
    .result-player-row-compact .player-info-compact {
        gap: 3px !important;
    }
}

@media (max-width: 350px){
    .player-info-compact {
        gap: 1px !important;
    }
    .result-player-row-compact .player-info-compact {
        gap: 1px !important;
    }
}

.player-name-compact {
    font-size: 0.8rem !important;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.seed-compact {
    font-size: 0.7rem;
    color: #666;
    margin-left: 2px;
}

.match-divider-compact {
    height: 1px;
    background: linear-gradient(to right, transparent, #e0e0e0, transparent);
    margin: 2px 0;
}

/* Prediction Compact */
.prediction-compact {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.sets-compact-group {
    display: flex;
    gap: 3px;
}

.set-btn-compact {
    min-width: 36px !important;
    height: 28px !important;
    padding: 0 6px !important;
    font-size: 0.7rem !important;
}

/* Scores Compact */
.scores-compact {
    display: flex;
    /*gap: 6px;*/
    align-items: center;
    flex-shrink: 0;
}

.score-chip-compact,
.tip-chip-compact, .chip-compact {
    min-width: 28px !important;
    height: 24px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

.score-chip-compact {
    background-color: #f5f5f5 !important;
}

.tip-chip-compact {
    background-color: #e8e8e8 !important;
}

.winner-icon-compact {
    margin-left: 4px;
    flex-shrink: 0;
}

/* Footer Compact */
.match-footer-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 4px;
    border-top: 1px solid #f0f0f0;
}

.deadline-compact {
    display: flex;
    align-items: center;
    gap: 4px;
}

.status-chip-compact {
    height: 18px !important;
    font-size: 0.65rem !important;
    padding: 0 6px !important;
    text-transform: uppercase;
}

/* Saving Overlay Compact */
.saving-overlay-compact {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    z-index: 10;
}

/* PlayerImage compact size support */
.player-image-compact {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modern-match-card-compact {
        padding: 6px 10px;
        margin-bottom: 6px;
    }

    .player-name-compact {
        font-size: 0.75rem !important;
    }

    .compact-text {
        font-size: 0.65rem !important;
    }

    .set-btn-compact {
        min-width: 32px !important;
        height: 26px !important;
        font-size: 0.65rem !important;
    }
}

/* Border color classes for compact */
.modern-match-card-compact.border-success {
    border-left: 3px solid #4caf50;
}

    .modern-match-card-compact.border-success.border-opacity-25 {
        border-left: 3px solid rgba(76, 175, 80, 0.25);
    }

.modern-match-card-compact.border-warning {
    border-left: 3px solid #ff9800;
}

.modern-match-card-compact.border-danger {
    border-left: 3px solid #f44336;
}

.modern-match-card-compact.border-cc-primary {
    border-left: 3px solid var(--mud-palette-primary);
}

/* H2H Button Compact */
.h2h-btn-compact {
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 6px !important;
    font-size: 0.65rem !important;
    text-transform: none !important;
    font-weight: 500;
}

    .h2h-btn-compact .mud-icon-root {
        font-size: 0.9rem !important;
    }

/* H2H Section Compact */
.h2h-section-compact {
    margin: 8px 0;
    padding: 8px;
    background-color: #f8f9fa;
    border-radius: 6px;
}


/* Responsive adjustments for compact view */
@media (max-width: 576px) {
    .h2h-btn-compact {
        height: 22px !important;
        min-height: 22px !important;
        padding: 0 4px !important;
        font-size: 0.6rem !important;
    }

        .h2h-btn-compact .mud-icon-root {
            font-size: 0.8rem !important;
        }

        .h2h-btn-compact .me-1 {
            margin-right: 2px !important;
        }

    .set-btn-compact-item {
        min-width: 28px !important;
        max-width: 28px !important;
        height: 22px !important;
        font-size: 0.6rem !important;
    }

    .sets-toggle-compact .mud-toggle-item,
    .sets-toggle-compact .mud-button-root {
        min-width: 28px !important;
        height: 22px !important;
        font-size: 0.6rem !important;
    }
}

/* H2H Desktop Player Section - Vertical Layout */
.h2h-desktop .player-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.h2h-desktop .player-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.h2h-desktop .player-ranking-desktop {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 24px;
}

    /* Ensure proper alignment */
    .h2h-desktop .player-ranking-desktop .mud-chip {
        margin: 0;
    }

    .h2h-desktop .player-ranking-desktop .text-muted {
        font-size: 0.75rem;
        color: #6c757d;
    }


/* Compact score display with serve icon */
.scores-compact {
    display: flex;
    /*gap: 6px;*/
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
}

    .scores-compact:hover {
        opacity: 0.8;
    }

.serve-icon {
    font-size: 0.75rem !important;
    margin-right: 2px;
}

.set-score-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 24px;
}

.score-text {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.tiebreak-text {
    font-size: 0.6rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    color: #666;
}

/* Compact Column Headers - Aligned with content */
.column-headers-flex-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    /*background-color: #f8f9fa;*/
    border-bottom: 1px solid #e0e0e0;
}

.players-header-compact {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.result-header-compact,
.tip-header-compact {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px; /* Match the width of scores-compact chips */
    flex-shrink: 0;
}

/* Ensure the content rows match the header layout */
.result-player-row-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
}

    .result-player-row-compact .player-info-compact {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0; /* Allow text truncation */
    }

    .result-player-row-compact .scores-compact {
        display: flex;
        /*gap: 6px;*/
        align-items: center;
        flex-shrink: 0;
    }

/* Ensure score chips have consistent width */
.score-chip-compact,
.tip-chip-compact {
    min-width: 28px !important;
    max-width: 28px !important;
    height: 24px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.score-chip-compact {
    background-color: #f5f5f5 !important;
}

.tip-chip-compact {
    background-color: #e8e8e8 !important;
}

/* Prediction label styling for compact headers */
.column-headers-flex-compact .prediction-label {
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    color: #757575;
    letter-spacing: 0.5px;
    margin-bottom: 0 !important;
}

/* Adjust for when score details are shown */
.scores-compact:has(.set-score-flex) {
    width: auto;
    gap: 6px;
}

.scores-compact .set-score-flex {
    min-width: 24px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .column-headers-flex-compact {
        padding: 4px 8px;
    }

    .result-player-row-compact {
        padding: 6px 8px;
    }

    .result-header-compact,
    .tip-header-compact {
        width: 60px;
    }

    .score-chip-compact,
    .tip-chip-compact {
        min-width: 24px !important;
        max-width: 24px !important;
        height: 20px !important;
        font-size: 0.7rem !important;
    }
}

.mud-tab-badge.mud-badge-root {
    position: static;
    margin-left: 8px;
}

    .mud-tab-badge.mud-badge-root .mud-badge-wrapper {
        position: static;
        width: auto;
        pointer-events: auto;
    }

    .mud-tab-badge.mud-badge-root .mud-badge {
        position: static;
        display: inline-flex;
    }

    /*HIDE GOOGLE CAPTCHA BADGE*/
.grecaptcha-badge {
    visibility: hidden !important;
}


/* Mobile slider scroll fix */
/*.mud-slider-container,
.mud-slider-container * {
    touch-action: pan-y !important;
}*/

/* Better mobile experience for sliders */
/*@media (hover: none) and (pointer: coarse) {
    .mud-slider-container {
        margin: 24px 0;
    }

    .mud-slider-thumb {
        width: 28px !important;
        height: 28px !important;
    }
}*/


/* Pricing Section */
.pricing-section {
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.pricing-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--usopen-light-blue), transparent);
}

/* Pricing Cards */
.pricing-card {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    height: 100%;
    transition: all 0.4s ease;
    border: 2px solid #e9ecef;
}

    .pricing-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    }

/* Free Plan Styling */
.free-plan {
    border-color: var(--usopen-blue);
}

    .free-plan:hover {
        border-color: var(--usopen-light-blue);
    }

/* Premium Plan Styling */
.premium-plan {
    border: 2px solid var(--usopen-yellow);
    position: relative;
    overflow: hidden;
}

    .premium-plan:hover {
        border-color: #F8BBD0;
    }

/* Plan Badge */
.plan-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    
}


@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* Plan Header */
.plan-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-top: 1rem;
}

.plan-name {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1rem;
}

.plan-price {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 1rem;
}

.price-currency {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--usopen-blue);
    margin-top: 0.5rem;
}

.price-amount {
    font-size: 4rem;
    font-weight: 700;
    color: var(--usopen-blue);
    line-height: 1;
}

.price-period {
    font-size: 1rem;
    color: #666;
    margin-top: 2rem;
    margin-left: 0.25rem;
}

.plan-description {
    color: #666;
    font-size: 1rem;
    line-height: 1.6;
}

/* Features List */
.plan-features {
    margin-bottom: 2rem;
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .features-list li {
        display: flex;
        align-items: flex-start;
        padding: 0.75rem 0;
        border-bottom: 1px solid #f0f0f0;
    }

        .features-list li:last-child {
            border-bottom: none;
        }

        .features-list li i {
            font-size: 1.2rem;
            margin-right: 0.75rem;
            flex-shrink: 0;
            margin-top: 0.1rem;
        }

        .features-list li .bi-check-circle-fill {
            color: var(--usopen-blue);
        }

        .features-list li .bi-x-circle-fill {
            color: #dee2e6;
        }

        .features-list li span {
            color: #333;
            font-size: 0.95rem;
            line-height: 1.5;
        }

.feature-disabled span {
    color: #999;
    text-decoration: line-through;
}

/* Premium Features Enhancement */
.premium-plan .features-list li .bi-check-circle-fill {
    color: var(--usopen-yellow);
}

/* Plan CTA */
.plan-cta {
    margin-top: auto;
}

.plan-note {
    text-align: center;
    margin-top: 1rem;
    color: #666;
    font-size: 0.9rem;
}

    .plan-note i {
        color: var(--usopen-yellow);
        margin-right: 0.25rem;
    }

/* Guarantee Badge */
.guarantee-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--usopen-yellow);
}

    .guarantee-badge i {
        font-size: 2rem;
        color: var(--usopen-yellow);
    }

    .guarantee-badge span {
        font-weight: 600;
        color: #333;
        font-size: 1rem;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .pricing-card {
        padding: 2rem 1.5rem;
    }

    .plan-name {
        font-size: 1.5rem;
    }

    .price-amount {
        font-size: 3rem;
    }

    .plan-badge {
        position: static;
        display: inline-block;
        margin-bottom: 1rem;
    }

    .features-list li span {
        font-size: 0.9rem;
    }
}

/* Hover Effects for Buttons in Pricing */
.pricing-card .mud-button-root {
    transition: all 0.3s ease;
}

    .pricing-card .mud-button-root:hover {
        transform: scale(1.02);
    }

.premium-plan .mud-button-root:hover {
    box-shadow: 0 8px 25px rgba(255, 212, 1, 0.4);
}


/* Touch Device Optimizations for upcoming tournaments*/
.tournament-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

    .tournament-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    }

.tournament-card-hover {
    background: rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s ease;
    /*backdrop-filter: blur(5px);*/
}

.tournament-card:hover .tournament-card-hover {
    opacity: 1 !important;
}

.tournament-card:hover .tournament-card-content {
    opacity: 0;
}

.tournament-card-content {
    transition: opacity 0.3s ease;
}

.tournament-card-hover .btn-usopen {
    transform: scale(1);
    transition: transform 0.2s ease;
}

    .tournament-card-hover .btn-usopen:hover {
        transform: scale(1.05);
    }

/* Countdown Container */
.countdown-container {
    padding: 2rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 12px;
}

/* Mobile-specific styles */
.mobile-countdown-overlay {
    background: rgba(0, 0, 0, 0.35);
    z-index: 10;
}

.mobile-action-area {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7), transparent);
    backdrop-filter: blur(5px);
    z-index: 5;
}

/* Mobile: Disable hover effects on mobile cards */
.tournament-card-mobile:hover {
    transform: none;
}

/* Adjust countdown for mobile - smaller text */
@media (max-width: 767px) {
    .countdown-container {
        padding: 1.5rem;
    }

        .countdown-container .mud-typography-h6 {
            font-size: 1.25rem;
        }
}

/* Mobile Carousel Wrapper */
.mobile-carousel-wrapper {
    margin-bottom: 1rem;
}

.mud-swipe-area {
    touch-action: pan-y !important;
}

/* MudCarousel Styling */
.mobile-tournaments-carousel {
    background: transparent !important;
    border-radius: 12px;
    overflow: hidden;
}

/* Carousel Item Styling */
.carousel-tournament-item {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .carousel-tournament-item .tournament-card {
        width: 100%;
        margin: 0 auto;
    }

.section-subtitle {
    font-size: 1.2rem;
    color: #666;
    max-width: 75%;
    margin: 0 auto;
}