/* ============================================================
   MatchSchedule — Interactive board
   YnetSportONE — ליגת העל
   Design: Figma "לוח משחקים לליגה" (Gameboard + header)
   ============================================================ */

@font-face {
    font-family: 'MosesText';
    src: url('../assets/fonts/MosesText_Inter-VF.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

:root {
    --primary-blue:  #2261D0;
    --accent-cyan:   #3EA6FF;
    --accent-navy:   #242CCB;
    --primary-red:   #DF1C3C;
    --text-dark:     #000000;
    --text-navy:     #00182F;
    --text-light:    #666666;
    --bg-page:       #EEF2FB;
    --bg-month:      #EDF1F5;
    --border-gray:   #EFEFEF;
    --border-soft:   #E4E8F0;
    --shadow-card:   0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-active: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-match:  0 2px 4.5px rgba(0, 0, 0, 0.25);
    --match-center-gap: 24px;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    font-family: 'MosesText', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--bg-page);
    color: var(--text-dark);
    direction: rtl;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
}

.match-schedule-page {
    max-width: 1240px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════
   YNET SITE HEADER (iframe — same pattern as ynet-creative-studio2)
   ═══════════════════════════════════════════════════════════ */

.ynet-site-header {
    overflow: hidden;
    width: 100%;
    background: #fff;
}

.ynet-site-header iframe {
    width: 100%;
    border: 0;
    display: block;
    overflow: hidden;
}

html.hide-ynet-site-header .ynet-site-header {
    display: none;
}

/* ═══════════════════════════════════════════════════════════
   HEADER BANNER (Figma 300X104 desktop — 1240×60)
   ═══════════════════════════════════════════════════════════ */

.page-header {
    position: relative;
    user-select: none;
    background: #fff;
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0;
    overflow: hidden;
}

.header-banner {
    position: relative;
    display: flex;
    direction: ltr;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 60px;
    background: #fff;
    overflow: hidden;
    z-index: 1;
}

.header-banner__top {
    display: contents;
}

.header-banner__art {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}

.header-banner__desktop-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.header-banner__pattern,
.header-banner__bg,
.header-banner__icon,
.header-banner__brand {
    display: none;
}

.header-banner__ball {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 72px;
    height: 52px;
    object-fit: contain;
    object-position: left center;
    z-index: 2;
}

.header-banner__league {
    background: #3EA6FF;
    color: #fff;
    font-size: clamp(22px, 3.2vw, 40px);
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.15;
    padding: 8px 80px 10px;
    transform: skewX(-16deg);
    border-radius: 10px;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
}

.header-banner__league > span,
.header-banner__year > span {
    display: inline-block;
    transform: skewX(16deg);
}

.header-banner__years {
    display: flex;
    align-items: stretch;
    margin-top: -4px;
    position: relative;
    z-index: 1;
    direction: ltr;
    transform: skewX(-16deg);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

.header-banner__years::after {
    content: '';
    position: absolute;
    right: -10px;
    bottom: -4px;
    width: 30px;
    height: 16px;
    background: #DE1A1A;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    z-index: -1;
    transform: skewX(8deg);
}

.header-banner__year {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 44px;
    color: #fff;
    font-size: clamp(18px, 2.6vw, 34px);
    font-weight: 600;
    line-height: 1;
    padding: 0 18px;
}

.header-banner__year--light {
    background: #3EA6FF;
}

.header-banner__year--dark {
    background: #242CCB;
}

.header-banner__title {
    position: relative;
    z-index: 2;
    margin: 0 20px 0 12px;
    padding: 0;
    font-size: 42.7px;
    font-weight: 700;
    color: #000;
    line-height: 1;
    white-space: nowrap;
    direction: rtl;
}

.schedule-view {
    display: block;
}

/* ═══════════════════════════════════════════════════════════
   DATE FILTERS
   ═══════════════════════════════════════════════════════════ */

#date-filters {
    background-color: #fff;
    box-shadow: var(--shadow-card);
    margin: 0 0 0;
    overflow: hidden;
}

.date-filters__title {
    background-color: var(--primary-blue);
    color: #fff;
    text-align: center;
    font-family: 'MosesText', sans-serif;
    font-size: 16px;
    font-weight: 700;
    padding: 5px 16px;
    line-height: 16px;
}

.date-filters__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    /* Physical left → right so arrow sides match scroll direction */
    direction: ltr;
}

.date-filters__arrow {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 150px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.date-filters__arrow img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.date-filters__arrow:hover {
    background: var(--bg-page);
}

#date-filters .filter-content {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
    min-width: 0;
    direction: rtl;
}

#date-filters .filter-content::-webkit-scrollbar {
    display: none;
}

