/* The public matchup matrix: a heat map of deck against deck win rates. */
.mx-card { padding: 1.1rem; }
.mx-scroll { overflow-x: auto; padding-bottom: 0.5rem; scrollbar-width: thin; }
.mx-table { border-collapse: separate; border-spacing: 3px; margin: 0; }
.mx-table th, .mx-table td { padding: 0; }

.mx-corner { vertical-align: bottom; min-width: 190px; }
.mx-corner span { display: block; padding: 0 0.4rem 0.4rem; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted, #8c9ab0); text-align: left; }

.mx-col { height: 132px; width: 44px; min-width: 44px; vertical-align: bottom; }
.mx-col span { display: block; margin: 0 auto; height: 126px; width: 18px; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 600; line-height: 18px; color: var(--text-secondary, #c4d1e3); text-align: left; }

.mx-row { position: sticky; left: 0; z-index: 2; min-width: 190px; max-width: 220px; padding: 0.3rem 0.6rem !important; text-align: left; background: var(--bg-card, #171220); border-radius: 8px; }
.mx-row b { display: block; font-size: 13px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-row small { display: block; font-size: 11px; line-height: 1.3; color: var(--text-muted, #8c9ab0); white-space: nowrap; }

.mx-cell { width: 44px; min-width: 44px; height: 40px; text-align: center; border-radius: 8px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, 0.06); cursor: help; }
.mx-cell.is-w2 { background: rgba(34, 197, 94, 0.6); }
.mx-cell.is-w1 { background: rgba(34, 197, 94, 0.3); color: #d6f7e3; }
.mx-cell.is-even { background: rgba(255, 255, 255, 0.1); color: var(--text-secondary, #c4d1e3); }
.mx-cell.is-l1 { background: rgba(251, 113, 133, 0.3); color: #fde0e5; }
.mx-cell.is-l2 { background: rgba(251, 113, 133, 0.6); }
.mx-cell.is-mirror, .mx-cell.is-none { background: transparent; color: var(--text-muted, #8c9ab0); cursor: default; font-weight: 500; }
.mx-cell.is-thin { opacity: 0.5; }
.mx-table tbody tr:hover .mx-cell:not(.is-mirror):not(.is-none) { filter: brightness(1.15); }

.mx-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.9rem; font-size: 12px; color: var(--text-muted, #8c9ab0); }
.mx-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.mx-legend i { display: inline-block; width: 16px; height: 16px; border-radius: 5px; }
.mx-legend i.is-l2 { background: rgba(251, 113, 133, 0.6); }
.mx-legend i.is-l1 { background: rgba(251, 113, 133, 0.3); }
.mx-legend i.is-even { background: rgba(255, 255, 255, 0.12); }
.mx-legend i.is-w1 { background: rgba(34, 197, 94, 0.3); }
.mx-legend i.is-w2 { background: rgba(34, 197, 94, 0.6); }
.mx-legend i.is-thin { background: rgba(255, 255, 255, 0.12); opacity: 0.5; }

.mx-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.mx-rank { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.1rem; }
.mx-rank h3 { margin: 0 0 0.3rem; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted, #8c9ab0); }
.mx-rank div { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.7rem; border-radius: 10px; background: var(--bg-dark, #110d18); }
.mx-rank b { font-size: 14px; }
.mx-rank span { font-size: 13px; color: var(--text-muted, #8c9ab0); white-space: nowrap; }

.mx-read { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.8rem; }
.mx-read h2 { margin: 0; font-size: 1.15rem; }
.mx-read ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 14px; line-height: 1.55; }
.mx-read li b { color: #fff; }
.mx-source { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted, #8c9ab0); }
.mx-source a { color: var(--accent-secondary, #d998ff); }

@media (max-width: 767.98px) {
    .mx-card { padding: 0.8rem; }
    .mx-two { grid-template-columns: minmax(0, 1fr); }
    .mx-corner, .mx-row { min-width: 132px; max-width: 150px; }
    .mx-row small { display: none; }
}