/* ==========================================================================
   Single match page — /match/<slug>/ (anwp-football-leagues/content-match.php,
   sections in template-parts/match/). Loaded only on singular anwp_match
   (inc/match.php). Figma wS7uze7Ep3azyudK6Bhhmg, three states × three widths:
     pre  48:43017 / 48:45056 / 48:47025
     live 48:43404 / 48:46314 / 48:48192
     done 48:44111 / 48:45420 / 48:47389
   Breakpoints ≥1200 desktop (frame 1440), 576–1199 tablet (834), ≤575 mobile
   (390). Each frame is followed as drawn, including the per-state differences
   in hero height and title spacing.
   ========================================================================== */

/* --- Page frame: break out of the parent's container --------------------- */

body.mtc-screen,
body.mtc-screen .site-wrapper,
body.mtc-screen .site-content {
    background-color: #070b09;
}

body.mtc-screen .site-content {
    padding: 0;
}

body.mtc-screen .site-content > .container {
    width: 100%;
    max-width: none;
    padding: 0;
}

body.mtc-screen .site-content > .container > .row {
    margin: 0;
}

body.mtc-screen .site-content .content-area {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0;
    margin: 0;
}

/* --- Tokens, font -------------------------------------------------------- */

.mtc-page {
    --mtc-page:      #070b09;
    --mtc-card:      #111613;
    --mtc-card-2:    #1a211b;
    --mtc-text:      #f7f8f8;
    --mtc-muted:     #a0aca4;
    --mtc-accent:    #8bcb23;
    --mtc-accent-2:  #76c933;
    --mtc-loss:      #dd1d39;
    --mtc-draw:      #626669;
    --mtc-away:      #76b9e3;
    --mtc-away-bar:  #a7b2bb;
    --mtc-track:     #253028;
    --mtc-rule:      #263028;
    --mtc-rule-q:    rgba(247, 248, 248, .05);
    --mtc-rule-row:  rgba(38, 48, 40, .65);
    --mtc-amber:     #e9c46a;
    --mtc-on-accent: #111a12;

    /* Vertical rhythm under the header, per frame (see the state blocks). */
    --mtc-hero-h:      759px;
    --mtc-crumb-y:     32px;
    --mtc-title-gap:   102px;
    --mtc-title-after: 24px;

    position: relative;
    direction: rtl;
    color: var(--mtc-text);
    background: var(--mtc-page);
    font-size: 14px;
    line-height: 20px;
    font-feature-settings: "ss02";
    text-align: right;
}

/* Dana everywhere (CLAUDE.md rule; the "Main content area" block in style.css
   cannot reach an AnWP single template). */
.mtc-page,
.mtc-page
    *:not(i):not(svg):not(use):not(.fa):not(.fas):not(.far):not(.fab):not(
        .fal
    ):not(.fad):not([class*="fa-"]):not([class^="icon-"]):not(
        [class*=" icon-"]
    ):not(.dashicons):not([class^="dashicons-"]):not(.genericon):not(
        .df-icon-custom
    ) {
    font-family: "dana", Tahoma, sans-serif !important;
}

.mtc-page *,
.mtc-page *::before,
.mtc-page *::after {
    box-sizing: border-box;
}

.mtc-page h1,
.mtc-page h2,
.mtc-page h3,
.mtc-page h4,
.mtc-page p,
.mtc-page ul,
.mtc-page ol,
.mtc-page dl,
.mtc-page dd {
    margin: 0;
    padding: 0;
    letter-spacing: 0;
    text-transform: none;
}

.mtc-page ul,
.mtc-page ol {
    list-style: none;
}

.mtc-page hr {
    margin: 0;
    border: 0;
    height: 1px;
}

.mtc-page a,
.mtc-page a:hover,
.mtc-page a:focus {
    color: inherit;
    text-decoration: none;
}

.mtc-page a:hover { color: var(--mtc-accent); }

.mtc-page a:focus-visible,
.mtc-page button:focus-visible {
    outline: 2px solid var(--mtc-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.mtc-page .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* --- Hero ---------------------------------------------------------------- */

.mtc-hero {
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--mtc-hero-h);
    overflow: hidden;
    pointer-events: none;
}

.mtc-hero picture { display: block; height: 100%; }

/* Desktop: full width, natural height from the top-left, clipped by the box. */
.mtc-hero__img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}

.mtc-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 11, 9, .2) 0%, rgba(7, 11, 9, 0) 65.156%, #070b09 100%);
}

/* --- Content column ------------------------------------------------------ */

.mtc-wrap {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    padding: calc(var(--sk-header-h, 76px) + var(--mtc-crumb-y)) 60px 60px;
}