.date-month-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.date-month-label {
    background-color: var(--bg-month);
    color: var(--primary-blue);
    text-align: center;
    font-family: 'MosesText', sans-serif;
    font-size: 16px;
    font-weight: 500;
    padding: 5px 10px;
    border-bottom: 1px solid var(--border-gray);
    line-height: 16px;
}

.date-month-cells {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 0 5px;
}

.date-month-cells .filter-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 45px;
    min-width: 45px;
    padding: 5px 10px;
    border: 2px solid transparent;
    border-radius: 8px;
    background-color: #fff;
    color: var(--text-dark);
    cursor: pointer;
    box-shadow: var(--shadow-card);
    transition: border-color 0.15s, box-shadow 0.15s, border-radius 0.15s;
    text-align: center;
    font-weight: 500;
}

.date-month-cells .filter-link:hover:not(.active) {
    background-color: var(--bg-page);
}

.filter-link__day {
    display: block;
    font-family: 'MosesText', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 16px;
}

.filter-link__dow {
    display: block;
    font-family: 'MosesText', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
}

.date-month-cells .filter-link.active {
    background-color: #fff;
    color: var(--text-dark);
    border-color: var(--primary-blue);
    border-radius: 8px;
    box-shadow: var(--shadow-active);
    font-weight: 700;
}

.date-month-cells .filter-link.active .filter-link__day,
.date-month-cells .filter-link.active .filter-link__dow {
    font-weight: 700;
}

.date-month-cells .filter-link.related {
    background-color: rgba(34, 97, 208, 0.08);
}

/* ═══════════════════════════════════════════════════════════
   MAIN SCHEDULE LAYOUT
   ═══════════════════════════════════════════════════════════ */

#main-schedule {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(90px, 137px) minmax(0, 1fr) minmax(140px, 200px);
    gap: clamp(12px, 2vw, 30px);
    padding: clamp(12px, 2vw, 25px) clamp(8px, 1.5vw, 21px);
}

/* Mobile chrome — hidden on desktop */
.mobile-view-tabs,
.mobile-pickers {
    display: none;
}

.filter-panel {
    background-color: #fff;
    padding: 10px 0;
    border-radius: 0;
    box-shadow: var(--shadow-card);
    position: relative;
}

.filter-panel__title--dark {
    background-color: var(--primary-blue);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    margin: 0 5px 10px;
    padding: 5px 15px;
    border-radius: 0;
    line-height: 16px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#group-filters,
#team-filters {
    height: 100%;
    max-height: calc(100vh - 280px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#group-filters .filter-content,
#team-filters .filter-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    direction: ltr;
    --filter-scroll-gutter: 6px;
    padding: 0 5px 8px calc(5px + var(--filter-scroll-gutter));
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 24, 47, 0.28) transparent;
}

#group-filters .filter-content::-webkit-scrollbar,
#team-filters .filter-content::-webkit-scrollbar {
    width: 6px;
}

#group-filters .filter-content::-webkit-scrollbar-thumb,
#team-filters .filter-content::-webkit-scrollbar-thumb {
    background: rgba(0, 24, 47, 0.28);
    border-radius: 6px;
}

#group-filters .filter-content::-webkit-scrollbar-track,
#team-filters .filter-content::-webkit-scrollbar-track {
    background: transparent;
}

#group-filters .filter-content > *,
#team-filters .filter-content > * {
    direction: rtl;
}

#group-filters .filter-link,
#team-filters .filter-link {
    border-radius: 8px;
}

#group-filters::after,
#team-filters::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 67px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 59%, rgba(228, 232, 240, 0.5) 100%);
    pointer-events: none;
}

