/* ==========================================================================
   matches.html: the match feed
   ==========================================================================
   Only what this page has and no other: the filter bar, the results list, the
   latest fight, the records, the activity bars, the kit share and the
   rivalries. Everything else (panels, tabs, tags, deltas, heads, the stat
   strip) comes from zp.css, which is linked after this sheet.
   ========================================================================== */

/* ---------- page head: the stat strip ---------- */
.mx-hero #statKit { display: flex; align-items: center; gap: 8px; font-size: var(--mc-h2r); font-family: var(--f-display); font-weight: 700; -webkit-font-smoothing: antialiased; }
.mx-hero #statKit img { width: 22px; height: 22px; flex: none; }
@media (max-width: 640px) { .mx-hero .zp-stat-k { min-height: 2lh; align-items: flex-start; } }

/* ---------- the filter bar ---------- */
.mx-bar { position: relative; z-index: 20; margin: 0 0 var(--s-5); background: var(--bg); border-bottom: 1px solid var(--line); }
.mx-bar .zp-tabs { border-bottom: 1px solid var(--line); }
.mx-bar .zp-tab { height: 42px; }
.mx-bar .zp-tab img { width: 18px; height: 18px; }
.mx-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; }
.mx-bar .zp-seg > button { cursor: pointer; }
.mx-bar .zp-seg > button:hover { color: var(--text); }
.mx-bar .zp-search { flex: 1 1 240px; max-width: 340px; margin-left: auto; }
@media (min-width: 900px) { .mx-bar { position: sticky; top: var(--top-h); } }
@media (max-width: 600px) {
  .mx-bar .zp-search { max-width: none; flex-basis: 100%; margin-left: 0; order: -1; }
}

/* ---------- layout: the feed, and a rail beside it on wide screens ----------
   On a phone the two columns dissolve into one list, so the player card and the latest
   fight can sit above the feed and the rest of the rail below it. */
