.champion-explorer { margin: 20px 0; color: #1c293b; }
.champion-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.champion-filters label { font-size: 13px; font-weight: 600; }
.champion-filters select, .champion-filters button { min-height: 38px; padding: 7px 12px; border: 1px solid #d5dde8; border-radius: 6px; background: white; color: inherit; font: inherit; }
.champion-filters button { background: #172b45; color: white; cursor: pointer; }
.champion-help, .champion-history p { color: #596b7e; font-size: 13px; line-height: 1.7; margin: 14px 0; }
.champion-history { box-sizing: border-box; width: min(960px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: 28px; background: white; color: #1c293b; border: 1px solid #dbe3ed; border-radius: 10px; overflow: auto; }
.champion-history::backdrop { background: rgb(15 23 42 / 55%); }
.champion-modal-open { overflow: hidden; }
.champion-modal-close { display: block; margin: -12px -10px 8px auto; width: 36px; height: 36px; border: 0; border-radius: 6px; background: #eef2f7; color: #1c293b; font-size: 24px; cursor: pointer; }
.champion-windows { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.champion-windows a { padding: 8px 14px; border: 1px solid #d5dde8; border-radius: 6px; color: #475569; text-decoration: none; font-size: 13px; }
.champion-windows a[aria-current="true"] { background: #172b45; border-color: #172b45; color: white; }
.champion-load-status:empty, .champion-modal-status:empty { display: none; }
.champion-load-status, .champion-modal-status { color: #596b7e; font-size: 13px; }
.champion-history-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.champion-history-heading h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 0; font-size: 17px; }
.champion-history-heading > strong { font-size: 13px; color: #596b7e; }
.champion-chart-scroll, .champion-table-scroll { overflow-x: auto; }
.champion-chart { display: block; width: 100%; min-width: 520px; height: auto; }
.champion-chart text { font: 12px sans-serif; fill: #596b7e; }
.champion-grid { stroke: #e9edf3; stroke-width: 1; }
.champion-zero { stroke: #8796a8; stroke-width: 1.2; stroke-dasharray: 5 4; }
.champion-axis { stroke: #9cabbc; fill: none; }
.champion-line { stroke: #087f65; stroke-width: 2.5; fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.champion-endpoint { fill: #087f65; }
.champion-table { width: 100%; min-width: 650px; border-collapse: collapse; font-size: 14px; }
.champion-table th, .champion-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid #e3e9f0; }
.champion-table th { color: #596b7e; background: #f7f9fc; font-size: 12px; white-space: nowrap; }
.champion-table a { color: inherit; text-decoration: none; }
.champion-table th a { text-decoration: underline; text-underline-offset: 4px; }
.champion-link { display: inline-flex; border-radius: 4px; }
.champion-link:hover { text-decoration: underline; }
.champion-explorer a:focus-visible, .champion-explorer select:focus-visible, .champion-explorer button:focus-visible { outline: 2px solid #087f65; outline-offset: 4px; }
.champion-table td > small { margin-left: 8px; color: #596b7e; }
.champion-table .champion-hot td { background: #edf9f2; }
.champion-table .champion-hot td:first-child { box-shadow: inset 3px 0 #13875e; }
.champion-table .champion-selected .champion-link { outline: 2px solid #087f65; outline-offset: 5px; }
.champion-hot-badge { display: inline-block; margin-left: 10px; padding: 3px 7px; border-radius: 4px; background: #d1efdf; color: #12633f; font-size: 11px; font-weight: 700; white-space: nowrap; }
.champion-insufficient { font-size: 12px; color: #65758b; }
.champion-explorer .lol-champion-identity { display: inline-flex; align-items: center; gap: 9px; }
.champion-explorer .lol-champion-identity img, .champion-explorer .lol-champion-fallback { width: 30px; height: 30px; border-radius: 5px; }
.champion-explorer .lol-champion-fallback { display: inline-grid; place-items: center; background: #e6ecf4; font-size: 11px; }
.champion-explorer .lol-champion-identity small { display: block; margin-top: 3px; color: #65758b; font-size: 11px; }
@media (max-width: 640px) {
  .champion-history { padding: 22px 16px; width: calc(100vw - 20px); }
  .champion-chart { min-width: 0; }
  .champion-windows a { padding: 8px 10px; }
  .champion-history-heading, .champion-history p { padding: 0 6px; }
  .champion-filters { gap: 8px; }
  .champion-table th, .champion-table td { padding: 12px; }
}