.filter-link {
    padding: 12px 15px;
    border: 2px solid transparent;
    background-color: #fff;
    color: var(--text-navy);
    cursor: pointer;
    font-family: 'MosesText', sans-serif;
    font-size: 16px;
    font-weight: 400;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    text-align: center;
    box-shadow: 0 1px 2.6px rgba(228, 232, 240, 0.93);
    border-radius: 0;
    line-height: 16px;
}

.filter-link.active {
    background-color: #fff;
    color: var(--text-dark);
    font-weight: 700;
    border-color: var(--primary-blue);
    border-radius: 8px;
    box-shadow: var(--shadow-active);
}

.filter-link.related {
    background-color: rgba(34, 97, 208, 0.08);
    font-weight: 500;
}

.filter-link:hover:not(.active) {
    background-color: var(--bg-page);
}

.filter-link--team {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start; /* RTL: pack to the right */
    gap: 10px;
    text-align: right;
    padding: 5px 10px 5px 5px;
    min-height: 40px;
}

.filter-link--team .filter-link__logo {
    width: 25px;
    height: 25px;
    object-fit: contain;
    flex-shrink: 0;
}

.filter-link--team .filter-link__name {
    flex: 0 1 auto;
    font-weight: 400;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 30px;
}

.filter-link--team.active,
.filter-link--team:hover {
    background-color: #fff;
    border: 2px solid var(--primary-blue);
    border-radius: 8px;
    box-shadow: var(--shadow-active);
    z-index: 1;
}

.filter-link--team.active .filter-link__name,
.filter-link--team:hover .filter-link__name {
    color: var(--text-dark);
    font-weight: 700;
}

.filter-link--team.related {
    background-color: rgba(34, 97, 208, 0.08);
}

#calendar-container {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 320px);
    border-radius: 0;
    direction: ltr;
    /* Keep gutter reserved so hover doesn't shift content */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

#calendar-container::-webkit-scrollbar {
    width: 6px;
}

#calendar-container::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 6px;
}

#calendar-container::-webkit-scrollbar-track {
    background: transparent;
}

#calendar-container:hover {
    scrollbar-color: rgba(0, 24, 47, 0.28) transparent;
}

#calendar-container:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 24, 47, 0.28);
}

#calendar-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
    direction: rtl;
    padding: 0 14px 32px;
}

.day-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 0;
}

.day-group__header {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-blue);
    line-height: 1.2;
    text-align: center;
    direction: rtl;
    padding: 0;
}

.calendar-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-light);
    background: #fff;
    border-radius: 8px;
    box-shadow: var(--shadow-card);
}

.calendar-empty--error {
    color: #b00020;
}

/* ═══════════════════════════════════════════════════════════
   MATCH CARD (Figma Matches Section)
   ═══════════════════════════════════════════════════════════ */

.match-card {
    overflow: hidden;
    margin: 0;
    box-shadow: var(--shadow-match);
    cursor: default;
    background: #fff;
}

.match-card--clickable {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}

.match-card__article-link {
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.match-card__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    padding: 5px 70px;
    background-color: var(--primary-blue);
    min-height: 26px;
    align-items: center;
    /* Match Figma LTR columns: channel | date | venue+round */
    direction: ltr;
}

.match-card__header-col {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #fff;
    font-weight: 400;
    padding: 0;
    line-height: 16px;
    min-height: 16px;
}