.mx-layout { display: flex; flex-direction: column; gap: var(--s-5); }
.mx-main, .mx-rail { display: contents; }
.mx-lookup { order: -2; }
.mx-latest-panel { order: -1; }
@media (min-width: 1100px) {
  .mx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: var(--s-6); }
  .mx-main, .mx-rail { display: grid; gap: var(--s-5); align-content: start; min-width: 0; }
  .mx-lookup, .mx-latest-panel { order: 0; }
}
.mx-latest-panel:has(#latest[style*="none"]) { display: none; }

.mx-cap { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.mx-panel-sub { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-3); }

/* ---------- the results list ---------- */
.mx-feed-panel .zp-panel-head { align-items: flex-start; }
.mx-feed-panel .zp-panel-head > div { min-width: 0; }
.mx-feed { display: grid; }
.mx-day {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 7px var(--s-4); background: var(--bg-band); border-bottom: 1px solid var(--line);
  font-family: var(--f-mono); font-size: var(--mc-s1); letter-spacing: 0; text-transform: uppercase; color: var(--text-3);
}
.mx-day b { font-weight: 500; color: var(--text-2); }

.mx-row {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) 150px 116px; align-items: center; gap: var(--s-4);
  min-height: 58px; padding: 8px var(--s-4);
  border-bottom: 1px solid var(--line); color: inherit; text-decoration: none;
  transition: background var(--fast), box-shadow var(--fast);
}
.mx-row:last-child { border-bottom: 0; }
.mx-row:hover { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.mx-row:focus-visible { outline-offset: -2px; }
.mx-row .zp-kit-ico { width: 36px; height: 36px; }
.mx-row .zp-kit-ico img { width: 22px; height: 22px; }

/* Winner on the left, loser on the right, heads on the inside, the score between them. */
.mx-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s-3); min-width: 0; }
.mx-p { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mx-p.is-w { justify-content: flex-end; text-align: right; }
.mx-nm { display: grid; min-width: 0; gap: 1px; }
.mx-p.is-w .mx-nm { justify-items: end; }
.mx-nm b { font-weight: 600; font-size: var(--fs-base); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mx-p.is-w b { color: var(--text); }
.mx-p.is-l b { color: var(--text-3); font-weight: 500; }
.mx-p.is-l .zp-head { opacity: 0.5; filter: grayscale(0.6); }
.mx-p .zp-delta { font-size: var(--mc-s1); }
.mx-row .mx-sc { display: inline-flex; align-items: center; gap: 3px; min-width: 50px; justify-content: center; padding: 3px 8px; border-radius: var(--r-1); background: var(--bg); box-shadow: var(--well); font-size: var(--px-2); line-height: 1; color: var(--text); }
.mx-sc i { font-style: normal; color: var(--text-3); }
.mx-sc .is-l { color: var(--text-3); }

.mx-info { display: contents; }
.mx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; font-size: var(--fs-sm); line-height: 1.35; color: var(--text-2); }
.mx-meta .mx-kn { flex: 1 0 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mx-meta .mx-dur { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--text-3); }
.mx-meta .zp-tag { height: 18px; padding: 0 6px; font-size: var(--mc-s1); }
.mx-when { display: grid; justify-items: end; gap: 2px; font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; text-align: right; }
.mx-when b { font-weight: 500; color: var(--text-2); }

@media (max-width: 760px) {
  .mx-row { grid-template-columns: 30px minmax(0, 1fr); gap: 6px 10px; padding: 10px 12px; }
  .mx-row .zp-kit-ico { width: 30px; height: 30px; grid-row: 1 / span 2; align-self: start; margin-top: 4px; }
  .mx-row .zp-kit-ico img { width: 18px; height: 18px; }
  .mx-pair { gap: 8px; }
  .mx-p { gap: 7px; }
  .mx-p .zp-head { width: 22px; height: 22px; }
  .mx-nm b { font-size: var(--fs-sm); }
  .mx-row .mx-sc { min-width: 42px; padding: 3px 6px; font-size: var(--px-2); }
  .mx-info { display: flex; align-items: center; justify-content: space-between; gap: 10px; grid-column: 2; min-width: 0; }
  .mx-meta { flex-wrap: nowrap; gap: 8px; font-size: var(--fs-xs); }
  .mx-meta .mx-kn { flex: 0 1 auto; }
  .mx-when { display: flex; gap: 6px; flex: none; }
  .mx-when b { display: none; }
  .mx-day { padding-inline: 12px; }
}
@media (max-width: 380px) { .mx-meta .zp-tag { display: none; } }

/* Loading: the shape of the list, still, until the export arrives. */
.mx-skel { display: grid; }
.mx-skel i { display: block; height: 58px; border-bottom: 1px solid var(--line); background: var(--surface-2); opacity: calc(1 - var(--k, 0) * 0.16); }

.mx-empty { display: grid; justify-items: center; gap: 6px; padding: var(--s-6) var(--s-4); text-align: center; color: var(--text-3); font-size: var(--fs-sm); }
.mx-empty b { font-family: var(--f-display); font-size: var(--mc-s1); font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: var(--text); }
.mx-empty span { max-width: 52ch; text-wrap: pretty; }
.mx-empty .zp-btn { margin-top: var(--s-2); }

.mx-feed-panel .zp-panel-foot { justify-content: center; }
.mx-feed-panel .zp-panel-foot .zp-btn { margin-bottom: 3px; }

/* ---------- the player card (an exact name in the search) ---------- */
.mx-lookup { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: start; border-left: 3px solid var(--accent); }
.mx-lookup > img { width: 56px; height: 56px; border-radius: var(--r-2); background: var(--surface-3); }
.mx-lookup h3 { font-size: var(--mc-s2); text-transform: uppercase; overflow-wrap: anywhere; }
.mx-lookup .mx-lk-sub { margin: 4px 0 0; font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--text-2); }
.mx-lookup .mx-lk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); }
.mx-lookup .zp-btn { margin-top: var(--s-3); }