.mtc-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    color: var(--mtc-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}

.mtc-crumbs a { color: var(--mtc-muted); }

.mtc-crumbs__current {
    color: #fff;
    font-weight: 700;
}

.mtc-page .mtc-title {
    margin-top: var(--mtc-title-gap);
    color: #f4f5f5;
    font-size: 60px;
    font-weight: 900;
    line-height: 72px;
    letter-spacing: -1.2px;
}

.mtc-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: var(--mtc-title-after);
}

/* --- Card shell ---------------------------------------------------------- */

.mtc-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    background: var(--mtc-card);
    border-radius: 16px;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, .03);
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .27));
}

.mtc-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mtc-page .mtc-head__title {
    color: var(--mtc-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
}

.mtc-head__sub {
    color: var(--mtc-muted);
    font-size: 12px;
    line-height: 20px;
}

.mtc-page .mtc-head--regular .mtc-head__title { font-weight: 400; }
.mtc-head--regular .mtc-head__sub { font-size: 14px; }

/* Inner boxes (absentee, pitch and bench cards). */
.mtc-box {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: rgba(247, 248, 248, .01);
    border: 1px solid rgba(247, 248, 248, .04);
    border-radius: 12px;
}

/* Crests. */
.mtc-crest {
    display: block;
    flex: none;
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.mtc-crest--mono {
    display: grid;
    place-items: center;
    color: var(--mtc-muted);
    background: var(--mtc-card-2);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.mtc-crest--36 { width: 36px; height: 36px; }
.mtc-crest--32 { width: 32px; height: 32px; }
.mtc-crest--20 { width: 20px; height: 20px; }
.mtc-crest--tab { width: 24px; height: 28px; }

/* Player photo circles (bench, live absentees). */
.mtc-avatar {
    display: block;
    flex: none;
    width: 40px;
    height: 40px;
    object-fit: cover;
    object-position: top;
    background: #14211a;
    border-radius: 50%;
}

.mtc-nophoto {
    display: grid;
    place-items: end center;
    overflow: hidden;
    color: #2c3a30;
    background: #14211a;
}

.mtc-nophoto svg { width: 80%; height: 80%; }

/* Team-name row over two-sided data (stats, live timeline). */
.mtc-sides {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

/* W/D/L chips. */
.mtc-chips {
    display: flex;
    gap: 4px;
}

.mtc-chip {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: #f5f5f5;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.mtc-chip--w { background: var(--mtc-accent-2); }
.mtc-chip--d { background: var(--mtc-draw); }
.mtc-chip--l { background: var(--mtc-loss); }

/* ==========================================================================
   1. Summary
   ========================================================================== */

.mtc-sum { gap: 16px; }
.mtc-page--live .mtc-sum,
.mtc-page--done .mtc-sum { gap: 20px; }

.mtc-sum__head { display: flex; flex-direction: column; gap: 4px; }

.mtc-page .mtc-sum__title {
    color: var(--mtc-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
}

.mtc-sum__date {
    color: var(--mtc-muted);
    font-size: 12px;
    line-height: 20px;
}

.mtc-sum__meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mtc-page--live .mtc-sum__meta,
.mtc-page--done .mtc-sum__meta { gap: 12px; }

.mtc-sum__comp {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--mtc-muted);
    font-size: 14px;
    line-height: 20px;
}

.mtc-sum__comp a { color: inherit; }

.mtc-badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    text-align: center;
    white-space: nowrap;
}

.mtc-badge--pre {
    width: 112px;
    padding: 10px;
    color: var(--mtc-accent);
    background: var(--mtc-card-2);
    font-size: 12px;
    line-height: 18px;
}

.mtc-badge--live,
.mtc-badge--done {
    min-width: 144px;
    height: 32px;
    padding: 0 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.mtc-badge--live { color: var(--mtc-accent); background: rgba(139, 203, 35, .1); }
.mtc-badge--done { color: var(--mtc-muted); background: rgba(160, 172, 164, .2); }

.mtc-sum__rule { background: var(--mtc-rule); }
.mtc-sum__rule--quiet { background: var(--mtc-rule-q); }

/* Teams row: home | centre | away (RTL: home on the right). */
.mtc-sum__teams {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 260px;
    align-items: center;
    gap: 24px;
}

.mtc-page--done .mtc-sum__teams { grid-template-columns: minmax(0, 1fr) 144px minmax(0, 1fr); }

.mtc-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    text-align: center;
}

.mtc-team__crest { display: block; }

.mtc-page .mtc-team__name {
    color: var(--mtc-text);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

.mtc-team__role {
    color: var(--mtc-muted);
    font-size: 14px;
    line-height: 20px;
}

.mtc-page--done .mtc-team .mtc-crest { width: 64px; height: 64px; }
.mtc-page--done .mtc-team__name { font-size: 18px; font-weight: 600; line-height: 30px; }
.mtc-page--done .mtc-team__role { font-size: 12px; }

/* Countdown block. */
.mtc-kick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.mtc-kick__label {
    color: var(--mtc-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.mtc-count {
    display: flex;
    gap: 8px;
}

.mtc-count__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 64px;
    padding: 4px;
    background: var(--mtc-card-2);
    border-radius: 10px;
}

.mtc-count__num {
    color: var(--mtc-text);
    font-size: 30px;
    font-weight: 700;
    line-height: 38px;
}

.mtc-count__cell--s .mtc-count__num { color: var(--mtc-accent); }

.mtc-count__unit {
    color: var(--mtc-muted);
    font-size: 10px;
    line-height: normal;
}

.mtc-kick__date {
    color: var(--mtc-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

/* Score box (live / done). */
.mtc-score {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 144px;
    height: 56px;
    background: rgba(247, 248, 248, .04);
    border-radius: 10px;
}

.mtc-score__n {
    width: 64px;
    color: var(--mtc-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    text-align: center;
}

.mtc-score__dash {
    width: 16px;
    color: var(--mtc-muted);
    text-align: center;
}

/* Scorers (live). */
.mtc-scorers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.mtc-scorers__side {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--mtc-accent);
}

.mtc-scorers__side--away { text-align: left; }

/* ==========================================================================
   2. بازیکنان غایب
   ========================================================================== */

.mtc-miss__teams {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 20px;
}

.mtc-miss__team {
    gap: 16px;
    padding: 20px;
    border-color: rgba(255, 255, 255, .02);
}

.mtc-miss__id {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--mtc-rule-q);
}

.mtc-page--live .mtc-miss__id { gap: 12px; }

.mtc-miss__id .mtc-crest { width: 36px; height: 40px; }

.mtc-page .mtc-miss__name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--mtc-text);
    font-size: 18px;
    font-weight: 600;
    line-height: 30px;
}

.mtc-miss__count {
    width: 44px;
    color: var(--mtc-muted);
    font-size: 12px;
    line-height: 20px;
    text-align: left;
}

.mtc-miss__group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mtc-miss__group--doubtful { gap: 8px; }

.mtc-page .mtc-miss__label {
    color: var(--mtc-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.mtc-page .mtc-miss__group--doubtful .mtc-miss__label { color: var(--mtc-amber); }

.mtc-miss__row + .mtc-miss__row { border-top: 1px solid var(--mtc-rule-q); }

/* Pre: name | reason, two equal columns. */
.mtc-page--pre .mtc-miss__row { padding: 12px 0; }

.mtc-page--pre .mtc-miss__text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 16px;
}

.mtc-miss__player {
    color: var(--mtc-text);
    font-size: 16px;
    line-height: 24px;
}

.mtc-page--pre .mtc-miss__reason {
    color: var(--mtc-muted);
    font-size: 14px;
    line-height: 20px;
}

/* Live: photo, name over reason. */
.mtc-page--live .mtc-miss__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.mtc-page--live .mtc-miss__text {
    display: flex;
    flex-direction: column;
}

.mtc-page--live .mtc-miss__reason {
    color: var(--mtc-muted);
    font-size: 12px;
    line-height: 18px;
}

.mtc-miss__note {
    margin-top: 8px;
    color: var(--mtc-muted);
    font-size: 12px;
    line-height: 20px;
}

/* ==========================================================================
   3. فرم دو تیم
   ========================================================================== */

.mtc-form__legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.mtc-form__team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.mtc-form__name {
    color: var(--mtc-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    text-align: center;
}

.mtc-form__team .mtc-chip { width: 26.33px; }

.mtc-form__rule { background: var(--mtc-rule); }

.mtc-form__rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mtc-form__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 162px minmax(0, 1fr);
    grid-template-areas: "home label away";
    align-items: center;
    min-height: 44px;
}

.mtc-form__label {
    grid-area: label;
    color: var(--mtc-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
}

.mtc-form__val {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mtc-form__val--home { grid-area: home; }
.mtc-form__val--away { grid-area: away; }

.mtc-form__num {
    flex: none;
    width: 32.4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

.mtc-form__val--home .mtc-form__num { color: var(--mtc-accent); text-align: right; }
.mtc-form__val--away .mtc-form__num { color: var(--mtc-away-bar); text-align: left; }

.mtc-form__track {
    display: flex;
    flex: 1 1 auto;
    height: 7px;
    overflow: hidden;
    background: var(--mtc-track);
    border-radius: 4px;
}

.mtc-form__fill {
    display: block;
    height: 7px;
    border-radius: 4px;
}

/* Bars grow outward from the label: home fill sits at its track's left end,
   away fill at its track's right end. */
.mtc-form__val--home .mtc-form__fill { margin-inline-start: auto; background: var(--mtc-accent); }
.mtc-form__val--away .mtc-form__fill { background: var(--mtc-away-bar); }

/* ==========================================================================
   4. آخرین بازی‌ها
   ========================================================================== */

.mtc-recent { gap: 16px; }

.mtc-tabs {
    display: flex;
    border-bottom: 1px solid var(--mtc-rule-row);
}

.mtc-page .mtc-tab {
    display: flex;
    flex: 0 0 176px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 55px;
    margin: 0 0 -1px;
    padding: 0 8px;
    color: var(--mtc-muted);
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    cursor: pointer;
}

.mtc-page .mtc-tab.is-active {
    color: var(--mtc-accent-2);
    font-weight: 600;
    border-bottom-color: var(--mtc-accent-2);
}

.mtc-page .mtc-tab:hover { color: var(--mtc-accent-2); background: none; }

/* No JS: every list shows under its own label, no tabs. */
.mtc-recent__nojs { display: none; }

@media (scripting: none) {
    .mtc-tabs { display: none; }
    .mtc-page .mtc-recent__nojs {
        display: block;
        margin-bottom: 8px;
        color: var(--mtc-accent-2);
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
    }
    .mtc-recent__panel + .mtc-recent__panel { margin-top: 16px; }
}

@media (scripting: enabled) {
    .mtc-recent__panel[data-mtc-inactive],
    .mtc-recent__panel[hidden] { display: none; }
}

.mtc-game {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 64px;
    grid-template-areas: "when teams pill";
    align-items: center;
    gap: 24px;
    min-height: 96px;
    padding: 16px;
}

.mtc-game + .mtc-game { border-top: 1px solid var(--mtc-rule-row); }

.mtc-game__when {
    grid-area: when;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mtc-game__date {
    color: var(--mtc-muted);
    font-size: 14px;
    line-height: 20px;
}

.mtc-game__comp {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.mtc-game__mark {
    flex: none;
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 4px;
}

.mtc-game__teams {
    grid-area: teams;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}

.mtc-game__club {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.mtc-game__club--own { justify-content: flex-end; }

.mtc-game__name {
    overflow: hidden;
    color: var(--mtc-text);
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mtc-game__score {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    background: rgba(247, 248, 248, .04);
    border-radius: 8px;
}

.mtc-game__n {
    width: 36px;
    color: var(--mtc-text);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    text-align: center;
}

.mtc-game__dash {
    width: 16px;
    color: var(--mtc-muted);
    text-align: center;
}

.mtc-game__teams:hover .mtc-game__name { color: var(--mtc-accent); }

.mtc-pill {
    grid-area: pill;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 28px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.mtc-pill--w { color: var(--mtc-accent-2); background: rgba(118, 201, 51, .12); }
.mtc-pill--l { color: #ea4f65; background: rgba(221, 29, 57, .12); } /* Figma #dd1d39 lightened: 3.5 → 4.72:1 on the pill (WCAG AA) */
.mtc-pill--d { color: var(--mtc-muted); background: rgba(98, 102, 105, .2); }

/* ==========================================================================
   5. آمار مسابقه
   ========================================================================== */

.mtc-poss {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mtc-poss__nums {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

.mtc-poss__home { color: var(--mtc-accent); }
.mtc-poss__away { color: var(--mtc-away-bar); }

.mtc-poss__bar {
    display: flex;
    height: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, .08);
    border-radius: 999px;
}

.mtc-poss__seg { display: block; height: 100%; }
.mtc-poss__seg--home { background: var(--mtc-accent); }
.mtc-poss__seg--away { background: var(--mtc-away-bar); }

.mtc-stats__rows {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mtc-stats__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
    grid-template-areas: "home label away";
    align-items: center;
    height: 44px;
}

.mtc-stats__label {
    grid-area: label;
    color: var(--mtc-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
}

.mtc-stats__home,
.mtc-stats__away {
    font-size: 18px;
    font-weight: 600;
    line-height: 30px;
}

.mtc-stats__home { grid-area: home; color: var(--mtc-accent); }
.mtc-stats__away { grid-area: away; color: var(--mtc-away); text-align: left; }

/* ==========================================================================
   6. آرایش زمین
   ========================================================================== */

.mtc-lineup__teams {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 20px;
}

.mtc-pitchcard {
    gap: 12px;
    padding: 12px;
}

.mtc-pitchcard__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mtc-page .mtc-pitchcard__name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--mtc-text);
    font-size: 18px;
    font-weight: 600;
    line-height: 30px;
}

.mtc-pitchcard__shape {
    width: 72px;
    color: var(--mtc-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
}

.mtc-coach {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mtc-coach__pic {
    flex: none;
    width: 48px;
    height: 48px;
    object-fit: cover;
    object-position: top;
    background: #14211a;
    border-radius: 50%;
}


.mtc-coach__text {
    display: flex;
    flex-direction: column;
}

.mtc-coach__role {
    color: var(--mtc-muted);
    font-size: 12px;
    line-height: 20px;
}

.mtc-coach__name {
    color: var(--mtc-text);
    font-size: 14px;
    line-height: 20px;
}

/* .mtc-page prefix: the list reset (.mtc-page ol) would otherwise zero the
   16px inset above the first line and below the last. */
.mtc-page .mtc-pitch {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 18px;
    min-height: 704px;
    padding: 16px 8px;
    background: #10251a url("../images/match/pitch-half.svg") center / 100% 100% no-repeat;
    border-radius: 10px;
    overflow: hidden;
}

.mtc-pitch__players {
    display: flex;
    justify-content: center;
    gap: 32px;
}

.mtc-tile {
    flex: 0 1 92px;
    min-width: 0;
}

.mtc-tile__in {
    display: flex;
    flex-direction: column;
    height: 120px;
    overflow: hidden;
    background: #14211a;
    border: 1px solid rgba(139, 203, 35, .25);
    border-radius: 8px;
}

.mtc-tile__pic {
    position: relative;
    display: block;
    flex: none;
    height: 87px;
    background: #14211a;
}

.mtc-tile__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.mtc-tile__num {
    position: absolute;
    top: 59px;
    left: 63px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: var(--mtc-text);
    background: rgba(17, 22, 19, .92);
    border: 1px solid rgba(139, 203, 35, .28);
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
}

.mtc-tile__sub {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px;
    color: #fff;
    background: #273018;
    border-radius: 0 7px 0 5px;
    font-size: 10px;
    line-height: 1;
}

.mtc-tile__sub img { display: block; width: 9.4px; height: 10px; }

.mtc-tile__plate {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    padding: 4px 4px 0;
    background: var(--mtc-accent);
    clip-path: polygon(0 15.6%, 100% 0, 100% 100%, 0 100%);
}

.mtc-tile__name {
    max-width: 100%;
    overflow: hidden;
    color: var(--mtc-on-accent);
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mtc-tile__in:hover .mtc-tile__plate { background: #9bd63a; }

/* ==========================================================================
   7. تعویض‌ها و نیمکت
   ========================================================================== */

.mtc-bench__teams {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 16px;
}

.mtc-bench__team {
    gap: 2px;
    padding: 12px;
}

.mtc-page .mtc-bench__bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    color: var(--mtc-text);
    background: rgba(255, 255, 255, .05);
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    line-height: 30px;
}

.mtc-bench__list {
    display: flex;
    flex-direction: column;
    gap: 5px; /* 2 + 1px divider + 2 */
}

.mtc-bench__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 60px; /* Figma: 60 at 1440, 62 below (pitch 65 / 67) */
    padding: 8px 0;
}

.mtc-bench__row + .mtc-bench__row::before {
    content: "";
    position: absolute;
    inset: -3px 0 auto;
    height: 1px;
    background: var(--mtc-rule-q);
}

.mtc-bench__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.mtc-bench__text > * {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mtc-bench__name {
    color: var(--mtc-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.mtc-bench__status {
    color: var(--mtc-muted);
    font-size: 12px;
    line-height: 18px;
}

.mtc-bench__in {
    display: flex;
    flex: none;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    color: var(--mtc-accent);
    font-size: 12px;
    line-height: 18px;
}

.mtc-bench__in img { display: block; width: 18px; height: 18px; }

/* ==========================================================================
   8. خط زمانی مسابقه
   ========================================================================== */

.mtc-page--done .mtc-tl { gap: 4px; }
.mtc-page--done .mtc-tl + .mtc-top { margin-top: 16px; } /* 40 at 1440, as drawn */

.mtc-tl__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mtc-ev {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 76px;
    padding: 8px;
    border-radius: 8px;
}

.mtc-ev:nth-child(odd) { background: rgba(247, 248, 248, .03); }

.mtc-ev__min {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    place-items: center;
    height: 28px;
    color: var(--mtc-accent);
    background: var(--mtc-card);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
}

.mtc-ev__body {
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

/* Home lane is right of the minute, away lane left; the symbol always sits
   beside the minute and the player block outside it (mirrored for away). */
.mtc-ev--home .mtc-ev__body { grid-column: 1; }
.mtc-ev--away .mtc-ev__body { grid-column: 3; flex-direction: row-reverse; }

.mtc-ev__who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mtc-ev--home .mtc-ev__who { text-align: left; }
.mtc-ev--away .mtc-ev__who { text-align: right; }

.mtc-ev__name {
    color: var(--mtc-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.mtc-ev__detail {
    color: var(--mtc-muted);
    font-size: 12px;
    line-height: 18px;
}

.mtc-ev__sym {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 24px;
}

.mtc-ev--away .mtc-ev__sym { flex-direction: row-reverse; }

.mtc-ev__icon { display: block; width: 18px; height: 18px; }
.mtc-ev--var .mtc-ev__icon { width: 24px; height: 24px; }
.mtc-ev--miss .mtc-ev__icon { opacity: .45; }

.mtc-ev__score {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 24px;
    padding: 0 6px;
    color: var(--mtc-text);
    background: rgba(247, 248, 248, .04);
    border-radius: 8px;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

.mtc-ev__label {
    color: var(--mtc-muted);
    font-size: 12px;
    line-height: 20px;
    white-space: nowrap;
}

/* ==========================================================================
   9. سه بازیکن برتر زمین
   ========================================================================== */

.mtc-top__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.mtc-top__card {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 184px;
    padding: 16px;
    background: rgba(139, 203, 35, .05);
    border: 1px solid rgba(139, 203, 35, .14);
    border-radius: 12px;
}

.mtc-top__pic {
    position: relative;
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.mtc-top__img {
    display: block;
    width: 112px;
    height: 152px;
    object-fit: cover;
    object-position: top;
    background: #14211a;
    border-radius: 8px;
}

.mtc-top__rank {
    position: absolute;
    top: 124px;
    left: 60px;
    display: grid;
    place-items: center;
    width: 48px;
    height: 24px;
    color: var(--mtc-text);
    background: rgba(17, 22, 19, .94);
    border-radius: 8px;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

.mtc-top__id {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.mtc-top__name {
    color: var(--mtc-text);
    font-size: 18px;
    font-weight: 600;
    line-height: 30px;
}

.mtc-top__club {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mtc-muted);
    font-size: 12px;
    line-height: 20px;
}

.mtc-top__rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mtc-top__rlabel {
    color: var(--mtc-muted);
    font-size: 12px;
    line-height: 18px;
}

.mtc-top__pill {
    display: grid;
    place-items: center;
    width: 64px;
    height: 36px;
    color: var(--mtc-on-accent);
    background: var(--mtc-accent);
    border-radius: 10px;
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
}

/* ==========================================================================
   Per-state frame values (desktop)
   ========================================================================== */

.mtc-page--live { --mtc-hero-h: 802px; }
.mtc-page--done { --mtc-hero-h: 761px; }

/* ==========================================================================
   Desktop below 1440: the 1320 column shrinks with the window.
   ========================================================================== */

@media (max-width: 1439px) and (min-width: 1200px) {
    .mtc-page--done .mtc-sum__teams { grid-template-columns: minmax(0, 1fr) 144px minmax(0, 1fr); }
}

/* ==========================================================================
   Tablet 576–1199 (frame 834)
   ========================================================================== */

@media (max-width: 1199px) {
    .mtc-page {
        --mtc-hero-h: 520px;
        --mtc-crumb-y: 16px;
        --mtc-title-gap: 24px;
        --mtc-title-after: 24px;
    }

    .mtc-page--live { --mtc-hero-h: 620px; --mtc-crumb-y: 32px; }
    .mtc-page--done { --mtc-hero-h: 620px; --mtc-crumb-y: 64px; --mtc-title-after: 116px; }

    .mtc-hero__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mtc-wrap { padding: calc(var(--sk-header-h, 76px) + var(--mtc-crumb-y)) 32px 40px; }

    .mtc-page .mtc-title {
        font-size: 36px;
        line-height: 44px;
        letter-spacing: 0;
    }

    .mtc-page--live .mtc-card,
    .mtc-page--done .mtc-card { padding: 20px; }

    /* Summary. */
    .mtc-sum__teams { grid-template-columns: minmax(0, 1fr) 280px minmax(0, 1fr); gap: 16px; }
    .mtc-page--live .mtc-sum__teams { grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); }
    .mtc-page--done .mtc-sum__teams { grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); gap: 24px; }

    .mtc-page--live .mtc-team__name { font-size: 20px; line-height: 30px; }

    .mtc-page--live .mtc-badge--live {
        min-width: 0;
        height: 20px;
        padding: 0 8px;
        font-size: 12px;
        line-height: 20px;
    }

    .mtc-page--done .mtc-badge--done { min-width: 100px; height: 44px; }

    .mtc-page--live .mtc-score { width: 112px; height: auto; padding: 12px 0; }
    .mtc-page--live .mtc-score__n { width: 48px; }
    .mtc-page--done .mtc-score { width: 120px; }
    .mtc-page--done .mtc-score__n { width: 52px; }

    /* Form. */
    .mtc-form__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* Recent: date + competition on top, then teams and the pill. */
    .mtc-tabs .mtc-tab { flex: 1 1 50%; }

    .mtc-game {
        grid-template-columns: minmax(0, 1fr) 64px;
        grid-template-areas:
            "when when"
            "teams pill";
        gap: 12px;
    }

    .mtc-game__teams { gap: 12px; }
    .mtc-game__name { font-size: 17px; line-height: 28px; }

    /* Lineups. */
    .mtc-lineup__teams { gap: 16px; }
    .mtc-page .mtc-pitch { min-height: 673px; padding: 16px 4px; }
    .mtc-pitch__players { gap: 4px; }
    .mtc-tile { flex: 0 1 80px; }

    .mtc-tile__in {
        align-items: center;
        gap: 4px;
        height: 114px;
    }

    .mtc-tile__pic {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: auto;
        background: none;
    }

    .mtc-tile__img {
        width: 52px;
        height: 50px;
        flex: none;
    }

    .mtc-tile__num {
        position: static;
        width: auto;
        min-width: 19px;
        height: 22px;
        padding: 0 4px;
        line-height: 20px;
    }

    .mtc-tile__plate {
        flex: none;
        width: 100%;
        height: 36px;
        padding: 6px 2px 2px;
    }

    .mtc-pitchcard__head .mtc-crest { width: 32px; height: 32px; }
    .mtc-pitchcard__shape { width: 64px; }

    .mtc-bench__row { height: 62px; }
    .mtc-bench__status { line-height: 20px; }

    /* Done frames: 84×120 tiles, 16px between lines. */
    .mtc-page--done .mtc-pitch { gap: 16px; }
    .mtc-page--done .mtc-tile { flex-basis: 84px; }
    .mtc-page--done .mtc-tile__in { height: 120px; }

    .mtc-tile__name { line-height: 20px; }

    /* Timeline, top three. */
    .mtc-page--live .mtc-tl { padding: 24px; }
    .mtc-page--done .mtc-tl { padding: 24px 16px 16px; }

    .mtc-top__list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .mtc-page--done .mtc-tl + .mtc-top { margin-top: 0; }
    .mtc-top__card { gap: 16px; height: 210px; padding: 16px 12px; }
    .mtc-top__rank { position: static; align-self: flex-start; height: 20px; }
    .mtc-top__pill { height: 30px; }
}

/* ==========================================================================
   Mobile ≤575 (frame 390)
   ========================================================================== */

@media (max-width: 575px) {
    .mtc-page {
        --mtc-hero-h: 560px;
        --mtc-crumb-y: 12px;
        --mtc-title-gap: 24px;
        --mtc-title-after: 24px;
    }

    .mtc-page--live { --mtc-hero-h: 620px; --mtc-crumb-y: 24px; --mtc-title-gap: 20px; --mtc-title-after: 20px; }
    .mtc-page--done { --mtc-hero-h: 660px; --mtc-crumb-y: 40px; --mtc-title-gap: 24px; --mtc-title-after: 106px; }

    .mtc-wrap { padding: calc(var(--sk-header-h, 68px) + var(--mtc-crumb-y)) 16px 32px; }

    .mtc-page .mtc-title {
        font-size: 24px;
        font-weight: 700;
        line-height: 32px;
    }

    .mtc-page--done .mtc-title { font-size: 30px; line-height: 38px; }

    .mtc-card,
    .mtc-page--live .mtc-card,
    .mtc-page--done .mtc-card { gap: 16px; padding: 16px; }

    .mtc-page--pre .mtc-card { padding: 20px 16px; }

    /* Summary. */
    .mtc-sum__meta {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .mtc-badge { order: -1; align-self: flex-start; }

    /* Live: badge over the competition line, 8 apart. Done: one row, badge
       100×44 on the left, competition 8 to its right (48:47389). */
    .mtc-page--live .mtc-sum__meta { gap: 8px; }

    .mtc-page--done .mtc-sum__meta {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .mtc-page--done .mtc-badge { order: 0; align-self: auto; }

    /* One club without form chips (PST/CANC): keep both columns top-aligned. */
    .mtc-page--pre .mtc-sum__teams { align-items: start; }

    .mtc-sum__teams {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "home away"
            "kick kick";
        gap: 20px 14px;
    }

    .mtc-team--home { grid-area: home; }
    .mtc-team--away { grid-area: away; }
    .mtc-kick { grid-area: kick; }

    .mtc-team .mtc-crest { width: 56px; height: 56px; }
    .mtc-page .mtc-team__name { font-size: 18px; line-height: 30px; }
    .mtc-team__role { font-size: 12px; }

    .mtc-page--live .mtc-sum__teams,
    .mtc-page--done .mtc-sum__teams {
        grid-template-areas: none;
        gap: 8px;
    }

    .mtc-page--live .mtc-sum__teams { grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr); }
    .mtc-page--done .mtc-sum__teams { grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr); }
    .mtc-page--live .mtc-team--home,
    .mtc-page--live .mtc-team--away,
    .mtc-page--done .mtc-team--home,
    .mtc-page--done .mtc-team--away { grid-area: auto; }

    .mtc-page--live .mtc-team .mtc-crest { width: 52px; height: 52px; }
    .mtc-page--live .mtc-team__name { font-size: 16px; line-height: 24px; }
    .mtc-page--live .mtc-team__role { font-size: 14px; }
    .mtc-page--live .mtc-badge--live { font-size: 14px; }
    .mtc-tile__num { height: 20px; line-height: 18px; }

    .mtc-page--done .mtc-sum { padding: 20px 12px; gap: 20px; }
    .mtc-page--done .mtc-team .mtc-crest { width: 64px; height: 64px; }
    .mtc-page--done .mtc-team__name { font-size: 18px; line-height: 30px; }

    .mtc-page--live .mtc-score { width: 80px; }
    .mtc-page--live .mtc-score__n { width: 34px; }
    .mtc-page--live .mtc-score__dash { width: 12px; }
    .mtc-page--done .mtc-score { width: 88px; min-height: 56px; }
    .mtc-page--done .mtc-score__n { flex: 1 1 0; width: auto; }

    /* Absentees. */
    .mtc-miss__teams { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .mtc-miss__team { gap: 12px; padding: 16px 12px; }
    .mtc-miss__id { padding-bottom: 12px; }

    /* Form. */
    .mtc-form__name { font-size: 16px; line-height: 24px; }
    .mtc-form__team { gap: 8px; }
    .mtc-form__team .mtc-chips { gap: 3px; }
    .mtc-form__team .mtc-chip { width: 24px; height: 24px; }

    .mtc-form__row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "label label"
            "home away";
        column-gap: 14px;
    }

    /* Recent. */
    .mtc-game {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "when"
            "pill"
            "teams";
        padding: 16px 0;
    }

    .mtc-pill { justify-self: start; }

    .mtc-game__teams { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); gap: 8px; }

    .mtc-game__club {
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        text-align: center;
    }

    .mtc-game__club--own { justify-content: center; }
    .mtc-game__club--own .mtc-crest { order: -1; }
    .mtc-game__name { max-width: 100%; font-size: 14px; line-height: 20px; }
    .mtc-game__n { width: 30px; font-size: 20px; line-height: 30px; }

    /* Stats. */
    .mtc-stats__rows { gap: 16px; }

    /* Lineups and bench: stacked, home first. */
    .mtc-lineup__teams,
    .mtc-bench__teams { grid-template-columns: minmax(0, 1fr); gap: 16px; }

    .mtc-pitchcard,
    .mtc-bench__team { padding: 8px; }

    .mtc-page .mtc-pitch { min-height: 663px; }
    .mtc-page--done .mtc-tile__in { height: 112px; }
    .mtc-page--done .mtc-tl { gap: 4px; }
    .mtc-tile__in { height: 112px; }
    .mtc-tile { flex-basis: 80px; }

    /* Timeline: one column, the minute at its club's outer edge. */
    .mtc-ev {
        display: flex;
        gap: 12px;
    }

    .mtc-ev--away { flex-direction: row-reverse; }

    .mtc-ev__min {
        flex: none;
        height: auto;
        background: none;
    }

    .mtc-ev__body { flex: 1 1 auto; justify-content: flex-start; }
    .mtc-ev--home .mtc-ev__who { text-align: right; }
    .mtc-ev--away .mtc-ev__who { text-align: left; }

    .mtc-page--live .mtc-tl { padding: 24px; }
    .mtc-page--done .mtc-tl { padding: 24px 8px 8px; }
    .mtc-page--done .mtc-lineup,
    .mtc-page--done .mtc-top { padding: 20px 12px; }

    .mtc-top__card { gap: 16px; }
    .mtc-top__name { font-size: 18px; }
}