.match-card__header-col--channel {
    justify-content: flex-start;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-card__header-col--center {
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    direction: rtl;
    white-space: nowrap;
    text-align: center;
}

.match-card__header--no-date {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.match-card__header--no-date .match-card__header-col--center {
    display: none;
}

.match-card__header-col--meta {
    justify-content: flex-end;
}

.match-card__venue {
    white-space: nowrap;
}

.match-card__round--sep {
    border-left: 1px solid #fff;
    margin-left: 6px;
    padding-left: 10px;
}

.match-card__date--sep {
    border-left: 1px solid #fff;
    margin-left: 6px;
    padding-left: 10px;
}

.match-card--clickable {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}

.match-card__article-link {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    direction: ltr;
}

.match-card__article-link-text {
    text-decoration: none;
}

.match-card__article-chevron {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    color: #fff;
}

.match-card__body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 15px 70px 10px;
    background: #fff;
    border: 1px solid var(--border-gray);
    border-top: none;
    align-items: center;
    direction: rtl;
}

.match-card__team {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 43px;
    min-width: 0;
    /* Figma: name at outer edge, logo toward center — LTR flex inside RTL grid */
    direction: ltr;
}

/* RTL grid: home col right, away col left — logos sit symmetrically around center */
.match-card__team--home {
    justify-content: flex-start;
    padding-left: var(--match-center-gap);
}

.match-card__team--away {
    justify-content: flex-end;
    padding-right: var(--match-center-gap);
}

.match-card__logo {
    height: 43px;
    width: 43px;
    object-fit: contain;
    flex-shrink: 0;
}

.match-card__logo-placeholder {
    height: 43px;
    width: 43px;
    display: inline-block;
    flex-shrink: 0;
    border-radius: 50%;
    background: #e8ecf4;
}

.match-card__team-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 26px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
}

.match-card__team--home .match-card__team-name {
    flex: 1 1 auto;
    min-width: var(--home-team-name-width, auto);
    text-align: left;
}

.match-card__team-name--measure {
    /* Must not use left:-9999px — in RTL that expands the page and creates
       a huge horizontal scrollbar with the board stuck on the right. */
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    visibility: hidden;
    pointer-events: none;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    z-index: -1;
}

.match-card__score-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    direction: rtl;
}

.match-card__score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-dark);
    text-align: center;
    direction: ltr;
}

.match-card__score-num {
    font-size: 22px;
    font-weight: 700;
    line-height: 24px;
}

.match-card__score-sep {
    font-size: 18px;
    font-weight: 700;
    line-height: 18px;
}

.match-card--finished .match-card__score-num,
.match-card--finished .match-card__score-sep {
    font-size: 28px;
    line-height: 28px;
}

.match-card__time {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-dark);
    text-align: center;
    line-height: 28px;
}

.match-card__time[data-kickoff] {
    color: var(--primary-red);
    font-size: 22px;
}

.match-card__time--soon {
    font-size: 14px;
    color: var(--primary-red);
    line-height: 1.25;
    font-weight: 500;
    white-space: normal;
    max-width: 7em;
}

.match-card__overnight {
    font-size: 12px;
    font-weight: 300;
    color: var(--primary-red);
    text-align: center;
}

.match-card__status-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 2px 0;
    /* Keep text→dot DOM order; dot visually right of label in RTL page. */
    direction: ltr;
}

.match-card__status-text {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-dark);
    text-align: center;
    line-height: 16px;
}

.match-card__status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.match-card__status-dot--green {
    background-color: #00B140;
}

.match-card__status-dot--red {
    background-color: var(--primary-red);
}

.match-card__status-dot--gray {
    background-color: #9CA3AF;
}

