/* ─────────────────────────────────────────────────────────────
   Match report page styles
   ───────────────────────────────────────────────────────────── */

/* Headline strip — competition tag, date */
.mr-tag {
  margin: 12px var(--gutter) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

/* Scoreline — the moment */
.mr-score {
  margin: 14px var(--gutter) 0;
  padding: 22px 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.mr-score::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 6px;
  background: var(--yellow);
}
.mr-score__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}
.mr-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.mr-team__badge {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--yellow-ink);
  font-family: var(--t-display);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}
.mr-team__badge--away {
  background: var(--green-pitch);
  color: #fff;
}
.mr-team__name {
  font-family: var(--t-display);
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-align: center;
}
.mr-team__home {
  font-family: var(--t-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-top: 2px;
}
.mr-score__numbers {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.mr-score__num {
  font-family: var(--t-display);
  font-size: 64px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.mr-score__num--dim {
  color: var(--ink-3);
}
.mr-score__num--win {
  color: var(--yellow);
}
[data-theme="light"] .mr-score__num--win,
:root:not([data-theme]) .mr-score__num--win {
  -webkit-text-stroke: 1.5px var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mr-score__num--win { -webkit-text-stroke: 0; }
}
[data-theme="dark"] .mr-score__num--win { -webkit-text-stroke: 0; }
.mr-score__sep {
  font-family: var(--t-display);
  font-size: 32px;
  color: var(--ink-4);
}

.mr-score__verdict {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-2);
  font-family: var(--t-italic);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-2);
}
.mr-score__verdict strong {
  font-family: var(--t-display);
  font-style: normal;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  font-size: 14px;
  border-radius: 4px;
}
.mr-score__verdict strong.win  { background: var(--win); color: #fff; }
.mr-score__verdict strong.loss { background: var(--loss); color: #fff; }
.mr-score__verdict strong.draw { background: var(--draw); color: #fff; }

/* Summary block — TL;DR for skim readers */
.mr-summary {
  margin: 18px var(--gutter) 0;
  font-family: var(--t-italic);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  line-height: 1.45;
  position: relative;
  padding-left: 14px;
}
.mr-summary::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--yellow);
}

/* Key stats line */
.mr-stats {
  margin: 22px var(--gutter) 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mr-stat {
  text-align: center;
  padding: 10px 6px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.mr-stat__num {
  font-family: var(--t-display);
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.mr-stat__lbl {
  font-family: var(--t-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-top: 4px;
}

/* Goals + key moments — timeline */
.mr-timeline {
  margin: 22px var(--gutter) 0;
}
.mr-timeline__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ink);
}
.mr-timeline__title {
  font-family: var(--t-display);
  font-size: 22px;
  letter-spacing: -0.005em;
}
.mr-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mr-event {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  border: 1px solid var(--rule-2);
}
.mr-event__min {
  font-family: var(--t-display);
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  text-align: center;
  letter-spacing: -0.005em;
}
.mr-event__min sup {
  font-family: var(--t-mono);
  font-size: 9px;
  vertical-align: super;
  color: var(--ink-3);
}
.mr-event__icon {
  font-size: 16px;
  width: 22px;
}
.mr-event__body {
  font-family: var(--t-body);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.3;
}
.mr-event__body strong { font-weight: 600; }
.mr-event__body em {
  font-family: var(--t-italic);
  font-style: italic;
  color: var(--ink-3);
  margin-left: 4px;
}
.mr-event__team {
  display: flex;
  align-items: center;
  font-family: var(--t-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.mr-event--us { border-left: 3px solid var(--yellow); }
.mr-event--them { border-left: 3px solid var(--loss); }

/* Long-form report */
.mr-longform {
  margin: 30px var(--gutter) 0;
  padding-top: 24px;
  border-top: 2px solid var(--ink);
}
.mr-longform__byline {
  font-family: var(--t-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.mr-longform__headline {
  font-family: var(--t-display);
  font-size: 32px;
  line-height: 0.95;
  letter-spacing: -0.005em;
  margin-bottom: 14px;
  color: var(--ink);
}
.mr-longform__deck {
  font-family: var(--t-italic);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.4;
  margin-bottom: 18px;
}
.mr-longform__body {
  font-family: var(--t-body);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.6;
}
.mr-longform__body p {
  margin: 0 0 14px;
}
.mr-longform__body p:first-of-type::first-letter {
  font-family: var(--t-display);
  font-size: 42px;
  float: left;
  line-height: 0.9;
  margin: 2px 6px 0 0;
  color: var(--yellow);
  -webkit-text-stroke: 1px var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .mr-longform__body p:first-of-type::first-letter { -webkit-text-stroke: 0; }
}
[data-theme="dark"] .mr-longform__body p:first-of-type::first-letter { -webkit-text-stroke: 0; }

/* Pull quote */
.mr-pullquote {
  margin: 22px -4px;
  padding: 18px 14px 18px 22px;
  position: relative;
  font-family: var(--t-italic);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  line-height: 1.25;
  background: linear-gradient(135deg, rgba(245,196,0,0.10), transparent 70%);
  border-top: 1px solid var(--yellow);
  border-bottom: 1px solid var(--yellow);
}
.mr-pullquote::before {
  content: '"';
  font-family: var(--t-display);
  font-style: normal;
  font-size: 64px;
  color: var(--yellow);
  position: absolute;
  left: 4px; top: -10px;
  line-height: 1;
}
.mr-pullquote__attr {
  display: block;
  margin-top: 8px;
  font-family: var(--t-mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Lineup */
.mr-lineup {
  margin: 24px var(--gutter) 0;
}
.mr-lineup__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ink);
}
.mr-lineup__title {
  font-family: var(--t-display);
  font-size: 22px;
  letter-spacing: -0.005em;
}
.mr-lineup__formation {
  font-family: var(--t-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--yellow);
}
.mr-lineup__pitch {
  background:
    linear-gradient(180deg, #1f7a3a 0%, #145025 100%);
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.0) 0 40px, rgba(255,255,255,0.04) 40px 80px),
    linear-gradient(180deg, #1f7a3a 0%, #145025 100%);
  border-radius: var(--radius-sm);
  padding: 16px 12px;
  position: relative;
  min-height: 380px;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 6px;
}
.mr-lineup__row {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.mr-pitch-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 50px;
}
.mr-pitch-player__num {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--yellow-ink);
  font-family: var(--t-display);
  font-size: 15px;
  line-height: 30px;
  text-align: center;
  letter-spacing: 0;
  border: 2px solid #fff;
}
.mr-pitch-player__name {
  font-family: var(--t-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.mr-pitch-player__num.motm {
  background: linear-gradient(135deg, #F5C400 50%, #fff 50%);
  position: relative;
}

/* Subs strip */
.mr-subs {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.mr-subs__title {
  font-family: var(--t-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.mr-subs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-family: var(--t-meta);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.mr-subs__list span strong {
  color: var(--ink);
  font-weight: 500;
}

/* MOTM card */
.mr-motm {
  margin: 22px var(--gutter) 0;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.mr-motm::before {
  content: '★';
  position: absolute;
  top: -20px; right: -8px;
  font-size: 90px;
  color: var(--yellow);
  opacity: 0.16;
  font-family: var(--t-display);
}
.mr-motm__photo {
  width: 64px; height: 64px;
  border-radius: var(--radius-sm);
  background:
    radial-gradient(ellipse at 50% 35%, var(--canvas-3), var(--ink) 80%);
  position: relative;
  overflow: hidden;
}
.mr-motm__photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(245,196,0,0.12) 0 3px, transparent 3px 6px);
}
.mr-motm__num {
  position: absolute;
  left: 4px; top: 3px;
  font-family: var(--t-display);
  font-size: 18px;
  color: var(--yellow);
  z-index: 1;
}
.mr-motm__label {
  font-family: var(--t-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--yellow);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.mr-motm__name {
  font-family: var(--t-display);
  font-size: 24px;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1;
}
.mr-motm__why {
  font-family: var(--t-italic);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 4px;
  line-height: 1.3;
}