/* Match pages (match pages spec §4, §5, §9.2): loaded by /pertandingan/… only, through the layout's styles. */
.match-board { padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.match-board__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--color-muted); font-size: 13px; }
.match-board__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.match-board__team { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.match-board__team--away { flex-direction: column-reverse; }
.match-board__name { font: 700 17px/1.1 var(--font-head); }
.match-board__mid { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); min-width: 88px; text-align: center; }
.match-board__mid small { color: var(--color-muted); font-size: 12px; }
.match-board__score { font: 700 34px/1 var(--font-head); font-variant-numeric: tabular-nums; }
.match-board__title { margin-top: var(--space-4); color: var(--color-text-soft); font: 600 15px/1.3 var(--font-body); text-align: center; }
.match-board__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }
.match-board .crest--lg { width: 40px; height: 40px; }
.match-sum { margin-top: var(--space-5); color: var(--color-text-soft); font-size: 16px; line-height: 1.6; }
.match-board--compact { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.match-board--compact .match-board__score { font-size: 28px; }
.watch-page__title { margin-top: var(--space-4); font: 700 26px/1.15 var(--font-head); }
.watch-page__actions { justify-content: flex-start; }
.match-404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.match-board__scorers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-3); color: var(--color-muted); font-size: 13px; }
.match-board__scorers span:last-child { text-align: right; }
.match-part { margin-top: var(--space-8); }
.match-part__title { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); font: 700 22px/1.1 var(--font-head); text-transform: uppercase; letter-spacing: 0.03em; }
.match-part__title::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.match-tl { padding: 0; list-style: none; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.match-tl__row { display: grid; grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); align-items: center; padding: var(--space-2) var(--space-3); font-size: 14px; }
.match-tl__row + .match-tl__row { border-top: 1px solid var(--color-border); }
.match-tl__min { grid-area: 1 / 2; color: var(--color-primary); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.match-tl__ev { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); }
.match-tl__row--home .match-tl__ev { grid-area: 1 / 1; justify-content: flex-end; text-align: right; }
.match-tl__row--away .match-tl__ev { grid-area: 1 / 3; }
.match-tl__ev small { color: var(--color-muted); }
.match-tl__card { display: inline-block; width: 10px; height: 14px; border-radius: 2px; background: #F5D142; }
.match-tl__card--red { background: var(--color-accent); }
.match-stats { display: grid; gap: var(--space-3); }
.match-stats dt { color: var(--color-muted); font-size: 13px; text-align: center; }
.match-stats dd { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: var(--space-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.match-stats__value:last-child { text-align: right; }
.match-stats__bar { display: block; height: 8px; border-radius: var(--radius-pill); background: var(--color-border-strong); overflow: hidden; }
.match-stats__fill { display: block; height: 100%; background: var(--color-primary); }
.match-stats__fill--w0 { width: 0%; }
.match-stats__fill--w5 { width: 5%; }
.match-stats__fill--w10 { width: 10%; }
.match-stats__fill--w15 { width: 15%; }
.match-stats__fill--w20 { width: 20%; }
.match-stats__fill--w25 { width: 25%; }
.match-stats__fill--w30 { width: 30%; }
.match-stats__fill--w35 { width: 35%; }
.match-stats__fill--w40 { width: 40%; }
.match-stats__fill--w45 { width: 45%; }
.match-stats__fill--w50 { width: 50%; }
.match-stats__fill--w55 { width: 55%; }
.match-stats__fill--w60 { width: 60%; }
.match-stats__fill--w65 { width: 65%; }
.match-stats__fill--w70 { width: 70%; }
.match-stats__fill--w75 { width: 75%; }
.match-stats__fill--w80 { width: 80%; }
.match-stats__fill--w85 { width: 85%; }
.match-stats__fill--w90 { width: 90%; }
.match-stats__fill--w95 { width: 95%; }
.match-stats__fill--w100 { width: 100%; }
.match-news { display: grid; gap: var(--space-3); padding: 0; list-style: none; }
.match-news__item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2); align-items: center; }
.match-news__item .media { aspect-ratio: 16 / 9; }
.match-news__text { display: grid; gap: var(--space-1); }
.match-news__text strong { font-size: 15px; line-height: 1.3; }
.match-news__text time { color: var(--color-muted); font-size: 12px; }
.match-news__tag { justify-self: start; padding: 1px 6px; border-radius: 4px; background: var(--color-surface-2); color: var(--color-text-soft); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.match-news__tag--after { background: var(--color-primary); color: var(--color-on-primary); }
.match-side__title { margin-bottom: var(--space-3); font: 700 17px/1.2 var(--font-head); text-transform: uppercase; letter-spacing: 0.03em; }
.match-side__video { display: grid; gap: var(--space-2); font-size: 14px; }
.match-side__video + .match-side__video { margin-top: var(--space-4); }
.match-table__mine td { background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-text); }
.match-table__mine .table__team { font-weight: 700; }
.match-table__gap td { color: var(--color-muted); text-align: center; }
.match-others { padding: 0; list-style: none; }
.match-others a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; font-size: 14px; }
.match-others li + li a { border-top: 1px solid var(--color-border); }
.match-others small { flex: none; color: var(--color-muted); }
.match-lineups { display: grid; gap: var(--space-4); }
.match-lineups__team { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.match-lineups__team h3 { margin-bottom: var(--space-2); font: 700 18px/1.2 var(--font-head); }
.match-lineups__team ul { padding: 0; list-style: none; }
.match-lineups__team li { display: flex; gap: var(--space-3); padding: 3px 0; font-size: 14px; }
.match-lineups__no { width: 22px; color: var(--color-muted); text-align: right; font-variant-numeric: tabular-nums; }
.match-lineups__pos { margin-left: auto; color: var(--color-muted); font-size: 12px; }
.match-lineups__subs { margin-top: var(--space-3); color: var(--color-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }

@media (min-width: 768px) {
    .match-board { padding: var(--space-6); }
    .match-board__team { flex-direction: row; text-align: left; gap: var(--space-3); }
    .match-board__team--away { flex-direction: row; justify-content: flex-end; text-align: right; }
    .match-board__name { font-size: 28px; }
    .match-board__mid { min-width: 150px; }
    .match-board__score { font-size: 52px; }
    .match-board .crest--lg { width: 56px; height: 56px; }
    .match-sum { font-size: 17px; }
    .match-lineups { grid-template-columns: 1fr 1fr; }
    .match-news { grid-template-columns: 1fr 1fr; }
}

/* Watch pages: host row, short text, live list (live streams spec §3.3). */
.watch-host { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); }
.watch-host .avatar { width: 40px; height: 40px; }
.watch-host__name { font-weight: 700; }
.watch-host small { color: var(--color-muted); }
.watch-page__intro { max-width: 62ch; margin-top: var(--space-3); color: var(--color-text-soft); line-height: 1.6; }
.live-side { padding: 0; list-style: none; }
.live-side a { display: flex; gap: var(--space-3); padding: var(--space-2) 0; font-size: 14px; }
.live-side li + li a { border-top: 1px solid var(--color-border); }
.live-side__thumb { flex: none; width: 64px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-surface-2); }
.live-side__thumb img { width: 100%; height: 100%; object-fit: cover; }
.live-side__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.live-side__meta { color: var(--color-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.live-side__title { font-weight: 700; }