/* Compact tablet / 740 — Figma 300X104 desktop at 28px title */
@media (max-width: 900px) {
    .header-banner__title {
        font-size: 28px;
        line-height: 35px;
    }

    .match-card__header {
        padding: 5px 24px;
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE (tabs + pickers; ~390 design)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    html {
        height: 100%;
        overflow: hidden;
    }

    body {
        background: #fff;
        max-width: none;
        width: 100%;
        height: 100%;
        height: 100dvh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .ynet-site-header {
        flex-shrink: 0;
        width: 100%;
    }

    .match-schedule-page {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .page-header {
        flex-shrink: 0;
        margin-top: 0;
        padding-top: 0;
        margin-bottom: 0;
        background: #fff;
        overflow: hidden;
    }

    .schedule-view {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .header-banner {
        display: flex;
        flex-direction: row;
        direction: ltr;
        align-items: center;
        justify-content: flex-end;
        height: 90px;
        background: #fff;
        overflow: hidden;
    }

    .header-banner__top {
        display: contents;
    }

    .header-banner__art {
        position: absolute;
        inset: 0;
        height: 100%;
    }

    .header-banner__desktop-bg {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .header-banner__ball {
        display: block;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 88px;
        height: 72px;
        object-fit: contain;
        object-position: left center;
        z-index: 2;
    }

    .header-banner__pattern,
    .header-banner__bg,
    .header-banner__icon,
    .header-banner__brand {
        display: none;
    }

    .header-banner__title {
        width: 269px;
        max-width: calc(100% - 100px);
        box-sizing: border-box;
        margin: 0 10px 0 0;
        padding: 0;
        text-align: right;
        background: transparent;
        font-size: 26px;
        font-weight: 700;
        line-height: 34px;
        white-space: normal;
    }

    .desktop-only-filters {
        display: none !important;
    }

    .mobile-view-tabs {
        display: grid;
        flex-shrink: 0;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        padding: 8px 12px 4px;
        direction: rtl;
        background: #fff;
    }

    .mobile-view-tab {
        appearance: none;
        border: 1px solid var(--border-soft);
        background: #fff;
        color: var(--text-dark);
        font-family: 'MosesText', sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.2;
        padding: 10px 6px;
        border-radius: 8px;
        box-shadow: var(--shadow-card);
        cursor: pointer;
    }

    .mobile-view-tab.is-active {
        border: 2px solid var(--primary-blue);
        color: var(--text-navy);
        font-weight: 700;
        box-shadow: var(--shadow-active);
    }

    .mobile-pickers {
        display: block;
        flex-shrink: 0;
        padding: 8px 0 4px;
    }

    .mobile-pickers[hidden] {
        display: none !important;
    }

    .mobile-picker {
        padding: 8px 12px 12px;
        background: rgba(34, 97, 208, 0.04);
    }

    .mobile-picker[hidden] {
        display: none !important;
    }

    .mobile-picker__month {
        text-align: center;
        color: var(--primary-blue);
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .mobile-picker__row {
        display: flex;
        align-items: center;
        gap: 4px;
        direction: ltr;
    }

    .mobile-picker__arrow {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        border: none;
        background: transparent;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .mobile-picker__arrow img {
        width: 28px;
        height: 28px;
    }

    .mobile-picker__scroller {
        display: flex;
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        flex: 1;
        min-width: 0;
        padding: 2px 0 6px;
        direction: rtl;
    }

    .mobile-picker__scroller::-webkit-scrollbar {
        display: none;
    }

    .mobile-date-chip {
        flex: 0 0 auto;
        width: 64px;
        min-height: 64px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border: 2px solid transparent;
        border-radius: 8px;
        background: #fff;
        box-shadow: var(--shadow-card);
        cursor: pointer;
        font-family: 'MosesText', sans-serif;
        color: var(--text-dark);
        padding: 8px 4px;
    }

    .mobile-date-chip__day {
        font-size: 18px;
        font-weight: 700;
        line-height: 1;
    }

    .mobile-date-chip__dow {
        font-size: 13px;
        font-weight: 400;
        line-height: 1;
    }

    .mobile-date-chip.is-active {
        border-color: var(--primary-blue);
        box-shadow: var(--shadow-active);
    }

    .mobile-team-chip {
        flex: 0 0 auto;
        width: 88px;
        min-height: 92px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        border: 2px solid transparent;
        border-radius: 8px;
        background: #fff;
        box-shadow: var(--shadow-card);
        cursor: pointer;
        font-family: 'MosesText', sans-serif;
        color: var(--text-dark);
        padding: 10px 6px 8px;
    }

    .mobile-team-chip__logo {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

    .mobile-team-chip__logo-placeholder {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--border-soft);
        display: block;
    }

    .mobile-team-chip__name {
        font-size: 12px;
        font-weight: 400;
        text-align: center;
        line-height: 1.2;
        max-width: 100%;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .mobile-team-chip.is-active {
        border-color: var(--primary-blue);
        box-shadow: var(--shadow-active);
    }

    .mobile-team-chip.is-active .mobile-team-chip__name {
        font-weight: 700;
    }

    .mobile-team-chip.is-hidden {
        display: none;
    }

    .mobile-team-search {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #fff;
        border: 1px solid var(--border-soft);
        border-radius: 10px;
        padding: 10px 12px;
        margin-bottom: 12px;
        box-shadow: var(--shadow-card);
    }

    .mobile-team-search__icon {
        color: #8a94a6;
        display: inline-flex;
    }

    .mobile-team-search input {
        flex: 1;
        border: none;
        outline: none;
        font-family: 'MosesText', sans-serif;
        font-size: 15px;
        background: transparent;
        color: var(--text-dark);
        min-width: 0;
    }

    .mobile-picker__action {
        display: block;
        margin: 4px 0 0 auto;
        border: none;
        background: none;
        color: var(--primary-blue);
        font-family: 'MosesText', sans-serif;
        font-size: 14px;
        text-decoration: underline;
        cursor: pointer;
        padding: 4px 0;
    }

    #main-schedule {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        margin: 0;
        grid-template-columns: 1fr;
        gap: 0;
        padding: 8px 12px 12px;
        overflow: hidden;
    }

    #calendar-container {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        scrollbar-width: auto;
    }

    #calendar-container::-webkit-scrollbar {
        width: auto;
    }

    #calendar-list {
        padding: 0 0 24px;
        gap: 24px;
    }

    .day-group {
        gap: 8px;
    }

    .day-group__header {
        font-size: 20px;
        padding: 0;
        line-height: 1.2;
    }

    .match-card {
        border-radius: 8px;
        overflow: hidden;
    }

    .match-card__header {
        grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
        padding: 5px 12px;
        border-radius: 8px 8px 0 0;
    }

    .match-card__header--round {
        display: flex;
        direction: rtl;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 5px 10px;
        overflow: hidden;
    }

    .match-card__header--round > span {
        flex: 0 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        line-height: 16px;
        color: #fff;
    }

    .match-card__header--round .match-card__date,
    .match-card__header--round .match-card__round {
        flex-shrink: 0;
    }

    .match-card__header--round .match-card__place {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }

    .match-card__pipe {
        flex: 0 0 auto;
        width: 1px;
        height: 12px;
        background: #fff;
        opacity: 0.85;
    }

    .match-card__header-col--center {
        display: none;
    }

    .match-card__header-col--channel {
        max-width: 100%;
    }

    .match-card__header-col--meta {
        min-width: 0;
        overflow: hidden;
        gap: 0;
        justify-content: flex-end;
        width: 100%;
    }

    .match-card__venue {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .match-card__date--sep {
        flex: 0 0 auto;
        overflow: visible;
        text-overflow: clip;
    }

    .match-card__date {
        flex: 0 0 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        font-weight: 400;
        white-space: nowrap;
    }

    .match-card__round--sep {
        flex: 0 0 auto;
    }

    .match-card__body {
        padding: 10px 8px 8px;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        border-radius: 0 0 8px 8px;
        --match-center-gap: 8px;
        align-items: start;
    }

    .match-card__team {
        gap: 6px;
        height: 32px;
        min-width: 0;
    }

    .match-card__team--home {
        padding-left: var(--match-center-gap);
    }

    .match-card__team--away {
        padding-right: var(--match-center-gap);
    }

    /* Name hugs the logo (toward center); not the outer card edge */
    .match-card__team-name--home {
        flex: 0 1 auto;
        width: auto;
        max-width: var(--home-team-name-width, 100%);
        min-width: 0;
        text-align: left;
    }

    .match-card__team-name--away {
        flex: 0 1 auto;
        width: auto;
        max-width: var(--away-team-name-width, 100%);
        min-width: 0;
        text-align: right;
    }

    .match-card__score-area {
        padding: 0 4px;
        justify-content: flex-start;
        flex-direction: column;
    }

    .match-card__score,
    .match-card__time {
        min-height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .match-card__status-row {
        order: 1;
        padding-top: 0;
    }

    .match-card__logo,
    .match-card__logo-placeholder {
        width: 32px;
        height: 32px;
    }

    .match-card__team-name {
        font-size: 16px;
        font-weight: 700;
        line-height: 20px;
    }

    .match-card__score-num,
    .match-card--finished .match-card__score-num {
        font-size: 18px;
        line-height: 1.1;
    }

    .match-card__score-sep,
    .match-card--finished .match-card__score-sep {
        font-size: 18px;
        line-height: 1.1;
    }

    .match-card__time {
        font-size: 18px;
        line-height: 1.1;
    }

    .match-card__time--soon {
        font-size: 11px;
        line-height: 1.2;
        font-weight: 500;
        max-width: 4.8em;
    }
}