/* ---------- the latest fight ---------- */
.mx-latest { padding: var(--s-4); display: grid; gap: var(--s-4); }
.mx-latest.is-skel > * { visibility: hidden; }
.mx-lt-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s-3); }
.mx-lt-side { display: grid; justify-items: center; gap: 4px; min-width: 0; text-align: center; color: inherit; text-decoration: none; }
.mx-lt-side .zp-head { width: 48px; height: 48px; }
.mx-lt-side.is-l .zp-head { opacity: 0.5; filter: grayscale(0.6); }
.mx-lt-nm { display: flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; }
.mx-lt-nm b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-lt-side.is-l .mx-lt-nm b { color: var(--text-2); font-weight: 500; }
a.mx-lt-side:hover b { color: var(--accent-hi); }
.mx-lt-side .zp-res { width: 18px; height: 18px; font-size: var(--px-2); }
.mx-lt-mid { display: grid; justify-items: center; gap: 8px; }
.mx-latest .mx-lt-score { font-size: var(--px-4); line-height: 1; display: inline-flex; gap: 6px; }
.mx-lt-score i { font-style: normal; color: var(--text-3); font-size: var(--px-2); align-self: center; }
.mx-lt-score .is-l { color: var(--text-3); }
.mx-lt-stats { width: 100%; font-size: var(--fs-sm); border-top: 1px solid var(--line); }
.mx-lt-stats td { padding: 6px 4px; border-bottom: 1px solid var(--line); font-family: var(--f-display); font-weight: 700; font-size: var(--mc-s1); }
.mx-lt-stats td:first-child { text-align: left; color: var(--text); }
.mx-lt-stats td:last-child { text-align: right; color: var(--text-2); }
.mx-lt-stats th { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: center; font-family: var(--f-mono); font-size: var(--mc-s1); font-weight: 400; letter-spacing: 0; text-transform: uppercase; color: var(--text-3); }

/* ---------- records ---------- */
.mx-records { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; box-shadow: var(--raise); }
.mx-records:empty { display: none; }
.mx-rec { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 12px; background: var(--surface); color: inherit; text-decoration: none; min-width: 0; transition: background var(--fast); }
a.mx-rec:hover { background: var(--surface-2); }
a.mx-rec:focus-visible { outline-offset: -2px; }
.mx-rec .zp-head { grid-row: 1 / span 3; align-self: start; width: 30px; height: 30px; }
.mx-rec .k { font-family: var(--f-mono); font-size: var(--mc-s1); letter-spacing: 0; text-transform: uppercase; color: var(--text-3); line-height: 1.3; }
.mx-rec .v { font-family: var(--f-display); font-weight: 700; font-size: var(--mc-s1); line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mx-rec .s { font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-records.is-skel .mx-rec > * { visibility: hidden; }
.mx-records.is-skel .mx-rec .zp-head { visibility: visible; }
@media (min-width: 640px) and (max-width: 1099px) { .mx-records { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- activity: fights per day ---------- */
.bars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; height: 104px; align-items: end; }
.bar { position: relative; height: 100%; display: flex; align-items: flex-end; }
.bar i { display: block; width: 100%; min-height: 2px; border-radius: var(--r-1) var(--r-1) 0 0; background: var(--accent-lo); transform-origin: bottom; transition: background var(--fast); }
.bar:hover i { background: var(--accent); }
.bar.today i { background: var(--accent); }
.bar b { position: absolute; left: 50%; bottom: calc(var(--h, 2%) + 4px); translate: -50% 0; font-family: var(--f-mono); font-size: var(--mc-s1); font-weight: 500; color: var(--text); opacity: 0; transition: opacity var(--fast); pointer-events: none; }
.bar:hover b { opacity: 1; }
.bar-labels { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: var(--mc-s1); color: var(--text-3); text-align: center; white-space: nowrap; }
@keyframes mx-grow { from { scale: 1 0; } }
@media (prefers-reduced-motion: no-preference) { .bar i { animation: mx-grow 300ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 12ms); } }

/* ---------- kit share ---------- */
.share { display: flex; gap: 2px; height: 12px; border-radius: var(--r-1); overflow: hidden; background: var(--surface-3); }
.share .seg { flex: var(--n) 0 0; background: var(--c); cursor: pointer; transition: opacity var(--fast); }
.share:hover .seg { opacity: 0.6; }
.share .seg:hover { opacity: 1; }
.share-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); }
.share-legend button {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 6px;
  border: 1px solid var(--line-2); border-radius: var(--r-1); background: var(--surface-2); color: var(--text-2);
  font-family: var(--f-mono); font-size: var(--mc-s1); font-variant-numeric: tabular-nums;
  transition: border-color var(--fast), color var(--fast);
}
.share-legend button:hover { border-color: var(--line-3); color: var(--text); }
.share-legend img { width: 16px; height: 16px; }
.share-legend i { width: 8px; height: 8px; border-radius: 1px; background: var(--c); flex: none; }

