.matchup-page {
  background:
    linear-gradient(180deg, rgba(3, 10, 14, 0.96), rgba(1, 4, 6, 0.98)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 92px);
}

.matchup-shell {
  min-height: calc(100vh - 116px);
}

.matchup-note {
  color: var(--muted);
  font-size: 0.72rem;
}

.matchup-note {
  margin-top: 12px;
  line-height: 1.45;
}

.matchup-content {
  min-width: 0;
  padding: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(232, 189, 90, 0.08), transparent 30%),
    rgba(2, 8, 12, 0.98);
}

.matchup-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.matchup-toolbar h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.matchup-filters {
  display: grid;
  grid-template-columns: minmax(170px, 220px);
  gap: 10px;
  align-items: end;
}

.swubase-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.segmented-control {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.segmented-control button {
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
}

.segmented-control button:hover,
.segmented-control button:focus-visible,
.segmented-control button.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.compact-filter {
  width: 136px;
}

.table-search {
  width: min(300px, 100%);
}

.matchup-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.matchup-summary div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.matchup-summary strong,
.matchup-summary span {
  display: block;
}

.matchup-summary strong {
  color: var(--text);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.matchup-summary span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.matrix-wrap {
  position: relative;
  overflow: auto;
  max-height: calc(100vh - 280px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: #07090b;
  scrollbar-color: rgba(79, 255, 230, 0.28) rgba(255, 255, 255, 0.04);
}

.matchup-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: #fff;
  font-size: 0.72rem;
  table-layout: fixed;
}

.matchup-table th,
.matchup-table td {
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0;
}

.matchup-table th {
  background: #080a0d;
  color: #cfd5d8;
  font-weight: 900;
}

.matchup-table thead th {
  position: sticky;
  top: 0;
  z-index: 8;
  height: 214px;
  background: #080a0d;
  vertical-align: bottom;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.09);
}

.matchup-table .total-head {
  left: 0;
  z-index: 10;
  width: 76px;
  min-width: 76px;
  max-width: 76px;
  padding: 10px;
  text-align: left;
}

.matchup-table .row-head {
  position: sticky;
  left: 76px;
  z-index: 9;
  width: 245px;
  min-width: 245px;
  max-width: 245px;
  padding: 8px;
  background: #080a0d;
  text-align: left;
  white-space: normal;
  line-height: 1.25;
}

.matchup-table tbody .total-cell {
  position: sticky;
  left: 0;
  z-index: 6;
  width: 76px;
  min-width: 76px;
  max-width: 76px;
  color: #f3f7f7;
}

.matchup-table tbody .row-head {
  z-index: 7;
  background: #05070a;
}

.vertical-label {
  position: relative;
  z-index: 1;
  width: 78px;
  min-width: 78px;
  max-width: 78px;
  height: 206px;
  display: flex;
  gap: 5px;
  align-items: end;
  justify-content: center;
  padding: 0 3px 8px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background: #080a0d;
}

.archetype-name {
  white-space: nowrap;
  overflow: visible;
  max-height: none;
}

.row-head .archetype-name {
  white-space: normal;
}

.base-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #f3fbff;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.vertical-label .base-marker {
  transform: rotate(180deg);
  writing-mode: horizontal-tb;
  margin-top: 5px;
}

.row-head .base-marker {
  float: right;
  margin: 2px 0 0 8px;
}

.base-code {
  min-width: 10px;
  text-align: center;
}

.base-special {
  padding: 2px 4px;
  border: 1px solid rgba(89, 182, 230, 0.68);
  border-radius: 4px;
  background:
    radial-gradient(circle at 22% 20%, rgba(241, 251, 255, 0.35), transparent 38%),
    linear-gradient(135deg, rgba(29, 90, 153, 0.96), rgba(10, 34, 70, 0.98));
  color: #eaf9ff;
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  text-shadow: 0 0 8px rgba(89, 182, 230, 0.38);
}

.base-icon {
  width: 12px;
  height: 12px;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.18));
}

.aspect-blue {
  background-image: url("./assets/icons/vigilance.webp");
}

.aspect-force {
  background-image: url("./assets/icons/force.webp");
}

.aspect-green {
  background-image: url("./assets/icons/command.webp");
}

.aspect-red {
  background-image: url("./assets/icons/aggression.webp");
}

.aspect-yellow {
  background-image: url("./assets/icons/cunning.webp");
}

.aspect-multi {
  width: 13px;
  height: 13px;
  background-image:
    url("./assets/icons/vigilance.webp"),
    url("./assets/icons/command.webp"),
    url("./assets/icons/aggression.webp"),
    url("./assets/icons/cunning.webp");
  background-position:
    left top,
    right top,
    left bottom,
    right bottom;
  background-size: 7px 7px;
}

.set-tag {
  margin-left: 5px;
  color: #b6bdc0;
  font-size: 0.58rem;
  font-weight: 900;
}

.cell,
.total-cell {
  width: 78px;
  min-width: 78px;
  max-width: 78px;
  height: 36px;
  text-align: center;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.total-cell {
  width: 76px;
  min-width: 76px;
  max-width: 76px;
}

.cell.empty-cell,
.total-cell.empty-cell {
  color: #fff;
  background: #06080a;
}

.cell.win-high,
.total-cell.win-high {
  background: #007a3d;
}

.cell.win-mid,
.total-cell.win-mid {
  background: #0f5f38;
}

.cell.even,
.total-cell.even {
  background: #63520b;
}

.cell.loss-mid,
.total-cell.loss-mid {
  background: #8f151d;
}

.cell.loss-high,
.total-cell.loss-high {
  background: #bd0e1b;
}

.cell small,
.total-cell small {
  display: block;
  margin-top: 3px;
  font-size: 0.58rem;
  opacity: 0.75;
}

.empty-state {
  display: none;
  padding: 40px;
  color: var(--muted);
  text-align: center;
}

.empty-state.is-visible {
  display: block;
}

@media (max-width: 960px) {
  .matchup-toolbar {
    align-items: start;
    flex-direction: column;
  }

  .matchup-filters,
  .matchup-summary {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .swubase-controls,
  .segmented-control {
    width: 100%;
  }

  .segmented-control {
    overflow-x: auto;
  }

  .compact-filter,
  .table-search {
    width: 100%;
  }

  .matrix-wrap {
    max-height: none;
  }
}