[data-champion-historical-context] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  min-width: 0;
  margin: 16px 0;
  padding: 14px 18px;
  border: 1px solid #806c3c;
  border-inline-start: 4px solid #e8bf61;
  border-radius: 8px;
  background: #211f18;
  color: #eee5cc;
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* Readable champion level references, including narrow screens and large text. */
.champion-profile-page .champion-progression { min-width: 0; }
.champion-profile-page .champion-progression :is(p,small,strong,th,td,summary span,footer) {
  font-size: .9375rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.champion-profile-page .champion-progression > header > p { font-size: 1rem; color: #c6d2dc; }
.champion-profile-page .champion-progression > header :is(h2,p),
.champion-profile-page .champion-rank-grid > article > header > div { min-width: 0; overflow-wrap: anywhere; }
.champion-profile-page .champion-progression > p { margin: 16px; }
.champion-profile-page .champion-level-highlights {
  grid-template-columns: repeat(auto-fit,minmax(min(100%,10rem),1fr));
  gap: 10px;
  padding: 16px;
  background: transparent;
}
.champion-profile-page .champion-level-highlights article { padding: 16px; border: 1px solid #3b4d5a; border-block-start: 4px solid #e5b74f; border-radius: 8px; }
.champion-profile-page .champion-level-highlights small { font-size: .875rem; color: #f2d078; }
.champion-profile-page .champion-level-highlights strong { font-size: 1.125rem; line-height: 1.4; }
.champion-profile-page .champion-level-highlights strong span { display: inline; color: inherit; font-size: inherit; line-height: inherit; }
.champion-profile-page .champion-level-highlights span { font-size: .9375rem; line-height: 1.6; color: #c3d0db; }
.champion-profile-page .champion-rank-grid {
  grid-template-columns: repeat(auto-fit,minmax(min(100%,28rem),1fr));
  gap: 14px;
  background: transparent;
}
.champion-profile-page .champion-rank-grid > article { padding: 18px; border: 1px solid #3b4d5a; border-block-start: 4px solid var(--rank-tone); border-radius: 8px; }
.champion-profile-page .champion-rank-grid header small { font-size: .875rem; }
.champion-profile-page .champion-rank-grid header strong { font-size: 1.125rem; line-height: 1.4; }
.champion-profile-page .champion-rank-grid > article > p { min-height: 0; color: #c3d0db; }
.champion-profile-page .champion-cooldown-ranks { gap: 10px; }
.champion-profile-page .champion-cooldown-ranks span { flex-basis: 7rem; padding: 12px; }
.champion-profile-page .champion-cooldown-ranks small { font-size: .875rem; color: #b6c8d5; }
.champion-profile-page .champion-cooldown-ranks b { font-size: 1rem; line-height: 1.5; color: #f1f7fa; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.champion-profile-page .champion-level-mechanic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 16px;
  padding: 16px;
  border: 1px solid #49616c;
  border-inline-start: 4px solid #75ddd3;
  border-radius: 8px;
  background: #101e27;
}
.champion-profile-page .champion-level-mechanic p { flex: 1 1 18rem; min-width: 0; margin: 0; color: #d1e2eb; }
.champion-profile-page .champion-level-mechanic a { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 44px; max-width: 100%; padding: 10px 14px; border: 1px solid #5e8193; border-radius: 6px; font-size: .9375rem; line-height: 1.5; color: #9eeaf0; overflow-wrap: anywhere; }
.champion-profile-page .champion-level-mechanic a:focus-visible,
.champion-profile-page .champion-level-table summary:focus-visible { outline: 3px solid #8febee; outline-offset: 3px; }
.champion-profile-page .champion-level-table summary { min-height: 48px; flex-wrap: wrap; padding: 16px; }
.champion-profile-page .champion-level-table summary small { font-size: .875rem; }
.champion-profile-page .champion-level-table > div { max-width: 100%; overscroll-behavior-inline: contain; }
.champion-profile-page .champion-level-table table { min-width: 42rem; text-align: start; }
.champion-profile-page .champion-level-table :is(th,td) { padding: 14px 16px; font-size: .9375rem; line-height: 1.6; }
.champion-profile-page .champion-level-table tbody tr:nth-child(even) { background: #12212a; }
.champion-profile-page .champion-progression > footer { color: #c0ced9; }
@media(max-width:520px) {
  .champion-profile-page .champion-level-highlights { padding: 10px; }
  .champion-profile-page .champion-level-mechanic { margin: 10px; padding: 14px; }
  .champion-profile-page .champion-rank-grid > article { padding: 14px; }
}
[data-champion-historical-context] > strong { color: #f1ce81; }
[data-champion-historical-context] > span { min-width: 0; }
.champion-ability-source-language { display: block; margin: 4px 0; color: #e4c88c; font-size: .9em; }

.go-native-league .topbar {
  isolation: isolate;
}

/* Keep the champion navigation below the brand when its grid needs a full row. */
@media (max-width: 760px) {
  .champion-route-page.go-native-league .topbar { flex-wrap: wrap !important; }
  .champion-route-page.go-native-league .topbar .league-nav {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .champion-build-variant > summary { grid-template-columns: 1fr; }
  .champion-build-variant ol { grid-template-columns: 1fr; }
}

/* Counter-page allied draft context: manual pre-game classification only. */
.counter-team-balance{margin:1.25rem 0;border:1px solid #3d4b55;border-top:3px solid #e2b84e;background:#0c1319;overflow:visible}
.counter-team-balance>summary{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding:1rem 1.25rem;background:#151d21;cursor:pointer;list-style:none}
.counter-team-balance>summary::-webkit-details-marker{display:none}
.counter-team-balance[open]>summary{border-bottom:1px solid #34434d}
.counter-team-balance>summary h2{margin:.12rem 0 .28rem;color:#f3f5f7;font-size:clamp(1.15rem,1.8vw,1.65rem);letter-spacing:0}
.counter-team-balance>summary p{max-width:58rem;margin:0;color:#aebac4;line-height:1.45}
.counter-team-balance>summary>span{display:flex;align-items:center;gap:.45rem;flex:0 0 auto;padding:.45rem .65rem;border:1px solid #75632d;color:#f1cb68;font-size:.75rem;font-weight:800;text-transform:uppercase}
.counter-team-balance>summary>span i{transition:transform .18s ease}
.counter-team-balance[open]>summary>span i{transform:rotate(180deg)}
.counter-team-body{background:#0c1319}
.counter-team-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:end;padding:1rem 1.25rem;border-bottom:1px solid #2d3b45}
.counter-team-controls label>span,.counter-team-controls label>small{display:block}
.counter-team-controls label>span{margin-bottom:.4rem;color:#70dfd5;font-size:.78rem;font-weight:850;text-transform:uppercase}
.counter-team-controls label>small{margin-top:.4rem;color:#8999a7;font-size:.8rem;line-height:1.4}
.counter-team-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem}
.counter-team-search>div{position:relative;min-width:0}
.counter-team-controls input{width:100%;min-width:0;min-height:2.8rem;padding:.65rem .8rem;border:1px solid #425767;background:#101b25;color:#f2f6fa;font:inherit}
.counter-team-controls button{min-height:2.8rem;padding:.65rem 1rem;border:1px solid #3f7c7a;background:#102326;color:#8cece3;font-weight:800;cursor:pointer}
.counter-team-controls button:disabled{opacity:.45;cursor:not-allowed}
.counter-team-clear{border-color:#67536a!important;background:#1b1620!important;color:#d8b9dc!important}
.counter-team-menu{position:absolute;z-index:20;top:calc(100% + .35rem);left:0;right:0;max-height:19rem;overflow-y:auto;border:1px solid #486171;background:#0b131b;box-shadow:0 14px 30px rgba(0,0,0,.45)}
.counter-team-menu[hidden]{display:none}
.counter-team-option{width:100%;display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:.65rem;align-items:center;border:0!important;border-bottom:1px solid #263640!important;padding:.55rem .65rem!important;background:#0f1922!important;color:#eef4f8!important;text-align:left}
.counter-team-option:last-child{border-bottom:0!important}
.counter-team-option:hover,.counter-team-option.active{background:#182834!important;color:#8cece3!important}
.counter-team-option img{width:2.25rem;height:2.25rem;object-fit:cover}
.counter-team-option span,.counter-team-option strong,.counter-team-option small{display:block;min-width:0}
.counter-team-option strong,.counter-team-option small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.counter-team-option small{margin-top:.1rem;color:#93a6b4;font-size:.72rem}
.counter-team-menu>p{margin:0;padding:.8rem;color:#93a6b4}
.counter-team-roster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;padding:1rem 1.25rem}
.counter-team-roster>p{grid-column:1/-1;margin:0;padding:.75rem;border:1px dashed #41515e;color:#91a0ac;text-align:center}
.counter-team-chip{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;gap:.55rem;align-items:center;min-width:0;padding:.55rem;border:1px solid #40505c;border-left:3px solid #778591;background:#101922;color:#eef3f7;text-align:left;cursor:pointer}
.counter-team-chip.is-physical{border-left-color:#ed8871}.counter-team-chip.is-magic{border-left-color:#a98cf2}.counter-team-chip.is-mixed{border-left-color:#59ced1}
.counter-team-chip img{width:2rem;height:2rem;object-fit:cover}.counter-team-chip span{min-width:0}.counter-team-chip strong,.counter-team-chip small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.counter-team-chip small{margin-top:.15rem;color:#91a1af;font-size:.72rem}.counter-team-chip i{color:#a7b4bd;font-size:1.15rem;font-style:normal}
.counter-team-verdict{margin:0 1.25rem 1rem;padding:.9rem 1rem;border:1px solid #42525e;border-left:4px solid #778591;background:#101821}
.counter-team-verdict.is-physical-heavy{border-left-color:#ed8871;background:#211614}.counter-team-verdict.is-magic-heavy{border-left-color:#a98cf2;background:#191526}.counter-team-verdict.is-mixed{border-left-color:#59ced1;background:#102023}
.counter-team-verdict strong{display:block;color:#f1f5f7}.counter-team-verdict p{margin:.3rem 0 0;color:#aebbc5;line-height:1.5}
.counter-team-body>footer{display:flex;gap:.45rem 1rem;flex-wrap:wrap;padding:.85rem 1.25rem;border-top:1px solid #2d3b45;color:#8fa0ac;font-size:.82rem;line-height:1.5}.counter-team-body>footer strong{color:#f0ca68}
.counter-team-fit{display:block;width:max-content;max-width:100%;margin-top:.5rem;padding:.3rem .45rem;border:1px solid #445460;color:#aebcc7;font-size:.72rem;font-style:normal;line-height:1.35;overflow-wrap:anywhere}
.counter-team-fit.is-physical-heavy{border-color:#815044;color:#f0a08d}.counter-team-fit.is-magic-heavy{border-color:#69588c;color:#c0a8f6}.counter-team-fit.is-mixed{border-color:#377a7d;color:#7ee0df}
@media(max-width:760px){.counter-team-balance>summary{align-items:flex-start}.counter-team-balance>summary>span{margin-top:.2rem}.counter-team-controls{grid-template-columns:1fr}.counter-team-roster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.counter-team-balance>summary{display:block}.counter-team-balance>summary>span{display:inline-flex;margin-top:.7rem}.counter-team-search,.counter-team-roster{grid-template-columns:1fr}.counter-team-search>button{width:100%}}

@media (max-width: 720px) {
  .go-native-league .topbar {
    align-items: center;
    display: flex !important;
    flex-wrap: nowrap;
    gap: 8px !important;
    min-height: 64px !important;
    padding: 10px 12px !important;
  }

  .go-native-league .topbar .brand {
    flex: 0 0 auto;
  }

  .go-native-league .league-nav {
    align-items: center;
    display: flex !important;
    flex: 0 0 auto;
    gap: 8px;
    margin-left: auto;
    min-width: 0;
    width: 148px !important;
  }

  .go-native-league .league-nav > a {
    display: none !important;
  }

  .go-native-league .league-nav-more,
  .go-native-league .league-language {
    flex: 0 0 auto;
    min-width: 68px !important;
  }

  .go-native-league .league-nav-more > summary,
  .go-native-league .league-language > summary {
    min-height: 42px;
    padding: 8px 12px;
  }

  .go-native-league .league-nav-more > summary > span,
  .go-native-league .league-language .language-current-code {
    display: inline !important;
  }

  .go-native-league .league-language .language-current-name {
    display: none;
  }
}

/* Native champion role and queue pages. */
.champion-route-page main {
  margin-inline: auto;
  max-width: 1240px;
  padding: 24px clamp(16px, 3vw, 36px) 72px;
}

.champion-route-page main,
.champion-route-page main * {
  box-sizing: border-box;
}

.champion-patch-versions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
  font-size: .9375rem;
  line-height: 1.6;
  margin: .75rem 0;
}
.champion-patch-versions > span { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.champion-patch-versions bdi { font-weight: 700; white-space: nowrap; }
.champion-route-hero {
  align-items: center;
  background: linear-gradient(90deg, rgba(7, 17, 24, .97), rgba(15, 19, 31, .88)), var(--champion-splash) center 24% / cover;
  border: 1px solid #344657;
  border-top: 3px solid #55d6df;
  display: grid;
  gap: 22px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-top: 18px;
  min-height: 210px;
  padding: clamp(20px, 4vw, 38px);
}

.champion-route-hero > img {
  border: 2px solid #62dae2;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .32);
}

.champion-route-hero h1 {
  font-size: clamp(2rem, 5vw, 3.7rem);
  letter-spacing: 0;
  line-height: 1.04;
  margin: 5px 0 12px;
}

.champion-route-hero h1 small {
  color: #f1c75b;
  display: block;
  font-size: clamp(.95rem, 2vw, 1.2rem);
  margin-top: 10px;
}

.champion-route-hero p,
.champion-mode-switcher p,
.champion-build-plan p,
.champion-rune-plan p,
.champion-route-choices p {
  color: #b9c7d7;
  overflow-wrap: anywhere;
}

.champion-route-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 15px;
}

.champion-route-badges span {
  align-items: center;
  border: 1px solid #4a5a69;
  display: inline-flex;
  gap: 8px;
  min-height: 40px;
  padding: 7px 11px;
}

.champion-route-badges .is-fit-primary,
.champion-route-badges .is-fit-established { border-color: #3bbf8f; color: #84e9c1; }
.champion-route-badges .is-fit-secondary { border-color: #d5ae45; color: #f2d777; }
.champion-route-badges .is-fit-experimental { border-color: #ef7f71; color: #ffab9e; }
.champion-route-badges .is-fit-aram { border-color: #a47be8; color: #c9aff9; }
.champion-route-badges .is-fit-avoid { border-color: #8792a2; color: #c0c7d1; }

.champion-route-overview-link {
  align-items: center;
  border: 1px solid #d8ad3f;
  color: #f1cd70;
  display: inline-flex;
  justify-content: center;
  min-height: 46px;
  padding: 10px 15px;
  text-decoration: none;
}

.champion-mode-switcher,
.champion-build-plan,
.champion-rune-plan,
.champion-route-choices,
.champion-unreviewed-route {
  border: 1px solid #344657;
  margin-top: 22px;
  padding: clamp(18px, 3vw, 30px);
}

.champion-mode-switcher {
  align-items: end;
  background: #0b151e;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
}

.champion-mode-switcher h2,
.champion-build-plan h2,
.champion-rune-plan h2,
.champion-route-choices h2,
.champion-unreviewed-route h2 {
  font-size: clamp(1.45rem, 3vw, 2.25rem);
  letter-spacing: 0;
  margin: 4px 0 8px;
}

.champion-mode-switcher > div:last-child {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.champion-mode-switcher a {
  border: 1px solid #455464;
  color: #e8eff8;
  display: grid;
  gap: 10px;
  grid-template-columns: 50px minmax(0, 1fr);
  min-height: 82px;
  padding: 10px;
  text-decoration: none;
}
.champion-mode-switcher a > img {
  border: 1px solid #506071;
  height: 50px;
  object-fit: cover;
  width: 50px;
}
.champion-mode-switcher a > span { align-self: center; min-width: 0; }
.champion-mode-switcher a strong,
.champion-mode-switcher a small { display: block; }

.champion-mode-switcher a:nth-child(1) { border-top-color: #56d9e2; }
.champion-mode-switcher a:nth-child(2) { border-top-color: #e5bd50; }
.champion-mode-switcher a:nth-child(3) { border-top-color: #fa806e; }
.champion-mode-switcher a:nth-child(4) { border-top-color: #a77ef0; }
.champion-mode-switcher a[aria-current="page"] { background: #182534; box-shadow: inset 0 -3px #f0c75b; }
.champion-mode-switcher a small { color: #9cabbc; line-height: 1.35; }

.champion-build-plan { background: #10141d; border-top: 3px solid #e6b948; }
.champion-rune-plan { background: #11121e; border-top: 3px solid #a57bea; }
.champion-route-choices { background: #101820; border-top: 3px solid #ef756d; }

.champion-build-plan > header,
.champion-rune-plan > header,
.champion-route-choices > header {
  align-items: start;
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.champion-build-plan > header > span,
.champion-rune-plan > header > span {
  border: 1px solid #5a4e30;
  color: #efd078;
  flex: 0 0 auto;
  padding: 8px 11px;
}

.champion-build-sequence {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 22px;
}

.champion-build-sequence article {
  align-items: start;
  background: #0c1721;
  border: 1px solid #3a4a59;
  display: grid;
  gap: 12px;
  grid-template-columns: auto auto minmax(0, 1fr);
  min-width: 0;
  padding: 14px;
}

.champion-build-sequence .champion-route-starter {
  background: #211b0f;
  border-color: #9b7931;
  grid-column: 1 / -1;
}

.champion-build-sequence .champion-route-starter > b {
  background: #4a3812;
  border-color: #e1b84d;
  color: #ffe28c;
}

.champion-build-sequence .champion-route-starter small { color: #f0c75e; }
.champion-build-sequence .champion-route-starter.is-draft { background: #102027; border-color: #367f89; }
.champion-build-sequence .champion-route-starter.is-draft > b { background: #12343c; border-color: #58cbd5; color: #92edf2; }
.champion-build-sequence .champion-route-starter.is-draft small { color: #68dbe2; }
.champion-build-sequence .champion-route-starter.is-aram { background: #1d1729; border-color: #7650a2; }
.champion-build-sequence .champion-route-starter.is-aram > b { background: #332047; border-color: #a878dc; color: #dcb4ff; }
.champion-build-sequence .champion-route-starter.is-aram small { color: #c899f3; }

.champion-build-sequence article > b {
  align-items: center;
  background: #3d3217;
  border: 1px solid #d9ad3e;
  color: #ffd86e;
  display: flex;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.champion-build-sequence h3 { font-size: 1.08rem; letter-spacing: 0; margin: 2px 0 4px; overflow-wrap: anywhere; }
.champion-build-sequence small { color: #68dbe2; display: block; }
.champion-build-sequence strong { color: #f0cc6b; font-size: .9rem; }
.champion-build-sequence p { font-size: .9rem; line-height: 1.45; margin: 8px 0 0; }

.champion-build-variants {
  grid-column: 1 / -1;
  background: #0c1219;
  border: 1px solid #46505d;
  border-top: 3px solid #e6b948;
  margin: 0 0 1rem;
}
.champion-build-variants > header {
  align-items: end;
  background: #14161c;
  border-bottom: 1px solid #3b414b;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  padding: 1.15rem 1.25rem;
}
.champion-build-variants h3 { font-size: 1.35rem; letter-spacing: 0; margin: .15rem 0 .35rem; }
.champion-build-variants p { margin: 0; }
.champion-build-view { display: grid; flex: 0 0 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.champion-build-view button {
  align-items: center;
  background: #0c1118;
  border: 1px solid #46515e;
  color: #b9c5d1;
  cursor: pointer;
  display: flex;
  gap: .5rem;
  min-height: 42px;
  padding: .65rem .8rem;
}
.champion-build-view button + button { border-left: 0; }
.champion-build-view button.is-active { background: #1d2118; border-color: #a38335; color: #f0cf72; }
.champion-build-view button:hover,.champion-build-view button:focus-visible { background: #17222d; color: #7fe5dd; outline: none; }
.champion-build-variant-list { background: #303b49; display: grid; gap: 1px; }
.champion-build-variant { --route-accent: #65d8cf; background: #101720; }
.champion-build-variant:nth-child(3n+2) { --route-accent: #b58af0; }
.champion-build-variant:nth-child(3n) { --route-accent: #ef7e91; }
.champion-build-variant:nth-child(3n+4) { --route-accent: #66d49e; }
.champion-build-variant.is-recommended { --route-accent: #e6b948; background: #191910; }
.champion-build-variant > summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: .9rem;
  grid-template-columns: 42px minmax(230px, .85fr) minmax(220px, 1fr) auto;
  list-style: none;
  min-height: 104px;
  padding: .9rem 1rem;
}
.champion-build-variant > summary::-webkit-details-marker { display: none; }
.champion-build-variant-number {
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--route-accent) 75%, #313943);
  color: var(--route-accent);
  display: flex;
  font-size: .78rem;
  font-weight: 900;
  height: 38px;
  justify-content: center;
  width: 38px;
}
.champion-build-variant > summary small { color: var(--route-accent); display: block; font-size: .7rem; font-weight: 850; text-transform: uppercase; }
.champion-build-variant > summary strong { display: block; margin-top: .15rem; }
.champion-build-variant-identity em { color: #aebbc8; display: -webkit-box; font-size: .78rem; font-style: normal; line-height: 1.4; margin-top: .35rem; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.champion-build-variant-icons { display: grid; gap: .3rem; grid-template-columns: repeat(6, 38px); }
.champion-build-variant-icons img { background: #090e14; border: 1px solid #4b5968; height: 38px; object-fit: cover; width: 38px; }
.champion-build-variant-action { align-items: center; color: var(--route-accent); display: flex; font-size: .76rem; font-weight: 800; gap: .55rem; white-space: nowrap; }
.champion-build-variant-action i { transition: transform .18s ease; }
.champion-build-variant[open] .champion-build-variant-action i { transform: rotate(180deg); }
.champion-build-variant > div { border-top: 1px solid #39424d; box-shadow: inset 4px 0 var(--route-accent); padding: 1rem 1rem 1.15rem; }
.champion-build-variant > div > p { color: #c6d2df; margin: 0 0 .85rem; }
.champion-build-variant > div > p strong { color: var(--route-accent); }
.champion-build-variant ol { display: grid; gap: .5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.champion-build-variant li { align-items: center; background: #0a1119; border-left: 2px solid var(--route-accent); display: grid; gap: .55rem; grid-template-columns: 34px minmax(0, 1fr); min-width: 0; padding: .55rem; }
.champion-build-variant li img { height: 34px; width: 34px; }
.champion-build-variant li small,.champion-build-variant li b { display: block; overflow-wrap: anywhere; }
.champion-build-variant li small { color: #8ea0b2; font-size: .7rem; }
.champion-build-variant li b { font-size: .82rem; letter-spacing: 0; }
.champion-build-dialog {
  background: transparent;
  border: 0;
  color: inherit;
  height: min(850px, calc(100vh - 2rem));
  max-height: calc(100vh - 2rem);
  max-width: 1120px;
  padding: 0;
  width: calc(100% - 2rem);
}
.champion-build-dialog::backdrop { background: rgba(3, 7, 12, .86); backdrop-filter: blur(5px); }
.champion-build-dialog-shell { background: #0b1118; border: 1px solid #596471; border-top: 4px solid #e6b948; display: flex; flex-direction: column; max-height: 100%; overflow: hidden; }
.champion-build-dialog-shell > header { align-items: start; background: #17191f; border-bottom: 1px solid #3b434d; display: flex; gap: 1rem; justify-content: space-between; padding: 1rem 1.1rem; }
.champion-build-dialog-shell > header h3 { font-size: 1.35rem; letter-spacing: 0; margin: .12rem 0 .3rem; }
.champion-build-dialog-shell > header p { margin: 0; }
.champion-build-dialog-shell > header button { align-items: center; background: #0c1219; border: 1px solid #52606e; color: #dce6ee; cursor: pointer; display: flex; flex: 0 0 auto; font-size: 1.1rem; height: 44px; justify-content: center; width: 44px; }
.champion-build-dialog-shell > header button:hover,.champion-build-dialog-shell > header button:focus-visible { border-color: #ef7e91; color: #ff9aac; outline: none; }
.champion-build-variant-list.is-dialog { overflow-y: auto; overscroll-behavior: contain; }

@media (max-width: 1040px) {
  .champion-build-variants > header { align-items: start; flex-direction: column; }
  .champion-build-variant > summary { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .champion-build-variant-icons { grid-column: 2 / 3; }
  .champion-build-variant-action { grid-column: 3; grid-row: 1 / 3; }
}

@media (max-width: 760px) {
  .champion-build-view { width: 100%; }
  .champion-build-view button { justify-content: center; }
  .champion-build-variant > summary { gap: .7rem; grid-template-columns: 36px minmax(0, 1fr); min-height: 0; padding: .85rem; }
  .champion-build-variant-number { height: 34px; width: 34px; }
  .champion-build-variant-icons { grid-column: 1 / -1; grid-template-columns: repeat(6, minmax(30px, 38px)); }
  .champion-build-variant-icons img { height: auto; max-width: 38px; width: 100%; }
  .champion-build-variant-action { grid-column: 1 / -1; grid-row: auto; justify-content: space-between; }
  .champion-build-variant ol { grid-template-columns: 1fr; }
  .champion-build-dialog { height: calc(100vh - 1rem); max-height: calc(100vh - 1rem); width: calc(100% - 1rem); }
  .champion-build-dialog-shell > header p { display: none; }
}

.champion-build-notes {
  background: #171b23;
  border-left: 4px solid #ef786c;
  margin-top: 18px;
  padding: 16px 20px;
}
.champion-build-notes ul { color: #bdc9d6; margin-bottom: 0; padding-left: 20px; }
.champion-build-notes li + li { margin-top: 8px; }

.champion-rune-columns {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 22px;
}

.champion-rune-tree {
  border: 1px solid #493d61;
  display: block;
  grid-area: auto;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 16px;
}
.champion-rune-tree > small { color: #d4bcff; text-transform: uppercase; }
.champion-rune-tree h3 { align-items: center; display: flex; gap: 9px; letter-spacing: 0; margin: 10px 0; }
.champion-rune-tree > div { display: grid; gap: 8px; }
.champion-rune-tree > div > span { align-items: center; background: #0d1721; border: 1px solid #354657; display: flex; gap: 10px; max-width: 100%; min-width: 0; padding: 8px; width: 100%; }
.champion-rune-tree img { flex: 0 0 auto; max-width: 38px; }
.champion-rune-tree b { flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }

.champion-rune-adjustments,
.champion-route-choices > div {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}
.champion-rune-adjustments article { border: 1px solid #4c425e; padding: 14px; }

.champion-route-choices article {
  align-items: start;
  border: 1px solid #553d43;
  display: grid;
  gap: 13px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 15px;
}
.champion-route-choices h3 { letter-spacing: 0; margin: 3px 0 6px; }
.champion-route-choices small { color: #ff9d92; }
.champion-route-choices strong { color: #efcb70; display: block; margin-top: 8px; }

.support-quest-decision {
  background: #10191a;
  border: 1px solid #3a5956;
  border-top: 3px solid #5cd7b1;
  margin-top: 22px;
  padding: clamp(18px, 3vw, 30px);
}
.support-quest-decision > header {
  align-items: start;
  display: flex;
  gap: 20px;
  justify-content: space-between;
}
.support-quest-decision h2 { font-size: clamp(1.45rem, 3vw, 2.25rem); letter-spacing: 0; margin: 4px 0 8px; }
.support-quest-decision > header > span { border: 1px solid #3f9a7f; color: #80edca; flex: 0 0 auto; padding: 8px 11px; }
.support-quest-verdict { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; }
.support-quest-verdict article { border: 1px solid #41625b; padding: 16px; }
.support-quest-verdict .is-keep { background: #10231e; border-left: 4px solid #5fd9ad; }
.support-quest-verdict .is-sell { background: #24191a; border-left: 4px solid #f07c72; }
.support-quest-verdict small { color: #9cafbc; text-transform: uppercase; }
.support-quest-verdict h3 { letter-spacing: 0; margin: 5px 0 8px; }
.support-quest-team-checks { border-left: 4px solid #e7bb4e; margin-top: 14px; padding: 12px 16px; }
.support-quest-team-checks h3 { letter-spacing: 0; margin: 0 0 8px; }
.support-quest-team-checks ol { color: #c6d1d8; margin: 0; padding-left: 22px; }
.support-quest-team-checks li + li { margin-top: 6px; }
.support-quest-options { display: grid; gap: 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 18px; }
.support-quest-options article { border: 1px solid #3b4c56; display: grid; gap: 10px; grid-template-columns: auto minmax(0, 1fr); padding: 12px; }
.support-quest-options article.is-selected { background: #18251f; border-color: #62d7ae; }
.support-quest-options img { border: 1px solid #4e636c; }
.support-quest-options h3 { font-size: 1rem; letter-spacing: 0; margin: 2px 0 6px; overflow-wrap: anywhere; }
.support-quest-options small { color: #78ddc3; display: block; }
.support-quest-options p { font-size: .86rem; line-height: 1.45; margin: 0; }
.support-quest-options article > b { color: #edc864; font-size: .78rem; grid-column: 1 / -1; text-transform: uppercase; }
.support-quest-decision > footer { border-top: 1px solid #344c4b; display: flex; gap: 10px; margin-top: 18px; padding-top: 14px; }
.support-quest-decision > footer span { color: #aebdc7; }

.champion-unreviewed-route {
  align-items: center;
  background: #17171d;
  border-left: 4px solid #ef796f;
  display: grid;
  gap: 20px;
  grid-template-columns: auto minmax(0, 1fr);
}
.champion-unreviewed-route > div {
  align-items: center;
  border: 1px solid #ef796f;
  color: #ffaaa0;
  display: flex;
  font-size: 2rem;
  height: 64px;
  justify-content: center;
  width: 64px;
}
.champion-unreviewed-route a { color: #f1cf74; }

.champion-route-page .go-native-state-guide,
.champion-macro-plan,
.champion-route-next {
  background: #11141a;
  border: 1px solid #3b4049;
  margin-top: 22px;
  padding: clamp(18px, 3vw, 30px);
  scroll-margin-top: 82px;
}

.champion-route-page .go-native-state-guide {
  border-top: 3px solid #d9aa48;
}

.champion-route-page .go-native-state-guide > header,
.champion-macro-plan > header {
  align-items: start;
  border-bottom: 1px solid #343841;
  display: flex;
  gap: 22px;
  justify-content: space-between;
  padding-bottom: 16px;
}

.champion-route-page .go-native-state-guide > header > p,
.champion-macro-plan > header p {
  color: #b4b8c2;
  margin: 0;
  max-width: 620px;
}

.champion-route-page .go-native-state-guide h2,
.champion-macro-plan h2,
.champion-route-next h2 {
  font-size: clamp(1.45rem, 3vw, 2.25rem);
  letter-spacing: 0;
  margin: 4px 0 8px;
}

.champion-route-page .champion-state-tabs button {
  box-shadow: none;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.champion-route-page .champion-state-tabs button:nth-child(1) { border-top: 3px solid #55c98f; }
.champion-route-page .champion-state-tabs button:nth-child(2) { border-top: 3px solid #dda944; }
.champion-route-page .champion-state-tabs button:nth-child(3) { border-top: 3px solid #df6d8c; }

.champion-route-page .champion-state-panel {
  border: 1px solid #373b44;
  margin-top: 10px;
  padding: 16px;
}
.champion-route-page .champion-state-panel.is-ahead { border-left: 4px solid #55c98f; }
.champion-route-page .champion-state-panel.is-even { border-left: 4px solid #dda944; }
.champion-route-page .champion-state-panel.is-behind { border-left: 4px solid #df6d8c; }
.champion-route-page .champion-state-summary span { color: #e8bd61; font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.champion-route-page .champion-state-summary h3 { font-size: 1.25rem; letter-spacing: 0; margin: 5px 0 14px; }
.champion-route-page .champion-state-phases { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.champion-route-page .champion-state-phases article { background: #0c131b; border: 1px solid #343e49; display: grid; gap: 11px; grid-template-columns: auto minmax(0, 1fr); padding: 13px; }
.champion-route-page .champion-state-phases p { color: #aeb9c6; font-size: .9rem; line-height: 1.48; margin: 5px 0 0; }

.champion-macro-plan {
  border-top: 3px solid #61d29e;
}

.champion-macro-states {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
}

.champion-macro-states > article {
  border: 1px solid #3a3f49;
  border-top: 3px solid #dda944;
  min-width: 0;
}
.champion-macro-states > article.is-ahead { border-top-color: #55c98f; }
.champion-macro-states > article.is-behind { border-top-color: #df6d8c; }
.champion-macro-states article > header { background: #171a21; min-height: 112px; padding: 15px; }
.champion-macro-states article > header span { color: #e7bd62; font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.champion-macro-states .is-ahead > header span { color: #78dca9; }
.champion-macro-states .is-behind > header span { color: #e98aa4; }
.champion-macro-states h3 { font-size: 1.05rem; letter-spacing: 0; margin: 7px 0 0; }
.champion-macro-states dl { margin: 0; }
.champion-macro-states dl > div { border-top: 1px solid #343943; padding: 13px 15px; }
.champion-macro-states dt { color: #c3a6ea; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.champion-macro-states dl > div:nth-child(2) dt { color: #efc462; }
.champion-macro-states dl > div:nth-child(3) dt { color: #75d8a8; }
.champion-macro-states dd { color: #aeb8c4; font-size: .88rem; line-height: 1.48; margin: 5px 0 0; }

.champion-objective-setup {
  background: #111923;
  border: 1px solid #48505a;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(190px, .34fr) minmax(0, 1fr);
  margin-top: 14px;
  padding: 17px;
}
.champion-objective-setup > div > span { color: #e9bc59; font-size: .76rem; font-weight: 800; text-transform: uppercase; }
.champion-objective-setup h3 { letter-spacing: 0; margin: 5px 0 8px; }
.champion-objective-setup > div > p { color: #adb7c3; margin: 0; }
.champion-objective-setup ol { display: grid; gap: 9px; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.champion-objective-setup li { border: 1px solid #3a414b; display: grid; gap: 10px; grid-template-columns: auto minmax(0, 1fr); padding: 12px; }
.champion-objective-setup li:nth-child(1) { border-left: 3px solid #e2ad4a; }
.champion-objective-setup li:nth-child(2) { border-left: 3px solid #a978df; }
.champion-objective-setup li:nth-child(3) { border-left: 3px solid #62cb9b; }
.champion-objective-setup li:nth-child(4) { border-left: 3px solid #dd7695; }
.champion-objective-setup li p { color: #abb5c0; font-size: .85rem; line-height: 1.45; margin: 5px 0 0; }
.champion-after-lane { border-left: 3px solid #a77ce4; color: #b6c0cc; margin: 14px 0 0; padding: 10px 14px; }

.champion-route-next {
  align-items: center;
  border-left: 4px solid #a77ce4;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 36px;
}
.champion-route-next p { color: #b3bdc9; margin-bottom: 0; }
.champion-route-next > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; justify-content: end; }
.champion-route-next a { border: 1px solid #6f558c; color: #e5cdff; min-height: 42px; padding: 10px 13px; text-decoration: none; }
.champion-route-next a:nth-child(2) { border-color: #b58a35; color: #f3d078; }
.champion-route-next a:nth-child(3) { border-color: #3f8e70; color: #a8e7ca; }

@media (max-width: 980px) {
  .champion-route-hero { grid-template-columns: auto minmax(0, 1fr); }
  .champion-route-overview-link { grid-column: 1 / -1; }
  .champion-mode-switcher { grid-template-columns: 1fr; }
  .champion-build-sequence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .champion-macro-states { grid-template-columns: 1fr; }
  .champion-macro-states article > header { min-height: 0; }
  .champion-objective-setup { grid-template-columns: 1fr; }
  .support-quest-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .champion-route-page main { padding-inline: 12px; }
  .champion-route-hero { align-items: start; grid-template-columns: 72px minmax(0, 1fr); min-height: 0; padding: 16px; }
  .champion-route-hero > img { height: 72px; width: 72px; }
  .champion-route-hero h1 { font-size: 1.75rem; }
  .champion-mode-switcher > div:last-child,
  .champion-build-sequence,
  .champion-rune-columns,
  .champion-rune-adjustments,
  .champion-route-choices > div { grid-template-columns: 1fr; }
  .champion-build-plan > header,
  .champion-rune-plan > header,
  .champion-route-choices > header { flex-direction: column; }
  .support-quest-decision > header,
  .support-quest-decision > footer { flex-direction: column; }
  .support-quest-verdict,
  .support-quest-options { grid-template-columns: 1fr; }
  .champion-build-sequence article { grid-template-columns: 32px 52px minmax(0, 1fr); }
  .champion-build-sequence article > img { height: 52px; width: 52px; }
  .champion-unreviewed-route { grid-template-columns: 1fr; }
  .champion-rune-tree { padding: 12px; }
  .champion-route-page .go-native-state-guide > header,
  .champion-macro-plan > header { flex-direction: column; }
  .champion-route-page .champion-state-phases,
  .champion-objective-setup ol { grid-template-columns: 1fr; }
  .champion-route-next { grid-template-columns: 1fr; }
  .champion-route-next > div:last-child { display: grid; justify-content: stretch; }
}

/* Native matchup guide */
.go-native-guide {
  --guide-gold: #e7b94e;
  --guide-mint: #62d7a5;
  --guide-coral: #ee786e;
  --guide-violet: #aa83e9;
  --guide-cyan: #58cbd7;
  width: min(100% - 32px, 1460px);
}

.guide-native-hero,
.guide-matchup-hero {
  border: 1px solid #46505c;
  border-top: 4px solid var(--guide-gold);
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .36fr);
  margin-bottom: 18px;
  min-height: 270px;
  overflow: hidden;
  padding: clamp(24px, 5vw, 58px);
  position: relative;
}

.guide-native-hero {
  background:
    linear-gradient(100deg, #0b151d 0 54%, rgba(20, 22, 35, .9) 72%, rgba(26, 24, 43, .76) 100%),
    var(--guide-mode-image) right 35% / min(42%, 520px) auto no-repeat;
}

.guide-native-hero::after {
  background: linear-gradient(90deg, var(--guide-gold), var(--guide-coral), var(--guide-violet), var(--guide-mint));
  bottom: 0;
  content: "";
  height: 5px;
  inset-inline: 0;
  position: absolute;
}

.guide-native-hero h1,
.guide-matchup-hero h1 {
  font-size: clamp(2.25rem, 5vw, 4.8rem);
  letter-spacing: 0;
  line-height: 1.02;
  margin: 8px 0 18px;
  max-width: 930px;
  text-wrap: balance;
}

.guide-native-hero > div > p:last-child,
.guide-matchup-hero > div > p:last-child {
  color: #b8c6d0;
  font-size: 1.06rem;
  line-height: 1.65;
  max-width: 780px;
}

.guide-native-hero > aside {
  align-items: center;
  align-content: center;
  border-inline-start: 1px solid #514366;
  display: grid;
  gap: 8px;
  grid-template-columns: 72px minmax(0, 1fr);
  padding-inline-start: clamp(20px, 4vw, 42px);
}
.guide-native-hero > aside img { border: 1px solid #5b6471; height: 72px; object-fit: cover; width: 72px; }
.guide-native-hero > aside span { min-width: 0; }
.guide-native-hero > aside strong { color: #f0d274; font-size: 1.55rem; }
.guide-native-hero > aside span strong,
.guide-native-hero > aside span small { display: block; }
.guide-native-hero > aside span small { color: #cabbea; line-height: 1.5; margin-top: 4px; }
.guide-native-hero > aside b { color: #74ddb0; font-size: .8rem; grid-column: 1 / -1; margin-top: 8px; text-transform: uppercase; }

.guide-matchup-hero {
  background:
    linear-gradient(90deg, rgba(6, 15, 22, .97), rgba(11, 17, 27, .84)),
    var(--guide-splash) center 24% / cover;
}
.guide-matchup-hero .eyebrow { align-items: center; display: flex; gap: 9px; }
.guide-matchup-hero h1 small { color: var(--guide-coral); font-size: .45em; text-transform: uppercase; }
.guide-versus-portraits { align-items: center; align-self: center; display: flex; gap: 12px; justify-content: end; }
.guide-versus-portraits img { border: 2px solid var(--guide-cyan); height: 104px; object-fit: cover; width: 104px; }
.guide-versus-portraits img:last-child { border-color: var(--guide-coral); }
.guide-versus-portraits b { align-items: center; background: #25161c; border: 1px solid #8a4853; color: #ff9c94; display: flex; height: 48px; justify-content: center; width: 48px; }

.guide-native-picker,
.guide-native-modes,
.guide-native-explainer,
.guide-fit-check,
.guide-interaction,
.guide-abilities,
.guide-native-next {
  background: #10151c;
  border: 1px solid #3c4651;
  margin-top: 18px;
  padding: clamp(18px, 3vw, 30px);
}

.guide-native-picker { border-top: 3px solid var(--guide-cyan); position: relative; z-index: 2; }
.guide-native-picker > header,
.guide-interaction > header,
.guide-abilities > header {
  align-items: end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 18px;
}
.guide-native-picker > header h2,
.guide-native-modes h2,
.guide-native-explainer h2,
.guide-interaction h2,
.guide-abilities h2,
.guide-native-next h2 { font-size: clamp(1.55rem, 3vw, 2.5rem); letter-spacing: 0; margin: 5px 0; }
.guide-native-picker > header > p,
.guide-interaction > header > span { color: #aebbc6; margin: 0; max-width: 560px; }

.guide-native-fields {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr) minmax(130px, .48fr) auto;
}
.guide-native-fields > label { display: grid; gap: 7px; min-width: 0; }
.guide-native-fields > label > span { color: #c5d0da; font-size: .76rem; font-weight: 800; text-transform: uppercase; }
.guide-native-fields img { object-fit: cover; }
.guide-native-fields input,
.guide-native-fields select {
  background: #0a121a;
  border: 1px solid #40505e;
  border-radius: 0;
  color: #f4f7fb;
  font: inherit;
  height: 46px;
  min-width: 0;
  padding: 0 12px;
  width: 100%;
}
.guide-native-fields .champion-input-shell { background: #0a121a; border-color: #40505e; min-height: 52px; padding-block: 4px; }
.guide-native-fields .champion-input-shell input { border: 0; height: 42px; padding: 0; }
.guide-native-fields .champion-field:first-child .champion-input-shell { border-inline-start: 3px solid var(--guide-mint); }
.guide-native-fields .champion-field:nth-of-type(2) .champion-input-shell { border-inline-start: 3px solid var(--guide-coral); }
.guide-native-fields .champion-field > label { margin-bottom: 7px; }
.guide-native-fields .champion-field > label > span { color: #dce7ee; }
.guide-native-fields .champion-field > label small { color: #8394a2; line-height: 1.35; }
.guide-native-fields .champion-menu {
  max-height: min(390px, 52vh);
  overscroll-behavior: contain;
  scrollbar-color: #708494 #101820;
  scrollbar-width: thin;
  z-index: 80;
}
.guide-native-fields .champion-menu::-webkit-scrollbar { width: 10px; }
.guide-native-fields .champion-menu::-webkit-scrollbar-track { background: #101820; }
.guide-native-fields .champion-menu::-webkit-scrollbar-thumb { background: #708494; border: 2px solid #101820; }
.guide-native-fields .guide-champion-option { min-height: 58px; }
.guide-native-fields .guide-champion-option strong { color: #f4f7fb; }
.guide-native-fields .guide-champion-option small { color: #9caeba; }
.guide-native-fields .guide-versus-label { align-self: end; color: var(--guide-coral); padding-bottom: 16px; }
.guide-role-control {
  min-width: 0;
  position: relative;
}
.guide-role-control > span {
  display: block;
  color: #c5d0da;
  font-size: .76rem;
  font-weight: 800;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.guide-role-control details { position: relative; }
.guide-role-control summary {
  align-items: center;
  background: #0a121a;
  border: 1px solid #40505e;
  cursor: pointer;
  display: grid;
  gap: 9px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  height: 52px;
  list-style: none;
  padding: 5px 9px;
}
.guide-role-control summary::-webkit-details-marker { display: none; }
.guide-role-control summary > img { height: 28px; object-fit: contain; width: 28px; }
.guide-role-control summary small,
.guide-role-control summary strong { display: block; }
.guide-role-control summary small { color: #7f919f; font-size: .58rem; text-transform: uppercase; }
.guide-role-control summary strong { color: #f0f5f8; font-size: .78rem; margin-top: 2px; }
.guide-role-control details[open] summary { border-color: #d0a83f; box-shadow: inset 0 -2px 0 #e7c55b; }
.guide-role-control details[open] summary > i { transform: rotate(180deg); }
.guide-role-control details > div {
  background: #0c141d;
  border: 1px solid #53616d;
  box-shadow: 0 16px 30px rgba(0, 0, 0, .42);
  display: grid;
  inset: calc(100% + 5px) 0 auto;
  min-width: 210px;
  padding: 5px;
  position: absolute;
  z-index: 100;
}
.guide-role-control label {
  align-items: center;
  border: 1px solid transparent;
  color: #b9c7d2;
  cursor: pointer;
  display: flex;
  gap: 8px;
  min-height: 44px;
  min-width: 0;
  padding: 7px 9px;
  position: relative;
}
.guide-role-control label:is(:hover, :focus-within) { background: #15212b; border-color: #465866; }
.guide-role-control label:has(input:checked) {
  background: #24301f;
  border-color: #d0a83f;
  color: #ffe28b;
}
.guide-role-control input {
  height: 1px;
  inset: 50% auto auto 50%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}
.guide-role-control label img { height: 25px; object-fit: contain; width: 25px; }
.guide-role-control label span { font-size: .76rem; font-weight: 800; white-space: nowrap; }
.guide-native-fields > button {
  background: #3d3217;
  border: 1px solid var(--guide-gold);
  border-radius: 0;
  color: #ffe08a;
  font-weight: 800;
  height: 58px;
  padding: 0 18px;
  white-space: nowrap;
}
.guide-native-fields :focus-visible { outline: 2px solid #8fe6ef; outline-offset: 2px; }
.guide-picker-status { color: #7edcb2; margin: 12px 0 0; }

.guide-native-modes {
  border-top: 3px solid var(--guide-violet);
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(210px, .35fr) minmax(0, 1fr);
}
.guide-native-modes > div:last-child { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.guide-native-modes a { align-items: center; border: 1px solid #484f59; color: #e7edf3; display: grid; gap: 11px; grid-template-columns: 52px minmax(0, 1fr); min-width: 0; padding: 10px; text-decoration: none; }
.guide-native-modes a > img { border: 1px solid #4f5965; height: 52px; object-fit: cover; width: 52px; }
.guide-native-modes a > span { min-width: 0; }
.guide-native-modes a strong,
.guide-native-modes a small { display: block; }
.guide-native-modes a:nth-child(1) { border-top: 3px solid var(--guide-cyan); }
.guide-native-modes a:nth-child(2) { border-top: 3px solid var(--guide-gold); }
.guide-native-modes a:nth-child(3) { border-top: 3px solid var(--guide-coral); }
.guide-native-modes a:nth-child(4) { border-top: 3px solid var(--guide-violet); }
.guide-native-modes a[aria-current="page"] { background: #24202c; border-color: #b796eb; }
.guide-native-modes small { color: #aab7c3; line-height: 1.4; overflow-wrap: anywhere; }

.guide-native-explainer { border-top: 3px solid var(--guide-mint); }
.guide-native-explainer > div { display: grid; gap: 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 18px; }
.guide-native-explainer article { border: 1px solid #3b4650; min-width: 0; padding: 15px; }
.guide-native-explainer article > b { align-items: center; border: 1px solid var(--guide-gold); color: #f4cb67; display: flex; height: 32px; justify-content: center; margin-bottom: 14px; width: 32px; }
.guide-native-explainer article:nth-child(2) > b { border-color: var(--guide-coral); color: #ff9d93; }
.guide-native-explainer article:nth-child(3) > b { border-color: var(--guide-violet); color: #d0b6f8; }
.guide-native-explainer article:nth-child(4) > b { border-color: var(--guide-cyan); color: #92e4eb; }
.guide-native-explainer article:nth-child(5) > b { border-color: var(--guide-mint); color: #9ce8c8; }
.guide-native-explainer article > strong { display: block; }
.guide-native-explainer article > p { color: #aeb9c4; font-size: .9rem; line-height: 1.5; }

.guide-fit-check {
  align-items: center;
  border-inline-start: 4px solid var(--guide-gold);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) auto minmax(220px, .36fr);
}
.guide-fit-check h2 { letter-spacing: 0; margin: 4px 0 8px; }
.guide-fit-check h2:has(.guide-role-inline-icon) { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.guide-role-inline-icon { height: 34px; object-fit: contain; width: 34px; }
.guide-fit-check p { color: #b2bdc8; line-height: 1.55; margin: 0; }
.guide-fit-check > strong { border: 1px solid #aa8433; color: #f2cd70; padding: 9px 12px; }
.guide-fit-check > strong.is-fit-primary,
.guide-fit-check > strong.is-fit-recommended { border-color: #459a75; color: #8ce0ba; }
.guide-fit-check > strong.is-fit-avoid { border-color: #a14b57; color: #f4919a; }
.guide-fit-check > aside { border-inline-start: 1px solid #46505a; padding-inline-start: 18px; }
.guide-fit-check > aside > span { color: #f2948d; font-weight: 800; }

.guide-interaction { border-top: 3px solid var(--guide-coral); }
.guide-interaction > div { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guide-interaction article { border: 1px solid #4a434b; min-width: 0; padding: 17px; }
.guide-interaction article.is-reviewed { border-inline-start: 4px solid var(--guide-gold); }
.guide-interaction article small { color: #ee8e87; text-transform: uppercase; }
.guide-interaction article h3 { font-size: 1.16rem; letter-spacing: 0; margin: 7px 0 10px; }
.guide-interaction article p,
.guide-interaction li { color: #b1bdc8; line-height: 1.55; }
.guide-interaction article strong { color: #eac865; }

.guide-abilities { border-top: 3px solid var(--guide-cyan); }
.guide-abilities > div { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guide-abilities > div > article { border: 1px solid #3b4955; min-width: 0; }
.guide-abilities article > header { align-items: center; background: #131c25; display: flex; gap: 12px; padding: 14px; }
.guide-abilities article > header img { border: 1px solid #497080; }
.guide-abilities article > header h3 { letter-spacing: 0; margin: 0; }
.guide-abilities ol { list-style: none; margin: 0; padding: 0; }
.guide-abilities li { border-top: 1px solid #35414c; display: grid; gap: 12px; grid-template-columns: 34px minmax(0, 1fr); padding: 13px 14px; }
.guide-abilities li > b { align-items: center; background: #362e18; border: 1px solid #b48d37; color: #f2ca68; display: flex; height: 32px; justify-content: center; width: 32px; }
.guide-abilities li strong { display: block; }
.guide-abilities li p { color: #aeb9c4; font-size: .88rem; line-height: 1.48; margin: 5px 0; }
.guide-abilities li small { color: #86d9df; overflow-wrap: anywhere; }

.guide-native-next {
  align-items: center;
  border-inline-start: 4px solid var(--guide-violet);
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 40px;
}
.guide-native-next p { color: #afbbc6; line-height: 1.55; }
.guide-native-next > div:last-child { display: flex; flex-wrap: wrap; gap: 10px; }
.guide-native-next a { border: 1px solid #765ba0; color: #dec8ff; padding: 11px 14px; text-decoration: none; }
.guide-native-next a:last-child { border-color: #a97f32; color: #f1ce74; }

@media (max-width: 1050px) {
  .guide-native-fields { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .guide-native-fields > .guide-role-control { grid-column: 1 / 2; }
  .guide-native-fields > button { grid-column: 3 / 4; }
  .guide-native-explainer > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guide-fit-check { grid-template-columns: minmax(0, 1fr) auto; }
  .guide-fit-check > aside { border-inline-start: 0; border-top: 1px solid #46505a; grid-column: 1 / -1; padding: 14px 0 0; }
}

@media (max-width: 760px) {
  .go-native-guide { width: min(100% - 18px, 1460px); }
  .guide-native-hero,
  .guide-matchup-hero { grid-template-columns: 1fr; min-height: 0; padding: 24px 18px; }
  .guide-native-hero > aside { border-inline-start: 0; border-top: 1px solid #514366; padding: 18px 0 0; }
  .guide-versus-portraits { justify-content: start; }
  .guide-versus-portraits img { height: 76px; width: 76px; }
  .guide-native-picker > header,
  .guide-interaction > header,
  .guide-abilities > header { align-items: start; flex-direction: column; }
  .guide-native-fields { grid-template-columns: 1fr; }
  .guide-native-fields > .guide-versus-label { padding: 0; text-align: center; }
  .guide-native-fields > .guide-role-control,
  .guide-native-fields > button { grid-column: auto; }
  .guide-role-control details > div { min-width: 100%; }
  .guide-native-modes { grid-template-columns: 1fr; }
  .guide-native-modes > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-native-explainer > div,
  .guide-interaction > div,
  .guide-abilities > div { grid-template-columns: 1fr; }
  .guide-fit-check { align-items: start; grid-template-columns: 1fr; }
  .guide-fit-check > aside { grid-column: auto; }
  .guide-native-next { grid-template-columns: 1fr; }
  .guide-native-next > div:last-child { display: grid; }
}

/* Champion cards show lane identity with the same neutral map artwork used by guides. */
.champion-directory .champion-card-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  overflow: visible;
}
.champion-directory .champion-card-roles > span {
  align-items: center;
  border: 1px solid #3a4855;
  display: inline-flex;
  gap: 4px;
  min-width: 0;
  padding: 3px 5px;
}
.champion-directory .champion-card-roles img {
  border-radius: 0;
  flex: 0 0 auto;
  height: 17px;
  object-fit: contain;
  width: 17px;
}
.champion-directory .champion-card-roles b {
  background: transparent;
  color: #b9c8d5;
  font-size: .56rem;
  padding: 0;
}

@media (max-width: 430px) {
  .guide-native-modes > div:last-child,
  .guide-native-explainer > div { grid-template-columns: 1fr; }
  .guide-native-hero h1,
  .guide-matchup-hero h1 { font-size: 2.15rem; }
}

/* ARAM pages use Howling Abyss context instead of exposing the internal Rift route source. */
.is-aram-route .champion-route-hero,
.is-aram-matchup .guide-matchup-hero,
.is-aram-directory .guide-native-hero {
  border-top-color: #7c70e8;
  box-shadow: inset 0 -1px 0 #484573;
}
.is-aram-route .champion-route-hero::before,
.is-aram-matchup .guide-matchup-hero::before,
.is-aram-directory .guide-native-hero::before {
  background: linear-gradient(90deg, rgba(61, 189, 210, .2), rgba(126, 100, 225, .2), rgba(227, 111, 159, .14));
}
.is-aram-route .champion-route-badges .is-fit-aram {
  border-color: #6dcbd9;
  color: #9be8ef;
}
.is-aram-route .champion-route-badges .is-fit-aram img,
.is-aram-matchup .guide-matchup-hero .eyebrow img {
  border-radius: 50%;
  object-fit: cover;
}
.champion-aram-rules,
.champion-aram-plan {
  background: #11131d;
  border: 1px solid #3c4352;
  border-top: 3px solid #7369dd;
  margin-top: 18px;
  padding: 22px;
}
.champion-aram-rules > header,
.champion-aram-plan > header {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: space-between;
}
.champion-aram-rules h2,
.champion-aram-plan h2 { letter-spacing: 0; margin: 5px 0 8px; }
.champion-aram-rules header p,
.champion-aram-plan header p { color: #b2bdca; line-height: 1.55; margin-bottom: 0; }
.champion-aram-rules > header img {
  border: 1px solid #5b67a1;
  box-shadow: 0 0 28px rgba(92, 196, 217, .18);
  flex: 0 0 auto;
  object-fit: cover;
}
.champion-aram-rules > div,
.champion-aram-plan-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
}
.champion-aram-rules article,
.champion-aram-plan-grid article {
  background: #0c141d;
  border: 1px solid #364452;
  min-width: 0;
  padding: 15px;
}
.champion-aram-rules article { display: grid; gap: 12px; grid-template-columns: auto minmax(0, 1fr); }
.champion-aram-rules article > span {
  align-items: center;
  border: 1px solid #5d71c8;
  color: #b9afff;
  display: flex;
  font-size: .76rem;
  font-weight: 900;
  height: 32px;
  justify-content: center;
  width: 32px;
}
.champion-aram-rules article:nth-child(2) > span { border-color: #c0963c; color: #f0cd75; }
.champion-aram-rules article:nth-child(3) > span { border-color: #3e9b79; color: #8ee2bc; }
.champion-aram-rules article:nth-child(4) > span { border-color: #b15a74; color: #f4a0b7; }
.champion-aram-rules strong,
.champion-aram-plan-grid strong { color: #f1f4f8; display: block; }
.champion-aram-rules article p,
.champion-aram-plan-grid p { color: #a7b4c0; font-size: .9rem; line-height: 1.5; margin: 5px 0 0; }
.champion-aram-plan { border-top-color: #50bfd0; }
.champion-aram-plan > header > span {
  border: 1px solid #5982c7;
  color: #a9c8ff;
  padding: 9px 12px;
  white-space: nowrap;
}
.champion-aram-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.champion-aram-plan-grid article { display: grid; gap: 11px; grid-template-columns: auto minmax(0, 1fr); }
.champion-aram-plan > aside {
  background: #171626;
  border-inline-start: 4px solid #c1943e;
  margin-top: 12px;
  padding: 14px 16px;
}
.champion-aram-plan > aside strong { color: #f0cc75; }
.champion-aram-plan > aside p { color: #b2bdc8; line-height: 1.5; margin: 5px 0 0; }
.guide-native-picker.is-aram { border-top-color: #786de0; }
.guide-native-picker.is-aram .guide-native-fields {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(175px, .42fr) auto;
}
.guide-aram-format {
  align-items: center;
  align-self: end;
  background: #151725;
  border: 1px solid #4c5681;
  display: flex;
  gap: 10px;
  min-height: 52px;
  padding: 5px 10px;
}
.guide-aram-format img { border-radius: 50%; }
.guide-aram-format small,
.guide-aram-format strong { display: block; }
.guide-aram-format small { color: #8e9dac; font-size: .68rem; text-transform: uppercase; }
.guide-aram-format strong { color: #c9c1ff; margin-top: 2px; }
.guide-native-explainer.is-aram { border-top-color: #6fcbd8; }
.guide-fit-check.is-aram {
  background: linear-gradient(90deg, #111d25, #161522);
  border-inline-start-color: #7167d9;
  grid-template-columns: minmax(0, 1fr) auto;
}
.guide-fit-check.is-aram > strong { border-color: #5a71c7; color: #b8caff; }
.guide-native-next.is-aram { border-inline-start-color: #57bdcd; }

@media (max-width: 1180px) {
  .guide-native-picker.is-aram .guide-native-fields { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .guide-native-picker.is-aram .guide-aram-format { grid-column: 1 / 2; }
  .guide-native-picker.is-aram .guide-native-fields > button { grid-column: 2 / 4; }
  .champion-aram-rules > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .guide-native-picker.is-aram .guide-native-fields,
  .champion-aram-rules > div,
  .champion-aram-plan-grid { grid-template-columns: 1fr; }
  .guide-native-picker.is-aram .guide-aram-format,
  .guide-native-picker.is-aram .guide-native-fields > button { grid-column: auto; }
  .champion-aram-rules,
  .champion-aram-plan { padding: 16px; }
  .champion-aram-rules > header,
  .champion-aram-plan > header { align-items: start; }
  .champion-aram-rules > header img { height: 64px; width: 64px; }
}

/* v20260828-4: readable six-item build lines and separated comparison routes. */
.champion-build-variant-list {
  gap: 12px;
  padding: 12px;
  background: transparent;
}
.champion-build-variant {
  border: 1px solid #394858;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
}
.champion-build-variant.is-recommended { border-color: #6f6132; }
.champion-build-variant ol {
  counter-reset: build-step;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .65rem;
}
.champion-build-variant li {
  grid-template-columns: 22px 34px minmax(0, 1fr);
  gap: .45rem;
  padding: .6rem;
  border: 1px solid #2f3c48;
  border-top: 2px solid var(--route-accent);
  counter-increment: build-step;
}
.champion-build-variant li::before {
  content: counter(build-step);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--route-accent);
  font-size: .7rem;
  font-weight: 900;
}
.champion-build-dialog { max-width: 1280px; }
.champion-build-variant-list.is-dialog {
  gap: 18px;
  padding: 18px 20px 24px;
}
.champion-build-variant-list.is-dialog .champion-build-variant {
  box-shadow: 0 13px 30px rgba(0, 0, 0, .28);
}
@media (max-width: 1040px) {
  .champion-build-variant ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .champion-build-variant ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .champion-build-variant ol { grid-template-columns: 1fr; }
  .champion-build-variant-list,
  .champion-build-variant-list.is-dialog { gap: 10px; padding: 9px; }
}

/* Build names need a readable column, including enlarged text and translations. */
.champion-build-variant ol { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.champion-build-variant-identity,
.champion-build-variant li > span,
.champion-build-sequence article > div { min-width: 0; }
.champion-build-variant-identity strong,
.champion-build-variant li b,
.champion-build-sequence h3 { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
.champion-build-variant li b { font-size: 1rem; line-height: 1.4; }
.champion-build-variant li small,
.champion-build-variant > summary small,
.champion-build-variant-identity em,
.champion-build-variant-action { font-size: .875rem; line-height: 1.5; }
.champion-build-variant-identity em { display: block; overflow: visible; -webkit-line-clamp: unset; }
.champion-build-variant li { padding: .75rem; }
.champion-build-sequence small { font-size: .875rem; line-height: 1.5; }
.champion-build-sequence p { font-size: 1rem; line-height: 1.55; }
.champion-build-variants p,
.champion-build-variant-identity,
.champion-build-sequence small,
.champion-build-variant-action > span,
.champion-build-notes li { overflow-wrap: anywhere; }
.champion-build-variant-action > span { min-width: 0; }
.champion-build-view { flex-wrap: wrap; min-width: 0; }
.champion-build-view button { min-width: 0; font-size: .875rem; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .champion-build-sequence { grid-template-columns: 1fr; }
  .champion-build-variant ol { grid-template-columns: 1fr; }
  .champion-build-variant > summary { grid-template-columns: 36px minmax(0, 1fr); }
  .champion-build-variant-icons { grid-column: 1 / -1; grid-template-columns: repeat(6, minmax(0, 38px)); }
  .champion-build-variant-icons img { width: 100%; height: auto; aspect-ratio: 1; }
  .champion-build-variant-action { grid-column: 1 / -1; grid-row: auto; justify-content: space-between; white-space: normal; }
}
@media (max-width: 360px) {
  .champion-route-page main { overflow-wrap: anywhere; }
  .champion-route-page .champion-abilities,
  .champion-route-page .champion-rune-plan { padding: 10px; }
  .champion-route-page .champion-ability-list > article { padding: 8px; }
  .champion-route-page .champion-ability-reading p,
  .champion-route-page .champion-ability-mechanics > div { padding: 8px; }
  .champion-route-page .champion-rune-tree { padding: 8px; }
  .champion-route-page .champion-rune-plan > .champion-rune-columns { padding: 0; border: 0; background: transparent; }
  .champion-route-page .champion-rune-tree h3 { flex-wrap: wrap; }
  .champion-route-hero { grid-template-columns: minmax(0, 1fr); }
  .champion-route-hero > div { min-width: 0; }
  .champion-route-badges span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .champion-route-badges span > img { flex-shrink: 0; }
  .champion-route-overview-link { min-width: 0; overflow-wrap: anywhere; }
  .champion-route-page .champion-ability-list > article { grid-template-columns: 36px minmax(0, 1fr); }
  .champion-route-page .champion-ability-copy { grid-column: 1 / -1; }
  .champion-route-page .champion-ability-reading { min-width: 0; }
  .champion-route-page .champion-ability-reading p { min-width: 0; overflow-wrap: anywhere; }
  .champion-route-page .champion-ability-values span { min-width: 0; max-width: 100%; flex-wrap: wrap; overflow-wrap: anywhere; }
  .champion-route-page .champion-state-panel { grid-template-columns: minmax(0, 1fr); }
  .champion-route-page .champion-state-summary,
  .champion-route-page .champion-state-phases article > div { min-width: 0; overflow-wrap: anywhere; }
  .champion-route-page .champion-state-phases article { grid-template-columns: minmax(0, 1fr); }
  .champion-route-page .champion-state-tabs { grid-template-columns: minmax(0, 1fr); }
  .champion-route-choices article { grid-template-columns: minmax(0, 1fr); }
  .champion-route-choices article > div { min-width: 0; }
  .champion-rune-tree > div > span { flex-direction: column; align-items: flex-start; }
  .champion-rune-tree b { width: 100%; }
  .champion-aram-plan > header { flex-direction: column; gap: 12px; }
  .champion-aram-plan > header > span { max-width: 100%; white-space: normal; }
  .champion-build-variant-list,
  .champion-build-variant-list.is-dialog { padding: 4px; }
  .champion-build-plan { padding: 10px; }
  .champion-build-variants > header { padding: .6rem; }
  .champion-build-view { width: 100%; }
  .champion-build-view button { width: 100%; }
  .champion-build-variant-identity { grid-column: 1 / -1; }
  .champion-build-variant li { grid-template-columns: 22px minmax(0, 1fr); padding: .5rem; }
  .champion-build-variant li > span { grid-column: 1 / -1; }
  .champion-build-notes { padding: .65rem; }
  .champion-build-notes ul { padding-inline-start: 1rem; }
  .champion-build-sequence article { grid-template-columns: 32px minmax(0, 1fr); }
  .champion-build-sequence article > div { grid-column: 1 / -1; }
  .champion-build-variant > summary { padding: .65rem; gap: .55rem; }
  .champion-build-variant > div { padding: .5rem; }
}