/* =====================================================
   MATCH DETAIL PAGE — match.css
   ===================================================== */

/* ── Content container — always full width of dsn-container ── */
#mtContent { width: 100%; box-sizing: border-box; }
.mt-card { width: 100%; box-sizing: border-box; }

/* ── SEO H1 (visually hidden, content filled by JS) ── */
.mt-page-h1 {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── Hero ── */
.mt-hero {
    background: linear-gradient(135deg, #1a1d2e 0%, #12151f 100%);
    border-radius: 12px;
    padding: 32px 24px;
    margin-bottom: 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.mt-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(232,25,44,.12) 0%, transparent 70%);
    pointer-events: none;
}
.mt-hero__competition {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.mt-hero__competition img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
.mt-hero__teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}
.mt-hero__team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.mt-hero__team--home { align-items: flex-end; }
.mt-hero__team--away { align-items: flex-start; }
.mt-hero__crest {
    width: 68px;
    height: 68px;
    object-fit: contain;
}
.mt-hero__team-name {
    font-size: 16px;
    font-weight: 700;
    color: #f1f5f9;
    text-align: center;
    line-height: 1.3;
}
.mt-hero__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.mt-hero__score-main {
    font-size: 52px;
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1;
    letter-spacing: -2px;
}
/* Sprint SPRINT3_WC2026_PART3 A-iter 2 (B-2 CR fix, 2026-06-01) — finished hero modifier.
   Carries longer canonical label "FT(AET) 1:1 (4-2 pens)" instead of plain "1 : 1" — reduce
   font-size to fit single line at 375px viewport (avg label width ~22ch vs 5ch for plain). */
.mt-hero__score-main--finished {
    font-size: 32px;
    letter-spacing: -1px;
    text-align: center;
    white-space: nowrap;
}
.mt-hero__score-ht {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}
/* Sprint LIVE-PENALTY-SUPPORT: penalty shoot-out score divider.
   Sprint SPRINT2_PART1 CR iter 2 (B-1 HIGH revert): .mt-hero background is a
   hardcoded dark gradient (#1a1d2e → #12151f) at line 21-22 — invariant of
   prefers-color-scheme. #facc15 on this dark navy = 12.6:1 (WCAG AAA).
   Earlier override to #d97706 in light-mode dropped contrast to ~3.2:1 (fail
   WCAG AA) for light-system users viewing the same dark hero. Override removed;
   keep canonical #facc15 (AAA) for both dark and light system themes. */
.mt-hero__score-pen {
    font-size: 14px;
    font-weight: 700;
    color: #facc15;
    margin-top: 4px;
    letter-spacing: 0.3px;
}
.mt-hero__score-upcoming {
    font-size: 32px;
    font-weight: 700;
    color: #4b5563;
    letter-spacing: 2px;
}
.mt-hero__date {
    margin-top: 20px;
    font-size: 13px;
    color: #9ca3af;
}
.mt-hero__meta {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.mt-hero__meta-item {
    font-size: 12px;
    color: #6b7280;
}
.mt-hero__meta-item span {
    color: #9ca3af;
}
.mt-hero__pred-link {
    margin-top: 14px;
    text-align: center;
}
.mt-pred-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: rgba(232,25,44,.12);
    border: 1px solid rgba(232,25,44,.3);
    border-radius: 20px;
    color: #e8192c;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.mt-pred-btn:hover {
    background: rgba(232,25,44,.2);
    border-color: rgba(232,25,44,.5);
}
.mt-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.mt-status--finished  { background: rgba(232,25,44,.15); color: #e8192c; }
.mt-status--scheduled { background: rgba(148,163,184,.15);  color: #9ca3af; }
.mt-status--live      { background: rgba(239,68,68,.2);  color: #ef4444; }

/* ── Tabs (sticky scrollspy nav) ── */
.mt-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    background: #12151f;
    border-radius: 12px;
    padding: 0 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-wrap: nowrap;
    border-bottom: none;
}
.mt-tabs::-webkit-scrollbar { display: none; }
/* JS applies this when tabs scroll past the header — becomes full-width header */
.mt-tabs-stuck-wrapper {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 200;
    background: #12151f;
    border-bottom: 1px solid rgba(255,255,255,.07);
    box-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.mt-tabs-stuck-wrapper .mt-tabs {
    max-width: var(--container, 1240px);
    margin: 0 auto !important;
    margin-bottom: 0 !important;
    padding: 0 20px;
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.mt-tabs-stuck-wrapper .mt-tabs::-webkit-scrollbar { display: none; }
.mt-tab {
    flex-shrink: 0;
    padding: 12px 16px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border: none;
    background: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.mt-tab.active {
    background: #e8192c;
    color: #fff;
}
.mt-tab:hover:not(.active) {
    background: rgba(255,255,255,.06);
    color: #d1d5db;
}

/* ── Scrollspy sections ── */
.mt-section {
    scroll-margin-top: calc(var(--header-h, 58px) + 50px + 8px);
    min-height: 4px;
    padding-bottom: 24px;
}

/* ── Empty state ── */
.mt-empty-state {
    padding: 48px 24px;
    text-align: center;
}
.mt-empty-icon { font-size: 40px; margin-bottom: 16px; }
.mt-empty-title { font-size: 15px; font-weight: 600; color: #d1d5db; margin: 0 0 8px; }
.mt-empty-sub   { font-size: 13px; color: #6b7280; margin: 0; }

/* ── Cards ── */
.mt-card {
    background: #1a1d2e;
    color: #e6e8f0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}
.mt-card__title {
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

/* ── H2H stat bar ── */
.mt-h2h-bar {
    padding: 20px;
}
.mt-h2h-row {
    display: grid;
    grid-template-columns: 40px 1fr 60px 40px;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.mt-h2h-row:last-child { margin-bottom: 0; }
.mt-h2h-val {
    font-size: 15px;
    font-weight: 700;
    color: #f1f5f9;
    text-align: center;
}
.mt-h2h-label {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.mt-h2h-track {
    height: 6px;
    background: rgba(255,255,255,.07);
    border-radius: 3px;
    overflow: hidden;
    display: flex;
}
.mt-h2h-fill--home {
    height: 100%;
    background: #e8192c;
    border-radius: 3px;
    transition: width .4s ease;
}
.mt-h2h-fill--away {
    height: 100%;
    background: #94a3b8;
    border-radius: 3px;
    transition: width .4s ease;
    margin-left: auto;
}
.mt-h2h-fill--draw {
    height: 100%;
    background: #6b7280;
    border-radius: 3px;
    margin: 0 auto;
    transition: width .4s ease;
}
.mt-h2h-summary {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    padding: 0 20px 20px;
}
.mt-h2h-summary-item {
    background: rgba(255,255,255,.04);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}
.mt-h2h-summary-item__val {
    font-size: 22px;
    font-weight: 800;
    color: #f1f5f9;
}
.mt-h2h-summary-item__label {
    font-size: 11px;
    color: #6b7280;
    margin-top: 3px;
}

/* ── H2H match list ── */
.mt-match-list {
    padding: 0;
}
/* Unified row grid — both H2H and Last Matches rows share this template so
 * the score column is guaranteed to be visually centered (column 3 of 5),
 * with mirrored fixed left/right rails (90px each). Without mirroring the
 * variable date/league width shifted the score off-center between blocks. */
.mt-match-row {
    display: grid;
    grid-template-columns: 90px 1fr 60px 1fr 90px;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    text-decoration: none;
    transition: background .12s;
}
.mt-match-row:last-child { border-bottom: none; }
.mt-match-row:hover { background: rgba(255,255,255,.03); }
.mt-match-row__date {
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
}
.mt-match-row__team {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #d1d5db;
    font-weight: 500;
    min-width: 0;
}
.mt-match-row__team--home { justify-content: flex-end; text-align: right; }
.mt-match-row__team--away { text-align: left; }
.mt-match-row__team img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}
.mt-match-row__score {
    font-size: 14px;
    font-weight: 800;
    color: #f1f5f9;
    white-space: nowrap;
    padding: 3px 10px;
    background: rgba(255,255,255,.06);
    border-radius: 6px;
    min-width: 52px;
    text-align: center;
    justify-self: center;
}
.mt-match-row__comp {
    font-size: 11px;
    color: #4b5563;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Form comparison ── */
.mt-form-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(255,255,255,.06);
}
.mt-form-team {
    background: #1a1d2e;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mt-form-team__name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #d1d5db;
    text-decoration: none;
}
.mt-form-team__name:hover { color: #e8192c; }
.mt-form-team__name img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}
.mt-form-badges {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.mt-form-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
}
.mt-form-badge--win  { background: #e8192c; }
.mt-form-badge--loss { background: #e05454; }
.mt-form-badge--draw { background: #6b7280; }

/* ── Goal scorers under team name in hero ── */
.mt-hero__scorers {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.5;
    max-width: 160px;
    text-align: center;
}
.mt-hero__team--home .mt-hero__scorers { text-align: right; }
.mt-hero__team--away .mt-hero__scorers { text-align: left; }

/* ── Timeline ── */
.mt-timeline {
    padding: 8px 0;
}
.mt-event {
    display: grid;
    grid-template-columns: 1fr 52px 1fr;
    align-items: center;
    min-height: 44px;
    padding: 2px 16px;
    gap: 0;
}
.mt-event:hover { background: rgba(255,255,255,.02); }

.mt-event__side {
    display: flex;
    align-items: center;
}
.mt-event__side--home {
    justify-content: flex-end;
    gap: 8px;
}
.mt-event__side--away {
    justify-content: flex-start;
    gap: 8px;
}

.mt-event__minute {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #4b5563;
    white-space: nowrap;
    position: relative;
}
.mt-event__minute::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -2px;
    bottom: -2px;
    width: 1px;
    background: rgba(255,255,255,.06);
    transform: translateX(-50%);
    z-index: 0;
}

.mt-event__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mt-event__content--home { align-items: flex-end; text-align: right; }
.mt-event__content--away { align-items: flex-start; text-align: left; }

.mt-event__name {
    font-size: 13px;
    font-weight: 600;
    color: #e2e8f0;
}
.mt-event__sub {
    font-size: 11px;
    color: #6b7280;
}

/* Icons per event type */
.mt-event__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mt-event__icon--goal   { background: rgba(34,197,94,.12); color: #22c55e; }
.mt-event__icon--yellow { background: rgba(234,179,8,.1);  color: #eab308; }
.mt-event__icon--red    { background: rgba(239,68,68,.1);  color: #ef4444; }
.mt-event__icon--red2   { background: rgba(239,68,68,.1);  color: #ef4444; }
.mt-event__icon--sub    { background: rgba(99,102,241,.1); color: #818cf8; }

/* ── Synthetic events (kick-off / half-time / full-time) ── */
.mt-event--synthetic.ev-synthetic {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 32px;
    padding: 6px 16px;
    margin: 6px 0;
    background: rgba(255,255,255,0.04);
    border-left: 2px solid #6b7280;
    border-radius: 4px;
}
.mt-event--synthetic .mt-event__synth {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #9ca3af;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.mt-event__whistle {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
}
.mt-event-note {
    padding: 10px 20px;
    margin: 0 16px 8px;
    background: rgba(234,179,8,0.08);
    border-left: 3px solid #eab308;
    border-radius: 4px;
    font-size: 12px;
    color: #d4d4d8;
}

/* Card shapes inside icon */
.mt-event__card {
    display: inline-block;
    width: 8px;
    height: 11px;
    border-radius: 1px;
}
.mt-event__card--yellow { background: #eab308; }
.mt-event__card--red    { background: #ef4444; }
.mt-event__card--red2   {
    background: linear-gradient(135deg, #eab308 50%, #ef4444 50%);
}

/* ── Match Statistics ── */
.mt-stats {
    padding: 12px 20px 16px;
}
.mt-stat-row {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.mt-stat-row:last-child { margin-bottom: 0; }
.mt-stat-row__val {
    font-size: 13px;
    font-weight: 700;
    color: #f1f5f9;
}
.mt-stat-row__val--home { text-align: left; }
.mt-stat-row__val--away { text-align: right; }
.mt-stat-row__bar {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.mt-stat-row__label {
    font-size: 11px;
    color: #6b7280;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.mt-stat-row__track {
    height: 5px;
    border-radius: 3px;
    background: rgba(255,255,255,.06);
    display: flex;
    overflow: hidden;
}
.mt-stat-row__fill {
    height: 100%;
    transition: width .5s ease;
}
.mt-stat-row__fill--home { background: #e8192c; border-radius: 3px 0 0 3px; }
.mt-stat-row__fill--away { background: #94a3b8; border-radius: 0 3px 3px 0; }

/* ── Loader ── */
.mt-loader {
    display: flex;
    justify-content: center;
    padding: 48px;
}
.mt-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,.08);
    border-top-color: #e8192c;
    border-radius: 50%;
    animation: mt-spin .7s linear infinite;
}
@keyframes mt-spin { to { transform: rotate(360deg); } }

/* ── Breadcrumb ── */
.mt-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.mt-breadcrumb a { color: #9ca3af; text-decoration: none; }
.mt-breadcrumb a:hover { color: #f1f5f9; }
.mt-breadcrumb svg { flex-shrink: 0; opacity: .5; }

/* ── trn-match as link ── */
a.trn-match {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background .12s;
}
a.trn-match:hover {
    background: rgba(255,255,255,.04);
}

/* ── Prediction result badge ── */
.mc-pred-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    font-size: 13px;
    font-weight: 600;
    color: #9ca3af;
}
.mc-pred-badge--ok  { background: rgba(39,174,96,.15);  border-color: rgba(39,174,96,.4);  color: #6ee7b7; }
.mc-pred-badge--bad { background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.35); color: #fca5a5; }
.mc-pred-badge__label  { font-weight: 500; opacity: .75; }
.mc-pred-badge__outcome { font-weight: 700; color: inherit; }
.mc-pred-badge__conf   { font-size: 11px; opacity: .65; }
.mc-pred-badge__icon   { font-size: 15px; font-weight: 800; }
.mc-pred-badge--ok  .mc-pred-badge__icon { color: #34d399; }
.mc-pred-badge--bad .mc-pred-badge__icon { color: #f87171; }

/* ── Empty state ── */
.mt-empty {
    padding: 48px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}
.mt-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 16px;
    color: #6b7280;
    font-size: 13px;
}
.mt-empty-state svg { opacity: .4; }

/* ── Lineups ── */
.mt-lineup-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.mt-pitch-card {
    background: #1a1d2e;
    border-radius: 12px;
    overflow: hidden;
}
.mt-pitch-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.mt-pitch-card__crest {
    width: 22px;
    height: 22px;
    object-fit: contain;
    background: #fff;
    border-radius: 3px;
    padding: 1px;
    flex-shrink: 0;
}
.mt-pitch-card__team {
    font-size: 13px;
    font-weight: 700;
    color: #f1f5f9;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mt-pitch-card__form {
    font-size: 12px;
    font-weight: 700;
    color: #9ca3af;
    background: rgba(255,255,255,.06);
    border-radius: 6px;
    padding: 3px 8px;
    flex-shrink: 0;
}

/* Pitch */
.mt-pitch {
    background: linear-gradient(180deg, #1a3d1a 0%, #1f481f 50%, #1a3d1a 100%);
    padding: 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,.04);
    min-height: 280px;
}
.mt-pitch::before {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    top: 50%;
    height: 1px;
    background: rgba(255,255,255,.08);
}
.mt-pitch__row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    z-index: 1;
}
.mt-pitch__player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: default;
    max-width: 52px;
}
.mt-pitch__num {
    width: 28px;
    height: 28px;
    background: #e8192c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    border: 2px solid rgba(255,255,255,.25);
    flex-shrink: 0;
}
.mt-pitch__pname {
    font-size: 9px;
    color: rgba(255,255,255,.9);
    text-align: center;
    max-width: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0,0,0,.9);
    font-weight: 600;
}

/* Bench */
.mt-bench { padding: 8px 0; }
.mt-bench__title {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 6px 14px 4px;
}
.mt-bench__list { padding: 0; }
.mt-bench__player {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.mt-bench__player:last-child { border-bottom: none; }
.mt-bench__num {
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.mt-bench__name {
    font-size: 12px;
    color: #d1d5db;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mt-bench__pos {
    font-size: 10px;
    font-weight: 600;
    color: #4b5563;
    flex-shrink: 0;
}

/* Coaches */
.mt-coaches {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.mt-coach {
    background: #1a1d2e;
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.mt-coach--away { text-align: right; }
.mt-coach__label {
    font-size: 10px;
    font-weight: 600;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.mt-coach__name {
    font-size: 13px;
    font-weight: 600;
    color: #d1d5db;
}

/* ── Responsive ── */
@media (max-width: 700px) {
    .mt-lineup-wrap { grid-template-columns: 1fr; }
    .mt-coaches { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 600px) {
    .mt-hero__teams { grid-template-columns: 1fr auto 1fr; gap: 8px; }
    .mt-hero__crest { width: 48px; height: 48px; }
    .mt-hero__score-main { font-size: 38px; }
    .mt-hero__score-main--finished { font-size: 24px; }
    .mt-hero__team-name { font-size: 13px; }
    .mt-match-row { grid-template-columns: 60px 1fr 50px 1fr 60px; gap: 6px; padding: 8px 12px; }
    .mt-match-row .mt-match-row__score,
    .mt-match-row .mt-lm-score { min-width: 44px; padding: 2px 6px; font-size: 12px; }
    .mt-h2h-row { grid-template-columns: 32px 1fr 50px 1fr 32px; }
    .mt-row-right-pack .mt-match-row__comp,
    .mt-row-right-pack .mt-lm-league { font-size: 9px; }
}
@media (max-width: 420px) {
    .mt-hero { padding: 16px 12px; }
    .mt-hero__teams { gap: 6px; }
    .mt-hero__crest { width: 40px; height: 40px; }
    .mt-hero__score-main { font-size: 30px; }
    .mt-hero__score-main--finished { font-size: 19px; }
    .mt-hero__team-name { font-size: 11px; }
    .mt-tabs { gap: 0; }
    .mt-tab { font-size: 12px; padding: 10px 12px; }
    .mt-h2h-row { grid-template-columns: 28px 1fr 46px 1fr 28px; font-size: 11px; }
    .mt-h2h-team { font-size: 11px; }
    .mt-match-row { grid-template-columns: 48px 1fr 44px 1fr 48px; padding: 8px 8px; gap: 4px; }
    .mt-match-row .mt-match-row__score,
    .mt-match-row .mt-lm-score { font-size: 11px; padding: 2px 5px; min-width: 38px; }
    .mt-match-row .mt-match-row__team { font-size: 11px; }
    .mt-match-row .mt-match-row__team img { width: 13px; height: 13px; }
    .mt-row-left-pack__text .mt-match-row__date,
    .mt-row-left-pack__text .mt-lm-date { font-size: 9px; }
    .mt-row-left-pack__text .mt-lm-league { font-size: 8px; }
}

/* ── Odds % Statistics ── */
.mt-odds-wrap { padding: 20px; }

.mt-odds-teams-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.mt-odds-team--home {
    color: #60a5fa;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mt-odds-team--away {
    color: #93c5fd;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}
.mt-odds-vs {
    font-size: 11px;
    color: #4b5563;
    font-weight: 600;
    text-align: center;
}

/* Scope toggle (All / H2H) */
.mt-odds-scope {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    background: rgba(255,255,255,.04);
    border-radius: 8px;
    padding: 3px;
}
.mt-odds-scope-btn {
    flex: 1;
    height: 28px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    background: transparent;
    color: #6b7280;
    transition: all .2s;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.mt-odds-scope-btn.active {
    background: #252837;
    color: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* Sub-tabs (Goals / BTTS / Form) */
.mt-odds-subtabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
}
.mt-odds-subtab-btn {
    flex: 1;
    height: 34px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    background: transparent;
    color: #6b7280;
    transition: all .2s;
    letter-spacing: .02em;
}
.mt-odds-subtab-btn:hover { color: #e2e8f0; border-color: rgba(255,255,255,.18); }
.mt-odds-subtab-btn.active {
    background: #1d4ed8;
    border-color: #3b82f6;
    color: #fff;
    box-shadow: 0 2px 8px rgba(59,130,246,.35);
}

/* Stat rows */
.mt-odds-row {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.mt-odds-row__val {
    font-size: 14px;
    font-weight: 700;
    color: #cbd5e1;
    font-variant-numeric: tabular-nums;
}
.mt-odds-row__val--home { text-align: left; color: #60a5fa; }
.mt-odds-row__val--away { text-align: right; color: #93c5fd; }
.mt-odds-row__val--best      { color: #4ade80; }
.mt-odds-row__val--best-away { color: #4ade80; }
.mt-odds-row__bar { min-width: 0; }
.mt-odds-row__label {
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}
/* Bidirectional bar track */
.mt-odds-bidir {
    display: flex;
    height: 7px;
    gap: 2px;
}
.mt-odds-bidir__left {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    background: rgba(255,255,255,.05);
    border-radius: 3px 0 0 3px;
    overflow: hidden;
}
.mt-odds-bidir__right {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    background: rgba(255,255,255,.05);
    border-radius: 0 3px 3px 0;
    overflow: hidden;
}
.mt-odds-bidir__fill {
    height: 100%;
    transition: width .5s cubic-bezier(.4,0,.2,1);
}
.mt-odds-bidir__fill--home   { background: #3b82f6; border-radius: 3px 0 0 3px; }
.mt-odds-bidir__fill--away   { background: #60a5fa; border-radius: 0 3px 3px 0; }
.mt-odds-bidir__fill--best-h { background: #4ade80; }
.mt-odds-bidir__fill--best-a { background: #4ade80; }

/* Sample count label */
.mt-odds-footer {
    margin-top: 6px;
    font-size: 11px;
    color: #4b5563;
    text-align: center;
}

/* ── Lineup pitch ── */
.mt-pitch-svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0 0 10px 10px;
}
.mt-lineup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 12px;
    background: #1f2937;
    border-bottom: 1px solid #374151;
}
.mt-lineup-header__team {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #e2e8f0;
}
.mt-lineup-header__team img { width: 24px; height: 24px; object-fit: contain; }
.mt-lineup-header__team--away { flex-direction: row-reverse; }
.mt-lineup-header__label {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.mt-pitch-player { cursor: default; }
.mt-pitch-player:hover circle { filter: brightness(1.2); }

/* Rosters */
.mt-rosters-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
}
@media (max-width: 600px) {
    .mt-rosters-grid { grid-template-columns: 1fr; }
}
.mt-roster {
    background: #1f2937;
    border-radius: 10px;
    overflow: hidden;
}
.mt-roster__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #374151;
}
.mt-roster__crest { width: 28px; height: 28px; object-fit: contain; }
.mt-roster__team { font-size: 13px; font-weight: 700; color: #e2e8f0; }
.mt-roster__formation { font-size: 11px; color: #6b7280; margin-top: 2px; }
.mt-roster__list { padding: 4px 0; }
.mt-roster__section-label {
    font-size: 10px;
    font-weight: 700;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 8px 14px 4px;
}
.mt-roster__player {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    transition: background .15s;
}
.mt-roster__player:hover { background: rgba(255,255,255,.04); }
.mt-roster__player--bench { opacity: .7; }
.mt-roster__num {
    width: 22px;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-align: center;
    flex-shrink: 0;
}
.mt-roster__name { font-size: 13px; color: #e2e8f0; font-weight: 500; }
.mt-roster__pos { font-size: 10px; color: #6b7280; margin-top: 1px; }
.mt-roster__manager {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 10px;
    border-top: 1px solid #374151;
    margin-top: 4px;
}
.mt-roster__manager-icon {
    width: 22px;
    height: 22px;
    color: #6b7280;
    flex-shrink: 0;
}

/* Shirt hover effect */
.mt-pitch-player:hover path { filter: brightness(1.2); }

/* ── Last Matches ──
 * Single full-width column on ALL viewports so that score column in LM rows
 * (Home block and Away block) aligns vertically with H2H block above.
 * Previously a 2-col grid on desktop made Arsenal column center X=336 and
 * Burnley column center X=944 while H2H sat at X=640 — 608px misalignment.
 * Stacked layout: Arsenal block first, then Burnley block, both full width. */
.mt-lm-grid {
    display: block;
    margin-bottom: 16px;
}
.mt-lm-grid > .mt-lm-team + .mt-lm-team { margin-top: 16px; }
.mt-lm-team {
    background: #1f2937;
    border-radius: 10px;
    overflow: hidden;
}
.mt-lm-team__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #374151;
}
.mt-lm-team__crest { width: 32px; height: 32px; object-fit: contain; }
.mt-lm-team__name { font-size: 14px; font-weight: 700; color: #e2e8f0; }
.mt-lm-badges { display: flex; gap: 4px; margin-top: 6px; }
.mt-lm-badge {
    width: 22px; height: 22px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mt-lm-badge--win  { background: #166534; color: #4ade80; }
.mt-lm-badge--draw { background: #374151; color: #9ca3af; }
.mt-lm-badge--loss { background: #7f1d1d; color: #f87171; }
.mt-lm-wdl {
    display: flex;
    gap: 0;
    padding: 12px 16px;
    border-bottom: 1px solid #374151;
}
.mt-lm-wdl__item {
    flex: 1;
    text-align: center;
}
.mt-lm-wdl__pct {
    font-size: 18px;
    font-weight: 800;
    color: #e2e8f0;
    line-height: 1;
    margin-bottom: 6px;
}
.mt-lm-wdl__bar {
    height: 4px;
    border-radius: 2px;
    margin: 0 auto 4px;
    max-width: 60px;
}
.mt-lm-wdl__bar--win  { background: #22c55e; }
.mt-lm-wdl__bar--draw { background: #9ca3af; }
.mt-lm-wdl__bar--loss { background: #ef4444; }
.mt-lm-wdl__label {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
}
.mt-lm-list { padding: 4px 0; }
/* Last Matches rows now reuse .mt-match-row grid (5-col with mirrored rails)
 * so score column aligns vertically with H2H block. Result badge + date pack
 * into the left rail (.mt-row-left-pack), league chip into the right rail
 * (.mt-row-right-pack). Without unification scores drifted left/right between
 * H2H, Home-LM and Away-LM blocks. */
.mt-lm-row {
    display: grid;
    grid-template-columns: 90px 1fr 60px 1fr 90px;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.04);
    transition: background .15s;
}
.mt-lm-row:last-child { border-bottom: none; }
.mt-lm-row:hover { background: rgba(255,255,255,.04); }
.mt-lm-result {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mt-lm-result--win  { background: #166534; color: #4ade80; }
.mt-lm-result--draw { background: #374151; color: #9ca3af; }
.mt-lm-result--loss { background: #7f1d1d; color: #f87171; }
/* Left rail pack — fixed 90px slot, holds result badge + date stack. */
.mt-row-left-pack {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}
.mt-row-left-pack__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    overflow: hidden;
}
/* Right rail pack — fixed 90px slot, league chip (or empty spacer). */
.mt-row-right-pack {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    overflow: hidden;
}
.mt-lm-date { font-size: 10px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-lm-league { font-size: 9px; color: #4b5563; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* H2H row uses the same unified grid; only inner styling differs. */
.mt-match-row--h2h .mt-match-row__date { overflow: hidden; font-size: 11px; }
.mt-match-row--h2h .mt-match-row__team { min-width: 0; }
.mt-match-row--h2h .mt-match-row__team--home { justify-content: flex-end; text-align: right; }
.mt-match-row--h2h .mt-match-row__comp {
    display: block;
    font-size: 10px;
    color: #4b5563;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mt-h2h-team-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Inline team labels inside LM rows (smaller font matches old design). */
.mt-lm-row .mt-match-row__team { font-size: 11px; color: #d1d5db; }
.mt-lm-row .mt-match-row__team img { width: 14px; height: 14px; }
.mt-lm-score {
    font-size: 12px;
    font-weight: 700;
    color: #e2e8f0;
    flex-shrink: 0;
    min-width: 52px;
    padding: 3px 10px;
    background: rgba(255,255,255,.06);
    border-radius: 6px;
    text-align: center;
    justify-self: center;
}

/* ── Standings table (knockout/league) ── */
.mt-st-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #e6e8f0;
}
.mt-st-table th {
    text-align: left;
    padding: 6px 8px;
    background: rgba(255,255,255,.05);
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-weight: 600;
    font-size: 11px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.mt-st-table td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.mt-st-row:hover { background: rgba(255,255,255,.03); }
.mt-st-row--highlight { background: rgba(232,25,44,.08); }
.mt-st-row--highlight:hover { background: rgba(232,25,44,.12); }
.mt-st-pos { width: 24px; text-align: center; opacity: .7; }
.mt-st-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mt-st-team img { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.mt-st-team a { color: inherit; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mt-st-team a:hover { color: #e8192c; }
.mt-st-num { text-align: center; width: 28px; color: #9ca3af; }
.mt-st-pts { text-align: right; font-weight: 700; width: 36px; color: #e6e8f0; }

/* ── Predictions ── */
.mt-pred2 { padding: 0; }

/* 3-card probability row (like prediction page) */
.mt-pred2-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.mt-pred2-card {
    background: #111827;
    border: 1px solid #1f2937;
    border-radius: 10px;
    padding: 16px 12px 14px;
    text-align: center;
    transition: border-color .15s;
}
.mt-pred2-card--active {
    border-color: rgba(232,25,44,.4);
    background: rgba(232,25,44,.05);
}
.mt-pred2-card__num {
    font-size: 11px;
    font-weight: 700;
    color: #4b5563;
    margin-bottom: 4px;
}
.mt-pred2-card--active .mt-pred2-card__num { color: #e8192c; }
.mt-pred2-card__pct {
    font-size: 28px;
    font-weight: 800;
    color: #6b7280;
    line-height: 1;
    margin-bottom: 8px;
}
.mt-pred2-card--active .mt-pred2-card__pct { color: #f1f5f9; }
.mt-pred2-card__bar-wrap {
    height: 4px;
    background: #1f2937;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 8px;
}
.mt-pred2-card__bar-fill {
    height: 100%;
    background: #374151;
    border-radius: 2px;
}
.mt-pred2-card--active .mt-pred2-card__bar-fill { background: #e8192c; }
.mt-pred2-card__label {
    font-size: 10px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}
.mt-pred2-card--active .mt-pred2-card__label { color: #9ca3af; }
.mt-pred2-card__odds {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    background: #1f2937;
    border-radius: 4px;
    padding: 2px 6px;
    display: inline-block;
}
.mt-pred2-card--active .mt-pred2-card__odds { color: #9ca3af; }

/* Our Prediction text block */
.mt-pred2-text {
    background: #111827;
    border: 1px solid #1f2937;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 14px;
}
.mt-pred2-text__title {
    font-size: 13px;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 8px;
}
.mt-pred2-text__body {
    font-size: 13px;
    color: #9ca3af;
    line-height: 1.6;
}
.mt-pred2-text__body b { color: #e2e8f0; font-weight: 700; }

/* CTA button */
.mt-pred2-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px;
    background: #e8192c;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s;
    box-sizing: border-box;
}
.mt-pred2-cta:hover { background: #c0111f; }
.mt-pred2-cta svg { flex-shrink: 0; }

/* No-prediction state */
.mt-pred2-empty {
    padding: 32px 16px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
}

/* Prediction header with team crests + xG */
.mt-pred2-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
    background: #111827;
    border: 1px solid #1f2937;
    border-radius: 10px;
    padding: 16px 12px;
    margin-bottom: 14px;
}
.mt-pred2-header__team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.mt-pred2-header__team--away { /* same styles */ }
.mt-pred2-header__crest {
    width: 44px;
    height: 44px;
    object-fit: contain;
}
.mt-pred2-header__name {
    font-size: 11px;
    font-weight: 600;
    color: #e2e8f0;
    line-height: 1.3;
    word-break: break-word;
}
.mt-pred2-header__score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-direction: row;
    padding: 0 8px;
    justify-self: center;
}
.mt-pred2-header__xg {
    font-size: 22px;
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1;
}
.mt-pred2-header__vs {
    font-size: 9px;
    font-weight: 700;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* Match Stats grid */
.mt-pred2-stats {
    background: #111827;
    border: 1px solid #1f2937;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.mt-pred2-stats__title {
    font-size: 10px;
    font-weight: 700;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 10px;
}
.mt-pred2-stats__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.mt-pred2-stat {
    background: #0f172a;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.mt-pred2-stat__label {
    font-size: 9px;
    font-weight: 700;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.mt-pred2-stat__val {
    font-size: 20px;
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1;
}
.mt-pred2-stats__grid .mt-pred2-stat:nth-child(even) {
    text-align: right;
    align-items: flex-end;
}

/* ── Bookmaker Odds ──────────────────────────────────────────── */
.mt-odds-bm-teams-hdr {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 20px;
    background: rgba(255,255,255,.03);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.mt-odds-bm-list { display: flex; flex-direction: column; gap: 0; }
.mt-odds-bm-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: background .1s;
}
.mt-odds-bm-row:last-child { border-bottom: none; }
.mt-odds-bm-row:hover { background: rgba(255,255,255,.03); }
.mt-odds-bm-name {
    min-width: 120px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: #d1d5db;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mt-odds-bm-logo {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: #fff;
    padding: 1px;
    flex-shrink: 0;
    object-fit: contain;
}
.mt-odds-bm-ox2 {
    display: flex;
    gap: 6px;
    flex: 1;
}
.mt-odds-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 6px;
    background: rgba(255,255,255,.07);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background .12s, transform .12s;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.08);
}
.mt-odds-btn:hover {
    background: #e8192c;
    color: #fff;
    transform: translateY(-1px);
    border-color: transparent;
}
.mt-odds-btn__label {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,.4);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.mt-odds-btn:hover .mt-odds-btn__label { color: rgba(255,255,255,.7); }
.mt-odds-btn__val {
    font-size: 16px;
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1;
}
.mt-odds-btn:hover .mt-odds-btn__val { color: #fff; }
.mt-odds-btn--best .mt-odds-btn__val { color: #4ade80; }
.mt-odds-btn:hover.mt-odds-btn--best .mt-odds-btn__val { color: #fff; }
.mt-odds-bm-ou {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.mt-odds-ou-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    background: rgba(59,130,246,.12);
    border: 1px solid rgba(59,130,246,.2);
    border-radius: 7px;
    min-width: 52px;
}
.mt-odds-ou-btn__label { font-size: 9px; font-weight: 700; color: #93c5fd; text-transform: uppercase; letter-spacing: .04em; }
.mt-odds-ou-btn__val   { font-size: 13px; font-weight: 700; color: #bfdbfe; }
.mt-odds-bm-cta {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #e8192c;
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
    background: rgba(232,25,44,.1);
    border: 1px solid rgba(232,25,44,.25);
    border-radius: 6px;
    padding: 4px 10px;
    transition: background .12s, color .12s;
    width: 52px;
    justify-content: center;
}
.mt-odds-bm-cta:hover { background: #e8192c; color: #fff; border-color: #e8192c; }
/* odds widget in hero area (upcoming matches) */
.mt-hero-odds-wrap {
    background: #1a1d2e;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
    text-align: center;
}
.mt-hero-odds {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.mt-hero-odds-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 24px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    color: #f9fafb;
    text-decoration: none;
    transition: background .15s, border-color .15s;
    min-width: 80px;
}
.mt-hero-odds-btn:hover { background: rgba(232,25,44,.25); border-color: #e8192c; }
.mt-hero-odds-btn__lbl { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .05em; }
.mt-hero-odds-btn__val { font-size: 20px; font-weight: 800; color: #f1f5f9; }
.mt-hero-odds-bm { font-size: 11px; color: rgba(255,255,255,.3); margin-top: 10px; }
.mt-hero-odds-disclaimer { font-size: 10px; color: rgba(255,255,255,.45); margin-top: 6px; letter-spacing: .02em; }
@media (max-width: 600px) {
    .mt-odds-bm-row { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
    .mt-odds-bm-name { min-width: 80px; font-size: 12px; }
    .mt-odds-bm-ou { display: none; }
    .mt-odds-btn__val { font-size: 14px; }
}

/* ── Odds Table (B6 redesign) ──────────────────────────────── */
.mt-ot-updated { color: #9ca3af; font-weight: 400; font-size: 11px; margin-left: 8px; }
.mt-ot-wrap    { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mt-ot-table   { display: flex; flex-direction: column; min-width: 580px; }
.mt-ot-head {
    display: flex;
    align-items: center;
    padding: 7px 16px;
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.mt-ot-row {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: background .1s;
}
.mt-ot-row:hover { background: rgba(255,255,255,.03); }
.mt-ot-summary {
    display: flex;
    align-items: center;
    padding: 8px 16px;
}
.mt-ot-summary--best { background: rgba(34,197,94,.07); border-top: 1px solid rgba(34,197,94,.15); }
.mt-ot-summary--avg  { background: rgba(255,255,255,.025); }
.mt-ot-summary--low  { background: rgba(239,68,68,.05); }

.mt-ot-cell          { display: flex; align-items: center; }
.mt-ot-cell--bm      { flex: 0 0 150px; gap: 8px; overflow: hidden; }
.mt-ot-cell--odds    { flex: 1; justify-content: center; min-width: 44px; }
.mt-ot-cell--ou      { flex: 0 0 52px; justify-content: center; }
.mt-ot-cell--bonus   { flex: 0 0 148px; justify-content: flex-start; padding-left: 4px; }
.mt-ot-cell--action  { flex: 0 0 56px; justify-content: flex-end; }

.mt-ot-head .mt-ot-cell {
    font-size: 10px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.mt-ot-logo {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: #fff;
    padding: 1px;
    flex-shrink: 0;
    object-fit: contain;
}
.mt-ot-bm-name {
    font-size: 13px;
    font-weight: 600;
    color: #d1d5db;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mt-ot-val         { font-size: 14px; font-weight: 700; color: #cbd5e1; }
.mt-ot-val--best   { color: #4ade80; }
.mt-ot-empty       { color: #4b5563; font-size: 13px; }
.mt-ot-bonus {
    font-size: 11px;
    font-weight: 600;
    color: #fbbf24;
    background: rgba(251,191,36,.1);
    border: 1px solid rgba(251,191,36,.2);
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    display: block;
}
.mt-ot-bet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    background: rgba(232,25,44,.15);
    color: #e8192c;
    border: 1px solid rgba(232,25,44,.3);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s, color .12s, border-color .12s;
}
.mt-ot-bet:hover { background: #e8192c; color: #fff; border-color: #e8192c; }

.mt-ot-summ-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.mt-ot-summary--best .mt-ot-summ-label { color: #4ade80; }
.mt-ot-summary--avg  .mt-ot-summ-label { color: #94a3b8; }
.mt-ot-summary--low  .mt-ot-summ-label { color: #f87171; }
.mt-ot-summary .mt-ot-cell--odds,
.mt-ot-summary .mt-ot-cell--ou { font-size: 13px; font-weight: 700; color: #6b7280; }
.mt-ot-summary--best .mt-ot-cell--odds,
.mt-ot-summary--best .mt-ot-cell--ou { color: #4ade80; }
.mt-ot-summary--low  .mt-ot-cell--odds,
.mt-ot-summary--low  .mt-ot-cell--ou { color: #f87171; }

@media (max-width: 600px) {
    .mt-ot-cell--bonus { display: none; }
    .mt-ot-cell--bm    { flex: 0 0 110px; }
}

/* ── Live xG / Momentum Bar (Sprint LIVE-XG / S74-08, 18.05.2026) ────────── */
/* Shown ONLY for live/ht matches via JS — appended into #mtHero by match.js. */
.mt-momentum-container { margin-top: 16px; }

.mt-momentum-bar {
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.mt-momentum-bar__label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin-bottom: 8px;
    text-align: center;
}

.mt-momentum-bar__rail {
    display: flex;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}

.mt-momentum-bar__home {
    background: linear-gradient(90deg, #e8192c, #c41423);
    transition: width 0.6s ease;
    min-width: 0;
}

.mt-momentum-bar__away {
    background: linear-gradient(90deg, #1e90ff, #0064c8);
    transition: width 0.6s ease;
    min-width: 0;
}

.mt-momentum-bar__values {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}

.mt-momentum-bar__home-val {
    text-align: left;
    color: #ff5c6c;
    font-weight: 600;
}

.mt-momentum-bar__away-val {
    text-align: right;
    color: #5ca8ff;
    font-weight: 600;
}

.mt-momentum-bar--empty .mt-momentum-bar__placeholder {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    padding: 6px 0;
}

/* Light theme overrides — keep contrast WCAG AA. */
@media (prefers-color-scheme: light) {
    .mt-momentum-bar {
        background: rgba(0, 0, 0, 0.03);
        border-color: rgba(0, 0, 0, 0.08);
    }
    .mt-momentum-bar__label { color: rgba(0, 0, 0, 0.65); }
    .mt-momentum-bar__rail  { background: rgba(0, 0, 0, 0.08); }
    .mt-momentum-bar__values { color: rgba(0, 0, 0, 0.85); }
    .mt-momentum-bar__home-val { color: #c41423; }
    .mt-momentum-bar__away-val { color: #0064c8; }
    .mt-momentum-bar--empty .mt-momentum-bar__placeholder { color: rgba(0, 0, 0, 0.55); }
}

@media (max-width: 600px) {
    .mt-momentum-bar__values { font-size: 11px; }
    .mt-momentum-bar__label  { font-size: 10px; }
}

/* ── Centered message placeholder (replaces inline styles) ── */
.mt-msg-center {
    padding: 32px;
    text-align: center;
}
.mt-msg-center--muted { color: #6b7280; }
.mt-msg-center--alt   { color: #6b7280; }

/* ── D1 DEBT-MATCH-INLINE-LINK-COLORS: muted link/text utility (replaces inline color:#6b7280) ── */
.mt-link-muted { color: #6b7280; }

/* ── D2 DEBT-MATCH-FACC15-LIGHTMODE: warning link — dark default #facc15,
   light-mode #d97706 for WCAG AA contrast (≥4.5:1 на белом фоне) ── */
.mt-link-warning { color: #facc15; text-decoration: none; }
@media (prefers-color-scheme: light) {
    .mt-link-warning { color: #d97706; }
}

/* ── D4 DEBT-MATCH-ICON-WRAPPER: goal/owngoal emoji wrapper (consistency
   с .mt-event__whistle для start/halftime/fulltime) ── */
.mt-event__icon--inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Sprint LIVE-MATCH-QUALITY — team crest рядом с player в timeline */
.mt-event__team-crest {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin: 0 4px;
    border-radius: 2px;
    object-fit: contain;
}

/* Sprint LIVE-MATCH-PWA-EVENTS: principal hero background всегда dark gradient,
   принудительно белый текст для momentum block для guarantee читаемости
   (override prefers-color-scheme: light media query above). */
.mt-hero .mt-momentum-bar__label { color: rgba(255, 255, 255, 0.75) !important; }
.mt-hero .mt-momentum-bar__values { color: rgba(255, 255, 255, 0.95) !important; }
.mt-hero .mt-momentum-bar__home-val { color: #ff7884 !important; }
.mt-hero .mt-momentum-bar__away-val { color: #7ec1ff !important; }
.mt-hero .mt-momentum-bar__rail { background: rgba(255, 255, 255, 0.12) !important; }
.mt-hero .mt-momentum-bar--empty .mt-momentum-bar__placeholder { color: rgba(255, 255, 255, 0.65) !important; }

/* Sprint MOMENTUM-COLOR-FORCE-FINAL (30.05.2026 19:30) — body-level overrides
   гарантируют что label видим на любой theme/cache state */
body .mt-momentum-bar__label,
html .mt-momentum-bar__label,
.mt-momentum-bar .mt-momentum-bar__label {
    color: rgba(255, 255, 255, 0.85) !important;
}
body .mt-momentum-bar__values,
html .mt-momentum-bar__values,
.mt-momentum-bar .mt-momentum-bar__values {
    color: rgba(255, 255, 255, 0.95) !important;
}
.mt-momentum-bar {
    background: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}