/* ---------- rivalries ---------- */
.mx-rivals { display: grid; }
.mx-rival { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s-3); padding: 10px var(--s-4); border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; transition: background var(--fast); }
.mx-rival:last-child { border-bottom: 0; }
.mx-rival:hover { background: var(--surface-2); }
.mx-rival:focus-visible { outline-offset: -2px; }
.mx-rival .p { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-sm); color: var(--text-2); }
.mx-rival .p.r { flex-direction: row-reverse; text-align: right; }
.mx-rival .p span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-rival .p.lead { color: var(--text); font-weight: 600; }
.mx-rival .hh { display: grid; justify-items: center; font-family: var(--f-display); font-weight: 700; font-size: var(--mc-s1); line-height: 1; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mx-rival .hh .lead { color: var(--win); }
.mx-rival .hh small { margin-top: 3px; font-family: var(--f-mono); font-weight: 400; font-size: var(--mc-s1); letter-spacing: 0; color: var(--text-3); }

/* ==========================================================================
   Minecraft look (2026-10-19)
   ==========================================================================
   The feed is the game's server list: one entry per fight, the kit in a slot, the
   winner left and the loser right with the score between them in a black box, the
   kit, length and time on the right; a hovered entry gets the grey selection edge.
   The rail holds GUI containers: the latest fight as a small duel screen, the
   records as a list, the fights per day as block columns, the kit share as a
   segmented bar with button chips, the rivalries on two lines each so the names
   have room. This sheet is linked before zp.css and mc.css, so rules that meet a
   shared class carry the body[data-page] prefix.
   ========================================================================== */
body[data-page="matches"] .mx-hero #statKit { display: block; font-size: var(--mc-s1); font-family: var(--mc-font); font-weight: 400; line-height: 1.3; white-space: normal; min-height: 30px; }
body[data-page="matches"] .mx-hero #statKit img { display: inline-block; width: 24px; height: 24px; margin-right: 6px; vertical-align: -6px; image-rendering: pixelated; }

/* the latest results in the head: "beat Frostyh" may take a second line rather than an ellipsis */
@media (min-width: 601px) { body[data-page="matches"] .ph-rows .who small { white-space: normal; line-height: 1.3; } }
@media (max-width: 600px) {
  body[data-page="matches"] .ph-rows .end small { white-space: normal; text-align: right; line-height: 1.3; max-width: 6em; }
}

/* the filter bar: a dark strip with the game's black edges */
.mx-bar { background: rgba(9, 7, 14, 0.94); border-bottom: 0; box-shadow: 0 2px 0 #000; }
body[data-page="matches"] .mx-bar .zp-tabs { border-bottom: 0; padding: 6px 0; }
body[data-page="matches"] .mx-bar .zp-tab { height: auto; min-height: 40px; }
body[data-page="matches"] .mx-bar .zp-tab img { width: 18px; height: 18px; image-rendering: pixelated; }
.mx-bar-row { padding: 6px 0 12px; }
.mx-bar .zp-seg > button:hover { color: var(--mc-hover); }

.mx-cap { font-family: var(--mc-font); font-size: var(--mc-s1); color: var(--mc-gui-ink-2); text-shadow: var(--mc-shadow); }
.mx-panel-sub { font-size: var(--mc-s1); color: var(--mc-gui-ink-2); text-shadow: var(--mc-shadow); line-height: 1.4; }

/* ---------- the feed ---------- */
.mx-feed { padding: 4px; gap: 0; }
.mx-day {
  padding: 10px 10px 6px; background: none; border-bottom: 0; box-shadow: inset 0 -2px 0 #2a2533;
  font-family: var(--mc-font); color: var(--mc-gray); flex-wrap: wrap;
}
.mx-day b { font-weight: 400; color: var(--mc-yellow); }
.mx-day .n { white-space: nowrap; }
.mx-day:not(:first-child) { margin-top: 6px; }
.mx-row {
  grid-template-columns: 40px minmax(0, 1fr) 170px 110px; gap: 14px;
  min-height: 60px; padding: 6px 10px; border-bottom: 0; transition: none;
}
.mx-row:nth-of-type(even) { background: rgba(255, 255, 255, 0.035); }
.mx-row:hover { background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 2px #808080; }
.mx-row:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
body[data-page="matches"] .mx-row .zp-kit-ico {
  width: 40px; height: 40px; background: none; box-shadow: none; border-radius: 0;
  border: 2px solid transparent; border-image: var(--mc-slot) 1 fill / 2px / 0 stretch;
}
body[data-page="matches"] .mx-row .zp-kit-ico img { width: 28px; height: 28px; image-rendering: pixelated; }
.mx-pair { gap: 10px; }
.mx-p { gap: 8px; }
.mx-nm b { font-weight: 400; font-size: var(--mc-s1); }
.mx-p.is-l b { color: var(--mc-gray); font-weight: 400; }
body[data-page="matches"] .mx-p .zp-head { width: 28px; height: 28px; }
body[data-page="matches"] .mx-p.is-l .zp-head { opacity: 0.55; filter: grayscale(0.7); }
body[data-page="matches"] .mx-row .mx-sc {
  min-width: 58px; padding: 6px 8px; background: #000; box-shadow: inset 0 0 0 2px #3a3446; border-radius: 0;
  font-size: var(--mc-s1); gap: 4px;
}
.mx-sc i, .mx-sc .is-l { color: var(--mc-gray); }
.mx-meta { font-size: var(--mc-s1); gap: 2px 10px; color: #fff; }
.mx-meta .mx-dur { font-family: var(--mc-font); font-size: var(--mc-s1); color: var(--mc-gray); }
body[data-page="matches"] .mx-meta .zp-tag { height: 24px; padding: 0 6px; }
.mx-when { font-family: var(--mc-font); font-size: var(--mc-s1); color: var(--mc-gray); }
.mx-when b { font-weight: 400; color: #fff; }

/* a phone: the two players on one line each with the score beside them, the kit
   and the times on a line underneath, the kit slot at its start */
@media (max-width: 760px) {
  .mx-row { grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: "p p" "k i"; gap: 6px 10px; padding: 10px 8px; }
  .mx-pair { grid-area: p; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "w s" "l s"; gap: 4px 12px; }
  .mx-p.is-w { grid-area: w; flex-direction: row-reverse; justify-content: flex-end; text-align: left; }
  .mx-p.is-l { grid-area: l; }
  .mx-p.is-w .mx-nm { justify-items: start; }
  .mx-nm { display: flex; align-items: baseline; gap: 10px; }
  .mx-nm b { flex: 0 1 auto; min-width: 0; }
  body[data-page="matches"] .mx-p .zp-head { width: 24px; height: 24px; }
  body[data-page="matches"] .mx-row .mx-sc { grid-area: s; align-self: center; flex-direction: column; min-width: 40px; padding: 4px 8px; line-height: 1.2; }
  body[data-page="matches"] .mx-row .mx-sc i { display: none; }
  body[data-page="matches"] .mx-row .zp-kit-ico { grid-area: k; width: 32px; height: 32px; margin: 0; align-self: center; }
  body[data-page="matches"] .mx-row .zp-kit-ico img { width: 20px; height: 20px; }
  .mx-info { grid-area: i; }
  .mx-meta { font-size: var(--mc-s1); }
  .mx-meta .mx-kn { flex: 0 1 auto; }
  .mx-day { padding-inline: 8px; }
}
@media (max-width: 400px) { .mx-meta .mx-dur { display: none; } }

.mx-skel i { border-bottom: 0; background: rgba(255, 255, 255, 0.04); margin-bottom: 2px; }
.mx-empty { color: var(--mc-gray); }
.mx-empty b { font-family: var(--mc-font); font-weight: 400; font-size: var(--mc-s2); color: #fff; }

/* the player card */
body[data-page="matches"] .mx-lookup { border-left-width: 8px; }
body[data-page="matches"] .mx-lookup > img { border-radius: 0; image-rendering: pixelated; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); }
.mx-lookup h3 { font-size: var(--mc-s2); font-weight: 400; }
.mx-lookup .mx-lk-sub { font-family: var(--mc-font); font-size: var(--mc-s1); }

/* ---------- the latest fight: a small duel screen ---------- */
.mx-latest { padding: 12px 10px; gap: 14px; }
.mx-lt-top { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "a s b" "k k k"; gap: 10px 8px; }
.mx-lt-mid { display: contents; }
.mx-lt-top > .mx-lt-side:first-child { grid-area: a; }
.mx-lt-top > .mx-lt-side:last-child { grid-area: b; }
.mx-lt-top .mx-lt-score { grid-area: s; align-self: center; }
body[data-page="matches"] .mx-lt-top .zp-kchip { grid-area: k; justify-self: center; height: 32px; padding: 0 10px 0 6px; }
body[data-page="matches"] .mx-lt-top .zp-kchip img { width: 20px; height: 20px; image-rendering: pixelated; }
.mx-lt-side { position: relative; gap: 6px; }
body[data-page="matches"] .mx-lt-side .zp-head { width: 48px; height: 48px; }
body[data-page="matches"] .mx-lt-side.is-l .zp-head { opacity: 0.55; filter: grayscale(0.7); }
.mx-lt-nm { justify-content: center; width: 100%; }
.mx-lt-nm b { font-weight: 400; }
.mx-lt-side.is-l .mx-lt-nm b { color: var(--mc-gray); font-weight: 400; }
a.mx-lt-side:hover b { color: var(--mc-hover); }
/* the W and L badges sit on the head's corner, like an item count, so the name has the width */
body[data-page="matches"] .mx-lt-side .zp-res { position: absolute; top: 30px; left: calc(50% + 12px); width: 22px; height: 22px; font-size: var(--mc-s1); background: #0b0a10; }
body[data-page="matches"] .mx-latest .mx-lt-score { font-size: var(--mc-s4); gap: 8px; }
.mx-lt-score i { font-size: var(--mc-s2); color: var(--mc-gray); }
.mx-lt-score .is-l { color: var(--mc-gray); }
.mx-lt-stats { border-top: 0; font-size: var(--mc-s1); border-collapse: collapse; }
.mx-lt-stats tr:nth-child(odd) { background: rgba(255, 255, 255, 0.035); }
.mx-lt-stats td, .mx-lt-stats th { border-bottom: 0; padding: 5px 8px; font-family: var(--mc-font); font-weight: 400; }
.mx-lt-stats td:first-child { color: #fff; }
.mx-lt-stats td:last-child { color: var(--mc-gray); }
.mx-lt-stats th { color: var(--mc-gray); }
body[data-page="matches"] .mx-latest .zp-btn.is-block { display: flex; width: 100%; }

/* ---------- records: one list, the value on the right ---------- */
.mx-records {
  grid-template-columns: minmax(0, 1fr); gap: 0; padding: 4px; background: none; border: 8px solid transparent; border-radius: 0; box-shadow: none; overflow: visible;
  border-image: var(--mc-gui-dark) 4 fill / 8px / 0 stretch;
}
.mx-rec { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "h k v" "h s s"; gap: 0 10px; padding: 8px; background: none; transition: none; }
.mx-rec:nth-child(even) { background: rgba(255, 255, 255, 0.035); }
a.mx-rec:hover { background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 2px #808080; }
body[data-page="matches"] .mx-rec .zp-head { grid-area: h; grid-row: auto; width: 32px; height: 32px; align-self: center; }
.mx-rec .k { grid-area: k; font-family: var(--mc-font); color: var(--mc-gray); }
.mx-rec .v { grid-area: v; font-family: var(--mc-font); font-weight: 400; color: var(--mc-yellow); line-height: 1.3; }
.mx-rec .s { grid-area: s; font-size: var(--mc-s1); color: #fff; }
@media (min-width: 640px) and (max-width: 1099px) { .mx-records { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- fights per day: block columns ---------- */
body[data-page="matches"] .zp-panel-body { padding: 12px 10px 10px; }
.bars { gap: 4px; height: 120px; padding-top: 22px; }
.bar i {
  border-radius: 0; background: #6e54c8; min-height: 4px;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.3), inset -2px -2px 0 rgba(0, 0, 0, 0.35);
}
.bar:hover i, .bar.today i { background: var(--accent); }
.bar b { font-family: var(--mc-font); font-weight: 400; font-size: var(--mc-s1); color: #fff; }
.bar-labels { border-top: 0; box-shadow: 0 -2px 0 #2a2533; font-family: var(--mc-font); color: var(--mc-gray); padding-top: 6px; }
@media (prefers-reduced-motion: reduce) { .bar i { animation: none; } }
html[data-lite] .bar i { animation: none; }

/* ---------- kit share: a segmented bar with the black edge, chips as small buttons ---------- */
.share { height: 14px; gap: 2px; border-radius: 0; background: #000; box-shadow: 0 0 0 2px #000; margin: 4px 2px 0; }
.share .seg { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.35); transition: none; }
.share-legend { margin-top: 14px; gap: 4px; }
body[data-page="matches"] .share-legend button {
  height: auto; min-height: 34px; padding: 0 10px 0 6px; gap: 6px; border-radius: 0; background: none;
  border: 6px solid transparent;
  border-image: var(--mc-btn) 3 fill / 6px / 0 repeat;
  font-family: var(--mc-font); font-size: var(--mc-s1); color: #e0e0e0; text-shadow: var(--mc-shadow); cursor: pointer; transition: none;
}
body[data-page="matches"] .share-legend button:hover, body[data-page="matches"] .share-legend button:focus-visible { border-image-source: var(--mc-btn-hover); color: var(--mc-hover); outline: none; }
body[data-page="matches"] .share-legend img { width: 18px; height: 18px; image-rendering: pixelated; }
.share-legend i { width: 10px; height: 10px; border-radius: 0; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); }

/* ---------- rivalries: the two names on top, the record under them ---------- */
.mx-rivals { padding: 4px; }
.mx-rival { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a b" "h h"; gap: 4px 12px; padding: 8px; border-bottom: 0; transition: none; }
.mx-rival:nth-child(even) { background: rgba(255, 255, 255, 0.035); }
.mx-rival:hover { background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 2px #808080; }
.mx-rival > .p:first-child { grid-area: a; }
.mx-rival > .p.r { grid-area: b; }
.mx-rival .hh { grid-area: h; grid-auto-flow: column; justify-content: center; align-items: baseline; gap: 12px; font-family: var(--mc-font); font-weight: 400; color: var(--mc-gray); }
.mx-rival .p { font-size: var(--mc-s1); color: var(--mc-gray); }
.mx-rival .p.lead { color: #fff; font-weight: 400; }
body[data-page="matches"] .mx-rival .zp-head.is-sm { width: 24px; height: 24px; }
.mx-rival .hh .lead { color: var(--mc-green); }
.mx-rival .hh small { margin-top: 0; font-family: var(--mc-font); color: var(--mc-gray); }