.match-centre-view {
  --mc-bg: #07111f;
  --mc-panel: #0b1728;
  --mc-panel-deep: #081321;
  --mc-panel-soft: #0d1a2c;
  --mc-text: #ffffff;
  --mc-muted: #b7c1cf;
  --mc-muted-2: #8795a8;
  --mc-gold: #f0c545;
  --mc-blue-soft: #122b4e;
  --mc-green: #55d982;
  --mc-green-soft: #102c20;
  --mc-yellow: #e0b840;
  --mc-yellow-soft: #302914;
  --mc-red: #e05a67;
  --mc-red-soft: #32171d;
  --mc-line: #20354f;
  --mc-line-soft: rgba(255, 255, 255, 0.08);

  width: 100%;
  background: var(--mc-bg);
  color: var(--mc-text);
}

.match-centre-view *,
.match-centre-view *::before,
.match-centre-view *::after {
  box-sizing: border-box;
}

.match-centre-view button {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid #36516f;
  border-radius: 0;
  background: #12243b;
  color: #ffffff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

.match-centre-view button:hover {
  background: #183150;
  border-color: #4a6d93;
}

.match-centre-view button:focus-visible,
.match-centre-view a:focus-visible {
  outline: 2px solid var(--mc-gold);
  outline-offset: 2px;
}

.match-centre-view button.danger {
  background: #101b2b;
  color: #ffffff;
  border-color: #66434a;
}

.match-centre-view button.danger:hover {
  background: #27171c;
  border-color: var(--mc-red);
}

.match-centre-view .match-page {
  width: 100%;
  margin: 0;
  padding: 18px;
  overflow-x: hidden;
  background: var(--mc-bg);
}

.match-centre-view .hero,
.match-centre-view .panel {
  width: 100%;
  margin: 0 0 14px;
  padding: 18px;
  overflow: hidden;
  background: var(--mc-panel);
  border: 1px solid var(--mc-line);
  border-radius: 0;
  box-shadow: none;
}

.match-centre-view .hero {
  border-top: 3px solid var(--mc-gold);
}

.match-centre-view .eyebrow {
  margin: 0 0 18px;
  color: var(--mc-gold);
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.match-centre-view .teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.match-centre-view .team {
  min-width: 0;
  text-align: center;
}

.match-centre-view .team h1 {
  margin: 12px 0 6px;
  color: #ffffff;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.match-centre-view .team p {
  margin: 0;
  color: var(--mc-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.match-centre-view .club-logo {
  width: 138px;
  height: 138px;
  margin: 0 auto;
  padding: 0;
  display: none;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.match-centre-view .scorebox {
  min-height: 112px;
  padding: 14px;
  display: grid;
  place-items: center;
  text-align: center;
  background: #06101c;
  border: 1px solid #806c28;
  border-radius: 0;
}

.match-centre-view .scorebox div {
  color: #ffffff;
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
}

.match-centre-view .scorebox span {
  margin-top: 8px;
  color: var(--mc-gold);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.match-centre-view .scorebox.spoiler div {
  filter: blur(8px);
}

.match-centre-view .match-meta {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  color: var(--mc-muted);
}

.match-centre-view .match-meta span {
  min-height: 38px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mc-panel-deep);
  border: 1px solid var(--mc-line);
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.match-centre-view .match-meta span:empty {
  display: none;
}

.match-centre-view .actions {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.match-centre-view .actions button {
  width: 100%;
}

.match-centre-view #watchBtn,
.match-centre-view #printerBtn {
  border-color: #3c638d;
}

.match-centre-view .hidden {
  display: none;
}

.match-centre-view .panel h2 {
  margin: 0 0 16px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.match-centre-view .panel h3 {
  margin: 0 0 10px;
  color: var(--mc-gold);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.match-centre-view .lineups {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.match-centre-view .lineups > div {
  min-width: 0;
  padding: 12px;
  background: var(--mc-panel-deep);
  border: 1px solid var(--mc-line);
}

.match-centre-view .lineups ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  list-style: none;
}

.match-centre-view .lineups li {
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #091624;
  border: 0;
  border-bottom: 1px solid var(--mc-line-soft);
  border-radius: 0;
  color: #eef3f8;
  font-size: 13px;
  font-weight: 600;
}

.match-centre-view .lineups li:nth-child(even) {
  background: #0b192a;
}

.match-centre-view .lineups li:last-child {
  border-bottom: 0;
}

.match-centre-view .lineups li span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.match-centre-view .lineups .pos {
  min-width: 30px;
  flex: 0 0 auto;
  color: var(--mc-gold);
  font-weight: 900;
  text-align: right;
}

.match-centre-view .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.match-centre-view .sticky-feed-head {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: -18px -18px 14px;
  padding: 12px 18px;
  background: var(--mc-panel-soft);
  border: 0;
  border-bottom: 1px solid var(--mc-line);
  border-radius: 0;
}

.match-centre-view .sticky-feed-head h2 {
  margin: 0;
}

.match-centre-view .feed-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.match-centre-view .speed-buttons {
  display: flex;
  gap: 5px;
}

.match-centre-view .speed-btn {
  min-height: 38px;
  padding: 0 12px;
  background: #0d1a2c;
  color: #c9d2df;
  border-color: #2a4059;
  font-size: 11px;
}

.match-centre-view .speed-btn.active {
  background: var(--mc-gold);
  color: #07111f;
  border-color: var(--mc-gold);
}

.match-centre-view .progress-wrap {
  height: 8px;
  margin: 10px 0 16px;
  overflow: hidden;
  background: #142238;
  border: 1px solid var(--mc-line);
  border-radius: 0;
}

.match-centre-view .progress-bar {
  width: 0%;
  height: 100%;
  background: var(--mc-gold);
}

.match-centre-view .timeline {
  display: grid;
  gap: 8px;
}

.match-centre-view .event {
  padding: 12px 13px;
  background: #091624;
  border: 1px solid var(--mc-line);
  border-left-width: 4px;
  border-radius: 0;
}

.match-centre-view .event.goal {
  background: var(--mc-green-soft);
  border-color: #2d7a4d;
  border-left-color: var(--mc-green);
}

.match-centre-view .event.yellow-card {
  background: var(--mc-yellow-soft);
  border-color: #776428;
  border-left-color: var(--mc-yellow);
}

.match-centre-view .event.red-card {
  background: var(--mc-red-soft);
  border-color: #7a3842;
  border-left-color: var(--mc-red);
}

.match-centre-view .event.sub,
.match-centre-view .event.tactic {
  background: var(--mc-blue-soft);
  border-color: #315579;
  border-left-color: #5aa9ff;
}

.match-centre-view .event.marker {
  background: #181c21;
  border-color: #716026;
  border-left-color: var(--mc-gold);
}

.match-centre-view .event-minute {
  margin-bottom: 5px;
  color: var(--mc-gold);
  font-size: 13px;
  font-weight: 900;
}

.match-centre-view .event-text {
  color: #e3e9f0;
  white-space: pre-wrap;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.match-centre-view .vidi-printer {
  min-height: 420px;
  max-height: 620px;
  padding: 16px;
  overflow-y: auto;
  background: #040a11;
  border: 1px solid #26384f;
  border-radius: 0;
  box-shadow: none;
  color: #e8edf4;
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
}

.match-centre-view .printer-line,
.match-centre-view .printer-line:first-child,
.match-centre-view .printer-line.goal,
.match-centre-view .printer-line.yellow-card,
.match-centre-view .printer-line.red-card,
.match-centre-view .printer-line.sub,
.match-centre-view .printer-line.tactic,
.match-centre-view .printer-line.marker {
  padding: 9px 0;
  color: #e8edf4;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.match-centre-view .printer-line:first-child {
  color: #ffffff;
  font-weight: 700;
}

.match-centre-view .final-score {
  margin: 0 0 16px;
  padding: 16px;
  background: #06101c;
  color: #ffffff;
  border: 1px solid #806c28;
  border-radius: 0;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}

.match-centre-view .cards-grid {
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.match-centre-view .info-card {
  min-width: 0;
  padding: 14px;
  background: var(--mc-panel-deep);
  border: 1px solid var(--mc-line);
  border-radius: 0;
}

.match-centre-view .info-card p {
  margin: 7px 0;
  color: #dce4ed;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.match-centre-view .stats-bars {
  margin-bottom: 22px;
  display: grid;
  gap: 12px;
}

.match-centre-view .stat-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  gap: 10px;
  align-items: center;
}

.match-centre-view .stat-label {
  grid-column: 1 / -1;
  color: var(--mc-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.match-centre-view .stat-num {
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

.match-centre-view .stat-track {
  height: 12px;
  display: grid;
  grid-template-columns: var(--homeWidth) var(--awayWidth);
  overflow: hidden;
  background: #142238;
  border: 1px solid var(--mc-line);
  border-radius: 0;
}

.match-centre-view .stat-home {
  background: var(--mc-gold);
}

.match-centre-view .stat-away {
  background: #5a8fc8;
}

.match-centre-view .player-stats {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.match-centre-view .player-stats table {
  width: max-content;
  min-width: 100%;
  margin-bottom: 22px;
  border-collapse: collapse;
}

.match-centre-view .player-stats th,
.match-centre-view .player-stats td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--mc-line-soft);
  color: #e4eaf1;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
}

.match-centre-view .player-stats th {
  background: #162b6f;
  color: #ffffff;
  font-weight: 800;
}

.match-centre-view .player-stats tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02);
}

.match-centre-view pre {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  background: #040a11;
  color: #e8edf4;
  border: 1px solid #26384f;
  border-radius: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-wrap;
  tab-size: 4;
}

.match-centre-view .match-centre-return-bottom {
  width: 100%;
  margin: 18px 0 6px;
  display: flex;
  justify-content: center;
}

.match-centre-view .match-centre-return-bottom a {
  min-height: 48px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #12243b;
  border: 1px solid #36516f;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
}

.match-centre-view .match-centre-return-bottom a:hover {
  background: #183150;
  border-color: var(--mc-gold);
  color: var(--mc-gold);
}

.match-centre-view .match-page.is-lineup-intro .match-centre-return-bottom {
  display: none;
}

.match-centre-view .match-centre-error {
  min-height: 320px;
  padding: 40px 24px;
  background: var(--mc-panel);
  border-top: 3px solid var(--mc-gold);
  text-align: center;
}

.match-centre-view .match-centre-error h1 {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: 24px;
}

.match-centre-view .match-centre-error p {
  margin: 0 0 22px;
  color: var(--mc-muted);
  font-size: 14px;
  font-weight: 600;
}

.match-centre-view .match-centre-error a {
  display: inline-flex;
  min-height: 44px;
  padding: 0 18px;
  align-items: center;
  justify-content: center;
  background: #12243b;
  border: 1px solid #36516f;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.match-centre-view .match-centre-error a:hover {
  background: #183150;
  border-color: #4a6d93;
  color: var(--mc-gold);
}