@keyframes timeshotMobileBannerScrollV2 {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - 6px)); }
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-width: 1100px) {
    #timeshot-app-wrapper .main-nav {
        position: sticky !important;
        top: 0 !important;
        z-index: 10000 !important;
        padding: 8px 8px 6px !important;
        background: rgba(8, 15, 30, 0.94) !important;
        backdrop-filter: blur(16px);
    }

    #timeshot-app-wrapper .nav-container {
        width: 100% !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
        box-sizing: border-box;
    }

    #timeshot-app-wrapper .nav-search-wrapper {
        order: 20 !important;
        flex: 1 0 100% !important;
        min-width: 0 !important;
    }

    #timeshot-app-wrapper .nav-search-input {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
    }

    #timeshot-app-wrapper .main-layout {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 20px 12px 40px !important;
        box-sizing: border-box !important;
    }

    #timeshot-app-wrapper #sidebar {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        padding: 8px 0 !important;
        box-sizing: border-box !important;
        order: 0 !important;
    }

    #timeshot-app-wrapper #sidebar .sidebar-nav {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
    }

    #timeshot-app-wrapper #sidebarRight {
        display: flex !important;
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        margin: 20px 0 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        order: 1 !important;
    }

    #timeshot-app-wrapper .main-content-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        order: 2 !important;
    }

    #timeshot-app-wrapper #sidebarRight .sidebar-right-banners {
        width: 100% !important;
        height: auto !important;
        flex: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    #timeshot-app-wrapper #sidebarRight .sidebar-right-scroll {
        display: flex !important;
        flex-direction: row !important;
        width: max-content !important;
        height: auto !important;
        gap: 12px !important;
        overflow: visible !important;
    }

    #timeshot-app-wrapper #sidebarRight .sidebar-right-scroll.scrolling {
        animation: timeshotMobileBannerScrollV2 40s linear infinite !important;
    }

    #timeshot-app-wrapper #sidebarRight .sidebar-right-banner {
        width: min(78vw, 320px) !important;
        flex: 0 0 min(78vw, 320px) !important;
    }

    #timeshot-app-wrapper #section-cuadrante,
    #timeshot-app-wrapper #cuadranteContainer,
    #timeshot-app-wrapper .cuescore-table-container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        overflow-x: visible !important;
    }

    #timeshot-app-wrapper .cuescore-table-container {
        padding: 8px !important;
    }

    #timeshot-app-wrapper table.cuescore-list,
    #timeshot-app-wrapper table.cuescore-list tbody {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 10px !important;
    }

    #timeshot-app-wrapper table.cuescore-list tr.round-separator,
    #timeshot-app-wrapper table.cuescore-list tr.round-header {
        display: flex !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        box-sizing: border-box !important;
    }

    #timeshot-app-wrapper table.cuescore-list tr.round-separator td,
    #timeshot-app-wrapper table.cuescore-list tr.round-header th {
        display: block !important;
        width: auto !important;
        padding: 8px !important;
    }

    #timeshot-app-wrapper table.cuescore-list tr.round-header th:last-child {
        display: none !important;
    }

    #timeshot-app-wrapper table.cuescore-list tr.match-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 48px !important;
        grid-template-areas:
            'number number'
            'table table'
            'playerA scoreA'
            'playerB scoreB' !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px !important;
        gap: 8px 4px !important;
        border: 1px solid rgba(255,255,255,0.14) !important;
        border-radius: 10px !important;
        background: rgba(15,31,61,0.82) !important;
        box-sizing: border-box !important;
    }

    #timeshot-app-wrapper table.cuescore-list tr.match-row > td {
        display: flex !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 4px !important;
        border: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    #timeshot-app-wrapper tr.match-row > .match-no {
        grid-area: number !important;
        justify-content: flex-start !important;
    }

    #timeshot-app-wrapper tr.match-row > .player-a {
        grid-area: playerA !important;
        justify-content: flex-start !important;
    }

    #timeshot-app-wrapper tr.match-row > .score:nth-of-type(3) {
        grid-area: scoreA !important;
    }

    #timeshot-app-wrapper tr.match-row > .separator {
        display: none !important;
    }

    #timeshot-app-wrapper tr.match-row > .score:nth-of-type(5) {
        grid-area: scoreB !important;
    }

    #timeshot-app-wrapper tr.match-row > .player-b {
        grid-area: playerB !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    #timeshot-app-wrapper tr.match-row > .match-mesa {
        grid-area: table !important;
        justify-content: flex-end !important;
        text-align: right !important;
    }

    #timeshot-app-wrapper .player-wrapper,
    #timeshot-app-wrapper .player-wrapper.right-align {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
    }

    #timeshot-app-wrapper .player-wrapper .name {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        font-size: 12px !important;
    }

    #timeshot-app-wrapper button,
    #timeshot-app-wrapper .score-btn,
    #timeshot-app-wrapper .action-btn,
    #timeshot-app-wrapper .match-options-btn,
    #timeshot-app-wrapper .view-comment-btn {
        min-height: 44px !important;
    }

    #streamingOverlayModal .streaming-overlay-link-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    }

    #streamingOverlayModal .streaming-overlay-link-row > strong,
    #streamingOverlayModal .streaming-overlay-link-row > input {
        grid-column: 1 / -1;
    }

    #streamingOverlayModal .streaming-overlay-link-row > button {
        width: 100% !important;
        white-space: normal !important;
    }
}