.matchup-extremes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.matchup-extreme {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: 10px;
  background: var(--panel-2);
}

.matchup-extreme.good { border-left-color: var(--good); }
.matchup-extreme.bad { border-left-color: var(--bad); }
.matchup-extreme span, .matchup-extreme small { color: var(--muted); }
.matchup-extreme strong { font-size: 1.05rem; }
.compact-heading { align-items: start; margin: 20px 0 10px; }
.compact-heading h3 { margin-bottom: 3px; }

@media (max-width: 800px) {
  .matchup-extremes { grid-template-columns: 1fr; }
}

.bubble-warning {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(246, 195, 68, 0.35);
  border-radius: 9px;
  background: rgba(246, 195, 68, 0.06);
  color: var(--muted);
  font-size: 0.85rem;
}

.bubble-grid { display: grid; gap: 14px; }
.bubble-card { padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); }
.bubble-card-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.bubble-card-heading > div { display: flex; align-items: center; gap: 10px; }
.bubble-card-heading small { color: var(--muted); }
.bubble-cut-calculation { margin: .75rem 0 1rem; color: var(--muted); font-size: .84rem; }
.bubble-cut-calculation strong { color: var(--text); }
.conversion-lift-table { margin-top: 12px; }
.conversion-lift-table summary { margin-bottom: 10px; }
.bubble-table { max-height: 26rem; overflow-y: auto; }
.bubble-row.at td { background: rgba(246, 195, 68, 0.1); border-top: 2px solid var(--accent); }
.bubble-row.above td:last-child { color: var(--good); }
.bubble-row.below td:last-child { color: var(--bad); }
.opponent-strength-proxy { display: flex; flex-direction: column; gap: 3px; margin: 12px 0; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.opponent-strength-proxy span, .opponent-strength-proxy small { color: var(--muted); }
.opponent-strength-proxy strong { font-size: 1.45rem; }
.rank-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.rank-summary article { display: flex; flex-direction: column; gap: 4px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.rank-summary span, .rank-summary small { color: var(--muted); }
.rank-summary strong { font-size: .9rem; }
.player-performance-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
.player-performance-summary article { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.player-performance-summary span, .player-performance-summary small { color: var(--muted); }
.player-performance-summary strong { font-size: 1.25rem; }
.player-record-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.player-record-grid article { min-width: 0; }
.player-record-grid h4 { margin: 0 0 8px; }

@media (max-width: 800px) {
  .bubble-card-heading { display: block; }
  .bubble-card-heading small { display: block; margin-top: 7px; }
  .rank-summary { grid-template-columns: 1fr; }
  .player-performance-summary, .player-record-grid { grid-template-columns: 1fr; }
}
.comparison-toolbar {
  align-items: end;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(220px, 0.35fr) 1fr;
  margin-bottom: 1rem;
}

.comparison-toolbar p { margin: 0 0 .3rem; }

.comparison-chart-grid {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.comparison-table-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1rem;
}

.comparison-table-grid article {
  background: rgba(18, 26, 37, .72);
  border: 1px solid rgba(145, 158, 178, .18);
  border-radius: .8rem;
  padding: 1rem;
}

.comparison-pooled { background: rgba(246, 195, 68, .08); }

.player-color-dot {
  background: var(--player-color);
  border-radius: 50%;
  display: inline-block;
  height: .65rem;
  margin-right: .45rem;
  width: .65rem;
}

@media (max-width: 1100px) {
  .comparison-chart-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .comparison-toolbar, .comparison-table-grid { grid-template-columns: 1fr; }
}