@import url('/css/bootstrap-icons.min.css?v=1.11.3');

:root {
  color-scheme: dark;
  --bg: #070c11;
  --panel: #101821;
  --panel-2: #17212b;
  --line: #2a3945;
  --text: #f5f7f8;
  --muted: #a4b5c1;
  --gold: #d6a93f;
  --cyan: #39c8d4;
  --green: #45c486;
  --red: #ed6a6a;
}

/* v181: clearer, queue-aware champion facts, effects, and mode selection. */
.champion-page .champion-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  border: 1px solid #26323d;
  border-width: 1px 0;
  background: #26323d;
}
.champion-page .champion-facts > div {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 11px;
  min-width: 0;
  min-height: 94px;
  padding: 16px 17px;
  border: 0;
  background: linear-gradient(135deg, rgba(var(--fact-rgb), .09), #0a1119 58%);
  box-shadow: inset 0 3px var(--fact-color);
}
.champion-page .champion-facts > div.is-role { --fact-color: #efbd5d; --fact-rgb: 239, 189, 93; }
.champion-page .champion-facts > div.is-class { --fact-color: #b88cff; --fact-rgb: 184, 140, 255; }
.champion-page .champion-facts > div.is-difficulty { --fact-color: #f17f9e; --fact-rgb: 241, 127, 158; }
.champion-page .champion-facts > div.is-attacks { --fact-color: #6ed6a3; --fact-rgb: 110, 214, 163; }
.champion-page .champion-facts > div.is-damage.is-magic { --fact-color: #c09aff; --fact-rgb: 192, 154, 255; }
.champion-page .champion-facts > div.is-damage.is-physical { --fact-color: #ff9d7e; --fact-rgb: 255, 157, 126; }
.champion-page .champion-facts > div.is-damage.is-mixed { --fact-color: #f0ca62; --fact-rgb: 240, 202, 98; }
.champion-page .champion-facts > div.is-damage.is-variable { --fact-color: #67d8cc; --fact-rgb: 103, 216, 204; }
.champion-page .champion-facts > div.is-patch { --fact-color: #8ea4ff; --fact-rgb: 142, 164, 255; }
.champion-page .champion-facts > div > i {
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
  align-self: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(var(--fact-rgb), .48);
  border-radius: 50%;
  color: var(--fact-color);
  background: rgba(var(--fact-rgb), .1);
  font-size: .8rem;
  font-style: normal;
  font-weight: 950;
}
.champion-page .champion-facts > div > i img { width: 25px; height: 25px; object-fit: contain; }
.champion-page .champion-facts > div > span { align-self: end; color: var(--fact-color); }
.champion-page .champion-facts > div > strong {
  overflow-wrap: anywhere;
  color: #f1f5f8;
  line-height: 1.28;
}
.champion-page .champion-facts > div > small { grid-column: 2; color: #9bacb8; }
.champion-page .champion-attack-fact { box-shadow: inset 0 3px var(--fact-color); }

.champion-page .champion-status-summary {
  --effect-color: #efbd5d;
  --effect-rgb: 239, 189, 93;
  padding: 0;
  overflow: hidden;
  border: 1px solid #3a3340;
  border-left: 0;
  border-radius: 7px;
  background: #0b1018;
  box-shadow: inset 4px 0 #efbd5d;
}
.champion-page .champion-status-summary > header {
  align-items: center;
  margin: 0;
  padding: 22px 24px;
  border-bottom: 1px solid #342f3a;
  background: linear-gradient(110deg, rgba(239, 189, 93, .1), rgba(176, 119, 242, .07) 52%, transparent);
}
.champion-page .champion-status-summary > header > div { max-width: 780px; }
.champion-page .champion-status-summary > header .eyebrow { color: #f0bd65; }
.champion-page .champion-status-summary > header > a {
  gap: 12px;
  min-height: 44px;
  padding: 0 8px 0 15px;
  border-color: rgba(239, 189, 93, .42);
  border-radius: 6px;
  color: #fff1cf;
  background: rgba(83, 62, 31, .42);
}
.champion-page .champion-status-summary > header > a b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #171108;
  background: #efbd5d;
}
.champion-page .champion-status-summary > div { gap: 9px; padding: 18px 22px 22px; }
.champion-page .champion-status-summary > div > a {
  --card-color: #b990f5;
  --card-rgb: 185, 144, 245;
  position: relative;
  grid-template-columns: 40px minmax(0, 1fr) 20px;
  min-height: 82px;
  padding: 12px;
  overflow: hidden;
  border-color: rgba(var(--card-rgb), .3);
  border-left: 3px solid var(--card-color);
  border-radius: 6px;
  background: linear-gradient(120deg, rgba(var(--card-rgb), .13), #10151e 62%);
}
.champion-page .champion-status-summary > div > a.is-sustain { --card-color: #69d995; --card-rgb: 105, 217, 149; }
.champion-page .champion-status-summary > div > a.is-protection { --card-color: #7ea8ff; --card-rgb: 126, 168, 255; }
.champion-page .champion-status-summary > div > a.is-soft-control { --card-color: #efbd5d; --card-rgb: 239, 189, 93; }
.champion-page .champion-status-summary > div > a.is-hard-control { --card-color: #f07191; --card-rgb: 240, 113, 145; }
.champion-page .champion-status-summary > div > a.is-information { --card-color: #62d8d0; --card-rgb: 98, 216, 208; }
.champion-page .champion-status-summary > div > a > b {
  width: 38px;
  height: 38px;
  border-color: rgba(var(--card-rgb), .55);
  border-radius: 50%;
  color: var(--card-color);
  background: rgba(var(--card-rgb), .12);
}
.champion-page .champion-status-summary > div > a > i { color: var(--card-color); font-style: normal; }
.champion-page .champion-status-summary > div > a small { color: var(--card-color); }
.champion-page .champion-status-summary > div > a:is(:hover, :focus-visible) {
  border-color: var(--card-color);
  background: linear-gradient(120deg, rgba(var(--card-rgb), .2), #141a23 66%);
  transform: translateY(-1px);
}

.champion-page .champion-mode-switcher {
  margin: 22px 0 12px;
  padding: 0;
  overflow: hidden;
  border-color: #3b3448;
  border-radius: 7px;
  background: #0b1018;
}
.champion-page .champion-mode-switcher > header {
  align-items: center;
  margin: 0;
  padding: 19px 22px;
  border-bottom: 1px solid #3b3448;
  background: linear-gradient(105deg, rgba(181, 137, 255, .1), rgba(239, 189, 93, .065) 64%, transparent);
}
.champion-page .champion-mode-switcher > header .eyebrow { color: #c8a4ff; }
.champion-page .champion-mode-switcher > header > p { color: #adb6c1; font-size: .74rem; }
.champion-page .champion-mode-switcher .champion-build-queues {
  gap: 10px;
  padding: 14px;
}
.champion-page .champion-mode-switcher .champion-build-queues > a {
  --mode-color: #70dce8;
  --mode-rgb: 112, 220, 232;
  --mode-image: url('/league/assets/modes/summoners-rift.png');
  position: relative;
  isolation: isolate;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 86px;
  padding: 12px 13px;
  overflow: hidden;
  border-color: rgba(var(--mode-rgb), .32);
  border-radius: 7px;
  background: #111820;
}
.champion-page .champion-mode-switcher .champion-build-queues > a::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  content: '';
  opacity: .28;
  background: var(--mode-image) center/cover;
}
.champion-page .champion-mode-switcher .champion-build-queues > a::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: '';
  background: linear-gradient(90deg, #0a1017 12%, rgba(10, 16, 23, .88) 55%, rgba(var(--mode-rgb), .13));
}
.champion-page .champion-mode-switcher .champion-build-queues > a.is-ranked { --mode-color: #f0c567; --mode-rgb: 240, 197, 103; --mode-image: url('/league/assets/modes/summoners-rift.png'); }
.champion-page .champion-mode-switcher .champion-build-queues > a.is-swiftplay { --mode-color: #f0bd5d; --mode-rgb: 240, 189, 93; --mode-image: url('/league/assets/modes/swiftplay.jpg'); }
.champion-page .champion-mode-switcher .champion-build-queues > a.is-aram { --mode-color: #bd91ff; --mode-rgb: 189, 145, 255; --mode-image: url('/league/assets/modes/howling-abyss.png'); }
.champion-page .champion-mode-switcher .champion-build-queues > a > i {
  width: 50px;
  height: 50px;
  border: 2px solid rgba(var(--mode-rgb), .7);
  border-radius: 50%;
  background: var(--mode-image) center/cover;
  box-shadow: 0 0 18px rgba(var(--mode-rgb), .2);
}
.champion-page .champion-mode-switcher .champion-build-queues > a > span { display: block; min-width: 0; }
.champion-page .champion-mode-switcher .champion-build-queues > a > span strong,
.champion-page .champion-mode-switcher .champion-build-queues > a > span small { display: block; }
.champion-page .champion-mode-switcher .champion-build-queues > a > span strong { color: #f4f6f8; font-size: .83rem; line-height: 1.25; }
.champion-page .champion-mode-switcher .champion-build-queues > a > span small {
  margin-top: 5px;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: #a9b4bf;
  background: transparent;
  text-overflow: ellipsis;
}
.champion-page .champion-mode-switcher .champion-build-queues > a > b {
  padding: 5px 8px;
  border: 1px solid rgba(var(--mode-rgb), .35);
  border-radius: 999px;
  color: var(--mode-color);
  background: rgba(var(--mode-rgb), .09);
  font-size: .55rem;
  text-transform: uppercase;
}
.champion-page .champion-mode-switcher .champion-build-queues > a:is(:hover, :focus-visible) {
  border-color: var(--mode-color);
  background: #141a22;
  transform: translateY(-1px);
}
.champion-page .champion-mode-switcher .champion-build-queues > a.is-current {
  border-color: var(--mode-color);
  color: #fff;
  background: #151b22;
  box-shadow: inset 0 -4px var(--mode-color), 0 0 0 1px rgba(var(--mode-rgb), .17);
}

@media (max-width: 1050px) {
  .champion-page .champion-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .champion-page .champion-facts > div:nth-child(4),
  .champion-page .champion-facts > div:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 820px) {
  .champion-page .champion-facts { grid-template-columns: 1fr 1fr; }
  .champion-page .champion-facts > div:last-child { grid-column: 1 / -1; }
  .champion-page .champion-mode-switcher .champion-build-queues { grid-template-columns: 1fr; }
  .champion-page .champion-mode-switcher .champion-build-queues > a { min-height: 76px; }
}
@media (max-width: 590px) {
  .champion-page .champion-facts { grid-template-columns: 1fr; }
  .champion-page .champion-facts > div:last-child { grid-column: auto; }
  .champion-page .champion-facts > div { min-height: 82px; }
  .champion-page .champion-status-summary > header,
  .champion-page .champion-mode-switcher > header { padding: 18px; }
  .champion-page .champion-status-summary > header > a { width: 100%; justify-content: space-between; }
  .champion-page .champion-status-summary > div { padding: 14px; }
  .champion-page .champion-status-summary > div > a { min-height: 76px; }
  .champion-page .champion-mode-switcher .champion-build-queues { padding: 10px; }
  .champion-page .champion-mode-switcher .champion-build-queues > a { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .champion-page .champion-mode-switcher .champion-build-queues > a > i { width: 44px; height: 44px; }
}

/* Role quest guide */
.quests-page main{display:grid;gap:28px;max-width:1440px;margin:0 auto;padding:28px 24px 72px}
.quests-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);min-height:540px;border:1px solid #25384a;background:#0b111b;overflow:hidden}
.quests-hero>div{display:flex;flex-direction:column;justify-content:center;padding:clamp(34px,5vw,76px)}
.quests-hero h1{max-width:830px;margin:10px 0 18px;font-size:clamp(42px,5.2vw,76px);line-height:1.02;letter-spacing:0}
.quests-hero>div>p:not(.eyebrow){max-width:720px;color:#b8c4d4;font-size:18px;line-height:1.7}
.quests-hero nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.quests-hero nav a,.support-quest-guide aside a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 16px;border:1px solid #36516a;background:#101a27;color:#eaf7ff;font-weight:800;text-decoration:none}
.quests-hero nav a:hover,.support-quest-guide aside a:hover{border-color:#59dce6;color:#7ff5f2}
.quests-hero figure{position:relative;min-height:500px;margin:0;background:#111827;overflow:hidden}
.quests-hero figure:after{content:"";position:absolute;inset:0;background:rgba(5,10,18,.2);pointer-events:none}
.quests-hero figure img{width:100%;height:100%;object-fit:cover;opacity:.72}
.quests-hero figure span,.quests-hero figure strong,.quests-hero figure em{position:absolute;z-index:1;display:flex;align-items:center;gap:8px;border:1px solid #3c5a6f;background:#08111ee8;color:#eaf7ff;font-style:normal;font-weight:900;box-shadow:0 12px 30px #0007}
.quests-hero figure span{left:8%;top:13%;padding:12px 16px;color:#73eef0}.quests-hero figure strong{left:37%;top:46%;padding:16px 22px;border-color:#efb84a;color:#ffd976;font-size:21px}.quests-hero figure em{right:8%;bottom:13%;padding:12px 16px;border-color:#56c98d;color:#86efb8}
.quest-plain-answer{display:grid;grid-template-columns:72px minmax(0,1fr);gap:20px;align-items:center;padding:25px 28px;border:1px solid #2b675e;border-left:5px solid #59d5b0;background:#0d1c1d}
.quest-plain-answer>i{display:grid;place-items:center;width:58px;height:58px;border:1px solid #d9a83b;color:#ffd46a;font-size:28px}.quest-plain-answer span{min-width:0}
.quest-plain-answer small,.role-quest-directory article header small,.support-quest-stages small,.support-upgrade-heading small,.quest-queue-rules small{display:block;color:#69e5dc;font-weight:900;text-transform:uppercase}
.quest-plain-answer strong{display:block;margin:4px 0 5px;font-size:24px}.quest-plain-answer p{margin:0;color:#b6c6cf;line-height:1.6}
.quest-flow,.role-quest-directory,.support-quest-guide,.quest-roaming,.quest-queue-rules,.quest-sources{border:1px solid #26394a;background:#0b121d}
.quest-flow>header,.role-quest-directory>header,.support-quest-guide>header,.quest-roaming>header,.quest-queue-rules>header,.quest-sources>header{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.6fr);gap:28px;align-items:end;padding:28px 30px;border-bottom:1px solid #26394a}
.quest-flow h2,.role-quest-directory h2,.support-quest-guide h2,.quest-roaming h2,.quest-queue-rules h2,.quest-sources h2{margin:5px 0 0;font-size:clamp(28px,3vw,42px);letter-spacing:0}
.quest-flow>header>p,.role-quest-directory>header>p,.support-quest-guide>header>p,.quest-roaming>header>p{margin:0;color:#9fb1c1;line-height:1.65}
.quest-flow ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none}
.quest-flow li,.quest-roaming article{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;padding:25px;border-right:1px solid #26394a}.quest-flow li:last-child{border-right:0}
.quest-flow small,.quest-roaming small{display:block;color:#e8b84d;font-weight:900;text-transform:uppercase}.quest-flow strong,.quest-roaming strong{display:block;margin:5px 0 8px;font-size:19px}.quest-flow p,.quest-roaming p{margin:0;color:#9fb0c0;line-height:1.6}
.role-quest-directory>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#26394a}
.role-quest-directory article{--quest-accent:#58dbe5;min-width:0;padding:25px;background:#0e1622;border-top:4px solid var(--quest-accent)}
.role-quest-directory article.is-top{--quest-accent:#d49a55}.role-quest-directory article.is-jungle{--quest-accent:#51bd83}.role-quest-directory article.is-middle{--quest-accent:#58cbe0}.role-quest-directory article.is-bottom{--quest-accent:#d986a2}.role-quest-directory article.is-support{--quest-accent:#a987e8;grid-column:1/-1}
.role-quest-directory article>header{display:grid;grid-template-columns:48px 58px minmax(0,1fr);gap:13px;align-items:center;margin-bottom:20px}.role-quest-directory article>header img{width:52px;height:52px;object-fit:contain}.role-quest-directory article header small{color:var(--quest-accent)}.role-quest-directory h3{margin:3px 0 0;font-size:27px}
.role-quest-directory dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}.role-quest-directory dl div{padding:17px;border:1px solid #2b4053;background:#0a111b}.role-quest-directory dt{display:flex;align-items:center;gap:8px;color:var(--quest-accent);font-size:13px;font-weight:900;text-transform:uppercase}.role-quest-directory dd{margin:8px 0 0;color:#c5d0dc;line-height:1.6}.quest-role-tip{display:flex;gap:10px;margin:14px 0 0;padding:14px;border-left:3px solid var(--quest-accent);background:#101c29;color:#aec0ce;line-height:1.55}.quest-role-tip i{color:var(--quest-accent)}
.support-quest-guide{border-color:#4b3e68}.support-quest-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none;background:#211b2e}
.support-quest-stages li{position:relative;display:grid;grid-template-columns:44px 68px minmax(0,1fr);gap:13px;align-items:center;min-width:0;padding:24px;border-right:1px solid #4b3e68;background:#121322}.support-quest-stages li:last-child{border-right:0}.support-quest-stages img{width:64px;height:64px;border:2px solid #9f80de}.support-quest-stages strong{display:block;margin:4px 0;font-size:20px}.support-quest-stages p{margin:0;color:#acb9ca;line-height:1.5}.support-quest-stages>li>i{position:absolute;right:-14px;z-index:2;display:grid;place-items:center;width:28px;height:28px;border:1px solid #9f80de;background:#171321;color:#c6a8ff}
.support-shared-riches{display:grid;grid-template-columns:58px minmax(0,1fr);gap:17px;align-items:center;margin:24px;padding:21px;border:1px solid #2d6b6c;background:#0c2022}.support-shared-riches>i{display:grid;place-items:center;width:52px;height:52px;border:1px solid #51d7cc;color:#66eee2;font-size:23px}.support-shared-riches small{display:block;color:#65e9df;font-weight:900;text-transform:uppercase}.support-shared-riches strong{display:block;margin:5px 0}.support-shared-riches p{margin:0;color:#a7bdc4;line-height:1.55}
.support-upgrade-heading{display:flex;justify-content:space-between;gap:22px;align-items:end;padding:5px 24px 17px}.support-upgrade-heading h3{margin:4px 0 0;font-size:25px}.support-upgrade-heading p{max-width:430px;margin:0;color:#a6b3c4}.support-upgrade-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:0 24px 24px}.support-upgrade-grid article{display:flex;flex-direction:column;gap:12px;min-width:0;padding:16px;border:1px solid #40365d;background:#121321}.support-upgrade-grid img{width:56px;height:56px;border:2px solid #9b79dc}.support-upgrade-grid strong{display:block;color:#e7dcff;overflow-wrap:anywhere}.support-upgrade-grid p{margin:6px 0 0;color:#9faec0;font-size:14px;line-height:1.5}
.support-quest-guide aside{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:16px;align-items:center;padding:22px 24px;border-top:1px solid #38526a;background:#0d1925}.support-quest-guide aside>i{display:grid;place-items:center;width:48px;height:48px;border:1px solid #59c8df;color:#6de6f1;font-size:22px}.support-quest-guide aside strong{display:block}.support-quest-guide aside p{margin:5px 0 0;color:#9fb3c3;line-height:1.55}
.quest-roaming>div,.quest-queue-rules>div,.quest-sources>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.quest-roaming article:last-child{border-right:0}
.quest-queue-rules article{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;padding:24px;border-right:1px solid #26394a}.quest-queue-rules article:last-child{border-right:0}.quest-queue-rules article>i{display:grid;place-items:center;width:44px;height:44px;border:1px solid currentColor;font-size:20px}.quest-queue-rules .is-on{color:#66dda4}.quest-queue-rules .is-different{color:#f2c05e}.quest-queue-rules .is-off{color:#72cae4}.quest-queue-rules article span{color:#d9e2ec}.quest-queue-rules article small{color:currentColor}.quest-queue-rules article strong{display:block;margin:5px 0;font-size:19px}.quest-queue-rules article p{margin:0;color:#9fafbe;line-height:1.55}
.quest-sources>div{gap:12px;padding:24px}.quest-sources a{display:grid;grid-template-columns:44px minmax(0,1fr);gap:13px;align-items:center;padding:17px;border:1px solid #30465a;background:#0e1723;color:#eaf5ff;text-decoration:none}.quest-sources a:hover{border-color:#5fd6df}.quest-sources a i{display:grid;place-items:center;width:40px;height:40px;border:1px solid #4fbdc7;color:#69e5e8}.quest-sources a strong,.quest-sources a small{display:block}.quest-sources a small{margin-top:3px;color:#9dafbd;line-height:1.4}
.lane-resource-strip>a{display:flex;align-items:center;gap:12px;min-width:0;padding:17px;border:1px solid #3a5e6c;background:#0c1a23;color:#e9fbff;text-decoration:none}.lane-resource-strip>a i{color:#5ee7e4;font-size:24px}.lane-resource-strip>a strong,.lane-resource-strip>a small{display:block}.lane-resource-strip>a small{margin-top:3px;color:#9eb9c4}
@media(max-width:1100px){.quests-hero{grid-template-columns:1fr}.quests-hero figure{min-height:390px}.role-quest-directory>div{grid-template-columns:1fr}.role-quest-directory article.is-support{grid-column:auto}.support-quest-stages{grid-template-columns:1fr}.support-quest-stages li{border-right:0;border-bottom:1px solid #4b3e68}.support-quest-stages>li>i{right:auto;left:50%;bottom:-14px;transform:rotate(90deg)}.support-upgrade-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.quests-page main{padding:16px 12px 54px;gap:18px}.quests-hero>div{padding:30px 22px}.quests-hero h1{font-size:clamp(37px,11vw,56px)}.quests-hero figure{min-height:330px}.quest-flow>header,.role-quest-directory>header,.support-quest-guide>header,.quest-roaming>header,.quest-queue-rules>header,.quest-sources>header{grid-template-columns:1fr;padding:22px}.quest-flow ol,.quest-roaming>div,.quest-queue-rules>div,.quest-sources>div{grid-template-columns:1fr}.quest-flow li,.quest-roaming article,.quest-queue-rules article{border-right:0;border-bottom:1px solid #26394a}.quest-flow li:last-child,.quest-roaming article:last-child,.quest-queue-rules article:last-child{border-bottom:0}.role-quest-directory dl{grid-template-columns:1fr}.support-quest-guide aside{grid-template-columns:48px minmax(0,1fr)}.support-quest-guide aside a{grid-column:1/-1}.support-upgrade-heading{align-items:start;flex-direction:column}.quest-sources>div{padding:18px}}
@media(max-width:560px){.quest-plain-answer{grid-template-columns:1fr;padding:21px}.quests-hero nav{display:grid}.quests-hero nav a{width:100%}.quests-hero figure span{left:4%;top:8%}.quests-hero figure strong{left:30%;top:44%}.quests-hero figure em{right:4%;bottom:8%}.role-quest-directory article{padding:19px}.role-quest-directory article>header{grid-template-columns:44px 48px minmax(0,1fr)}.role-quest-directory article>header img{width:44px;height:44px}.support-quest-stages li{grid-template-columns:40px 58px minmax(0,1fr);padding:19px}.support-quest-stages img{width:54px;height:54px}.support-upgrade-grid{grid-template-columns:1fr;padding:0 18px 18px}.support-upgrade-grid article{flex-direction:row}.support-shared-riches{grid-template-columns:1fr;margin:18px}.support-upgrade-heading{padding:2px 18px 16px}}

/* v109: current-season objective lifecycle and structure path. */
.objective-season-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: -12px 0 26px;
  padding: 16px 18px;
  border: 1px solid rgba(229, 175, 88, .25);
  border-left: 3px solid #e5af58;
  border-radius: 7px;
  background: #121711;
}
.objective-season-note > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}
.objective-season-note p {
  margin: 0;
  color: #aeb9ae;
  font-size: .8rem;
  line-height: 1.5;
}
.objective-season-note p strong {
  display: block;
  margin-bottom: 2px;
  color: #f0f4ef;
  font-size: .87rem;
}
.objective-season-note a {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid rgba(229, 175, 88, .28);
  border-radius: 6px;
  color: #efca82;
  font-size: .72rem;
  font-weight: 850;
  text-decoration: none;
}
.structure-section {
  margin: 30px 0;
  scroll-margin-top: 90px;
  padding: 28px;
  border: 1px solid rgba(91, 194, 150, .25);
  border-top: 3px solid #5bc296;
  border-radius: 8px;
  background: #0c1516;
}
.structure-section > header {
  display: grid;
  grid-template-columns: minmax(260px, .46fr) minmax(0, .54fr);
  gap: 28px;
  align-items: end;
  margin-bottom: 20px;
}
.structure-section h2 {
  margin: 3px 0 0;
  color: #f2fbf7;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}
.structure-section > header > p,
.structure-section > aside span {
  margin: 0;
  color: #9db5ad;
  font-size: .82rem;
  line-height: 1.58;
}
.structure-path {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr);
  align-items: stretch;
}
.structure-path article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(91, 194, 150, .2);
  border-radius: 7px;
  background: #101c1e;
}
.structure-path > i {
  align-self: center;
  height: 2px;
  background: linear-gradient(90deg, rgba(91,194,150,.15), #5bc296, rgba(91,194,150,.15));
}
.structure-path span,
.structure-path strong,
.structure-path small {
  display: block;
  min-width: 0;
}
.structure-path strong {
  margin-bottom: 5px;
  color: #eff9f5;
  font-size: .87rem;
}
.structure-path small {
  color: #93aaa2;
  font-size: .73rem;
  line-height: 1.5;
}
.structure-section > aside {
  display: flex;
  gap: 14px;
  margin-top: 16px;
  padding: 15px 17px;
  border: 1px solid rgba(91, 194, 150, .18);
  border-left: 3px solid #5bc296;
  border-radius: 7px;
  background: #0a1113;
}
.structure-section > aside strong {
  flex: 0 0 auto;
  color: #b8f0d5;
  font-size: .8rem;
}

/* Jungle role decision guide */
.jungle-decisions {
  margin: 28px 0;
  overflow: hidden;
  border: 1px solid rgba(84, 220, 184, .25);
  border-top: 3px solid #54dcb8;
  border-radius: 8px;
  background: #09141a;
}
.jungle-decisions > header {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  gap: 26px;
  align-items: end;
  padding: 30px;
  border-bottom: 1px solid rgba(84, 220, 184, .15);
  background: linear-gradient(110deg, rgba(19, 97, 80, .18), rgba(39, 33, 75, .12));
}
.jungle-decisions > header h2 { margin: 5px 0 0; color: #f2fbf8; font-size: clamp(1.8rem, 4vw, 3rem); }
.jungle-decisions > header > p { margin: 0; color: #a9bbb7; line-height: 1.65; }
.jungle-duty-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid rgba(132, 166, 183, .14); }
.jungle-duty-strip article { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 13px; align-items: center; min-width: 0; padding: 19px; border-right: 1px solid rgba(132, 166, 183, .14); background: #0d1920; }
.jungle-duty-strip article:last-child { border-right: 0; }
.jungle-duty-strip i { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #52d9e4; border-radius: 6px; color: #52d9e4; background: rgba(82, 217, 228, .08); font-size: 1.2rem; }
.jungle-duty-strip strong, .jungle-duty-strip small { display: block; }
.jungle-duty-strip strong { color: #edf8fa; font-size: .9rem; }
.jungle-duty-strip small { margin-top: 4px; color: #8fa4ad; line-height: 1.45; }
.jungle-five-rules { margin: 20px; overflow: hidden; border: 1px solid rgba(98, 220, 230, .24); border-radius: 7px; background: #08121a; }
.jungle-five-rules > header { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 19px 21px; border-bottom: 1px solid rgba(98, 220, 230, .18); background: linear-gradient(90deg, rgba(49, 196, 211, .1), rgba(126, 91, 208, .08)); }
.jungle-five-rules > header span, .jungle-five-rules > header h3 { display: block; }
.jungle-five-rules > header span { color: #5de0ea; font-size: .66rem; font-weight: 900; text-transform: uppercase; }
.jungle-five-rules > header h3 { margin: 4px 0 0; color: #f4fbfd; font-size: 1.3rem; }
.jungle-five-rules > header > strong { max-width: 340px; color: #d8ba76; font-size: .76rem; text-align: right; }
.jungle-choice-intro { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 13px; align-items: center; margin: 0; padding: 15px 19px; border-bottom: 1px solid rgba(98, 220, 230, .16); color: #a9bac2; background: #0d1b23; font-size: .78rem; line-height: 1.55; }
.jungle-choice-intro > i { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(98, 220, 230, .42); border-radius: 6px; color: #62dce6; }
.jungle-choice-intro strong { color: #e9f8fa; }
.jungle-five-rules ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.jungle-five-rules li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 11px; align-content: start; min-width: 0; padding: 19px 15px; border-right: 1px solid rgba(132, 166, 183, .14); }
.jungle-five-rules li:last-child { border-right: 0; }
.jungle-five-rules li small, .jungle-five-rules li strong, .jungle-five-rules li span { display: block; }
.jungle-five-rules li small { color: #69e1b5; font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.jungle-five-rules li strong { margin-top: 3px; color: #eef7f8; font-size: .86rem; line-height: 1.3; }
.jungle-five-rules li p { margin: 9px 0; color: #9fb0b9; font-size: .74rem; line-height: 1.5; }
.jungle-five-rules li span { padding-top: 9px; border-top: 1px solid rgba(218, 172, 79, .18); color: #b9b2a1; font-size: .7rem; line-height: 1.45; }
.jungle-five-rules li span em { color: #e4c16f; font-style: normal; font-weight: 900; text-transform: uppercase; }
.jungle-lane-hop-answer { display: grid; grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr); gap: 0; margin: 20px; overflow: hidden; border: 1px solid rgba(218, 172, 79, .38); border-left: 4px solid #daac4f; border-radius: 7px; background: #17150e; }
.jungle-lane-hop-verdict { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; align-items: center; padding: 20px; border-right: 1px solid rgba(218, 172, 79, .22); }
.jungle-lane-hop-verdict > i { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid #daac4f; border-radius: 6px; color: #ffe09a; font-size: 1.35rem; }
.jungle-lane-hop-verdict small, .jungle-lane-hop-verdict strong { display: block; }
.jungle-lane-hop-verdict small { color: #d5b86f; font-size: .64rem; font-weight: 900; text-transform: uppercase; }
.jungle-lane-hop-verdict strong { margin-top: 5px; color: #fff2ce; font-size: 1.05rem; }
.jungle-lane-hop-signals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(218, 172, 79, .13); }
.jungle-lane-hop-signals span { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 11px 13px; color: #bbc6c8; background: #111710; font-size: .72rem; line-height: 1.35; }
.jungle-lane-hop-signals .is-good i { color: #67e4b4; }
.jungle-lane-hop-signals .is-caution { background: #1a180f; }
.jungle-lane-hop-signals .is-caution i { color: #e4c16f; }
.jungle-lane-hop-answer > p { grid-column: 1 / -1; margin: 0; padding: 14px 18px; border-top: 1px solid rgba(218, 172, 79, .18); color: #c9c0aa; font-size: .78rem; line-height: 1.55; }
.jungle-lane-hop-answer > p strong { color: #ffe09a; }
.jungle-visit-results { margin: 20px; overflow: hidden; border: 1px solid rgba(104, 226, 183, .27); border-radius: 7px; background: #081712; }
.jungle-visit-results > header { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 18px 20px; border-bottom: 1px solid rgba(104, 226, 183, .18); background: linear-gradient(90deg, rgba(55, 177, 132, .13), rgba(77, 139, 211, .08)); }
.jungle-visit-results h3 { margin: 4px 0 0; color: #f1fbf7; font-size: 1.22rem; }
.jungle-visit-results > header > strong { max-width: 330px; color: #f0cf85; font-size: .76rem; text-align: right; }
.jungle-visit-results > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(104, 226, 183, .14); }
.jungle-visit-results article { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 11px; align-items: center; min-width: 0; padding: 16px; background: #0b1815; }
.jungle-visit-results article > i { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(104, 226, 183, .45); border-radius: 6px; color: #68e2b7; background: rgba(37, 111, 84, .16); }
.jungle-visit-results strong, .jungle-visit-results small { display: block; }
.jungle-visit-results strong { color: #edf9f5; font-size: .8rem; }
.jungle-visit-results small { margin-top: 4px; color: #94aaa3; font-size: .69rem; line-height: 1.45; }
.jungle-decision-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(132, 166, 183, .14); }
.jungle-decision-grid article { min-width: 0; padding: 24px; background: #0b151d; }
.jungle-decision-grid article.is-lane { background: #0d1720; }
.jungle-decision-grid article.is-objective { background: #11151e; }
.jungle-decision-grid article > header { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; }
.jungle-decision-grid article > header small { color: #54dcb8; font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.jungle-decision-grid h3 { margin: 3px 0 0; color: #f3f8fa; font-size: 1.05rem; }
.jungle-decision-grid p { color: #a8b8c0; line-height: 1.62; }
.jungle-decision-grid ul { display: grid; gap: 8px; margin: 17px 0 0; padding: 0; list-style: none; }
.jungle-decision-grid li { position: relative; padding-left: 20px; color: #c7d4d9; font-size: .78rem; line-height: 1.45; }
.jungle-decision-grid li::before { position: absolute; top: .35em; left: 0; width: 8px; height: 8px; border: 2px solid #54dcb8; border-radius: 50%; content: ''; }
.jungle-role-answer { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 16px; align-items: center; margin: 20px; padding: 19px; border: 1px solid rgba(122, 224, 172, .35); border-left: 4px solid #7ae0ac; border-radius: 7px; background: #0c241d; }
.jungle-role-answer > i { display: grid; place-items: center; width: 54px; height: 54px; color: #7ae0ac; font-size: 1.7rem; }
.jungle-role-answer strong { color: #eafff3; }
.jungle-role-answer p { margin: 5px 0 0; color: #a9c9ba; line-height: 1.55; }
.jungle-role-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-top: 1px solid rgba(132, 166, 183, .14); background: rgba(132, 166, 183, .14); }
.jungle-role-faq details { min-width: 0; background: #0a141c; }
.jungle-role-faq summary { display: grid; grid-template-columns: minmax(0, 1fr) 18px; gap: 12px; padding: 18px 20px; color: #edf6f8; font-weight: 850; cursor: pointer; list-style: none; }
.jungle-role-faq summary::-webkit-details-marker { display: none; }
.jungle-role-faq summary i { color: #62dce6; transition: transform .2s ease; }
.jungle-role-faq details[open] summary i { transform: rotate(180deg); }
.jungle-role-faq p { margin: 0; padding: 0 20px 20px; color: #9fb1ba; line-height: 1.65; }
@media (max-width: 900px) {
  .jungle-decisions > header, .jungle-duty-strip, .jungle-decision-grid { grid-template-columns: 1fr; }
  .jungle-five-rules ol { grid-template-columns: 1fr 1fr; }
  .jungle-five-rules li { border-right: 1px solid rgba(132, 166, 183, .14); border-bottom: 1px solid rgba(132, 166, 183, .14); }
  .jungle-five-rules li:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .jungle-visit-results > div { grid-template-columns: 1fr 1fr; }
  .jungle-duty-strip article { border-right: 0; border-bottom: 1px solid rgba(132, 166, 183, .14); }
  .jungle-duty-strip article:last-child { border-bottom: 0; }
}
@media (max-width: 620px) {
  .jungle-decisions > header { padding: 22px 18px; }
  .jungle-five-rules { margin: 14px; }
  .jungle-five-rules > header { align-items: flex-start; flex-direction: column; }
  .jungle-five-rules > header > strong { text-align: left; }
  .jungle-five-rules ol, .jungle-lane-hop-answer, .jungle-lane-hop-signals { grid-template-columns: 1fr; }
  .jungle-five-rules li, .jungle-five-rules li:last-child { grid-column: auto; border-right: 0; }
  .jungle-lane-hop-answer { margin: 14px; }
  .jungle-lane-hop-verdict { border-right: 0; border-bottom: 1px solid rgba(218, 172, 79, .22); }
  .jungle-visit-results { margin: 14px; }
  .jungle-visit-results > header { align-items: flex-start; flex-direction: column; }
  .jungle-visit-results > header > strong { text-align: left; }
  .jungle-visit-results > div { grid-template-columns: 1fr; }
  .jungle-role-faq { grid-template-columns: 1fr; }
  .jungle-role-answer { grid-template-columns: 1fr; margin: 14px; }
}
@media (max-width: 1080px) {
  .structure-path {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .structure-path > i { display: none; }
}
@media (max-width: 620px) {
  .objective-season-note,
  .objective-season-note > div,
  .structure-section > aside {
    align-items: flex-start;
    flex-direction: column;
  }
  .objective-season-note a { width: 100%; text-align: center; }
  .structure-section { padding: 20px; }
  .structure-section > header,
  .structure-path { grid-template-columns: 1fr; }
}
* {
  box-sizing: border-box;
}
html {
  background: var(--bg);
}
body {
  margin: 0;
  background: linear-gradient(90deg, #070c11, #0a1217 62%, #08120e);
  color: var(--text);
  font-family:
    Inter,
    Segoe UI,
    Arial,
    sans-serif;
  letter-spacing: 0;
  min-height: 100vh;
}
.topbar {
  height: 64px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(20px, 4vw);
  background: #070c11ed;
  position: sticky;
  top: 0;
  z-index: 5;
}
.brand {
  font-weight: 900;
  color: var(--gold);
  text-decoration: none;
  font-size: 20px;
}
.topbar nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
}
.topbar nav a > .bi,
.league-nav-more > summary > .bi {
  flex: 0 0 auto;
  color: var(--cyan);
  font-size: 14px;
  line-height: 1;
}
.topbar nav a[aria-current] > .bi,
.league-nav-more.is-active > summary > .bi { color: var(--gold); }
.league-nav-label { display: inline-flex; min-width: 0; }
.topbar nav a:hover,
.topbar nav a[aria-current] {
  color: var(--text);
  border-color: rgba(57, 200, 212, .28);
  background: rgba(57, 200, 212, .09);
}
.league-nav-more { position: relative; }
.league-nav-more > summary { display: inline-flex; align-items: center; min-height: 36px; gap: 7px; padding: 0 12px; border: 1px solid rgba(164, 181, 193, .22); border-radius: 999px; color: var(--muted); background: rgba(16, 24, 33, .88); font-size: 14px; cursor: pointer; list-style: none; }
.league-nav-more > summary::-webkit-details-marker { display: none; }
.league-nav-more > summary::after { margin-left: 7px; content: '\2304'; color: var(--cyan); font-size: .8rem; line-height: 1; }
.league-nav-more[open] > summary, .league-nav-more.is-active > summary { color: var(--text); border-color: rgba(57, 200, 212, .42); background: rgba(57, 200, 212, .11); }
.league-nav-more > div { position: absolute; top: calc(100% + 10px); right: 0; display: grid; min-width: 190px; gap: 4px; padding: 8px; border: 1px solid rgba(145, 167, 194, .25); border-radius: 7px; background: #09121b; box-shadow: 0 18px 44px rgba(0, 0, 0, .42); }
.league-nav-more > div a { justify-content: flex-start; width: 100%; }
.league-language { position: relative; }
.league-language > summary {
  display: inline-flex; align-items: center; justify-content: center; min-width: 126px; min-height: 36px;
  gap: 7px; padding: 0 10px; border: 1px solid rgba(164, 181, 193, .22); border-radius: 999px;
  color: var(--muted); background: rgba(16, 24, 33, .88); cursor: pointer; list-style: none;
}
.league-language > summary::-webkit-details-marker { display: none; }
.league-language > summary svg { display: block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.language-globe { width: 17px; height: 17px; color: var(--cyan); }
.language-chevron { width: 14px; height: 14px; margin-left: auto; transition: transform .18s ease; }
.language-current-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; }
.language-current-code { display: none; font-size: 10px; font-weight: 900; }
.league-language[open] > summary, .league-language > summary:hover { color: var(--text); border-color: rgba(57, 200, 212, .42); background: rgba(57, 200, 212, .08); }
.league-language[open] .language-chevron { transform: rotate(180deg); }
.league-language > div {
  position: absolute; z-index: 70; top: calc(100% + 10px); right: 0; display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr)); min-width: 326px; gap: 5px; padding: 9px;
  border: 1px solid rgba(145, 167, 194, .28); border-radius: 7px; background: #09121b;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
}
.league-nav-more:not([open]) > div,
.league-language:not([open]) > div {
  display: none;
}
.language-menu-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px 10px;
  border-bottom: 1px solid rgba(145, 167, 194, .18);
}
.language-menu-heading svg { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: var(--cyan); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.language-menu-heading span { display: grid; gap: 2px; }
.language-menu-heading strong { color: var(--text); font-size: 13px; }
.language-menu-heading small { color: var(--muted); font-size: 10px; }
.league-language > div a { justify-content: space-between; width: 100%; min-height: 46px; gap: 10px; padding: 7px 10px; border-radius: 5px; }
.league-language > div a > span { display: grid; min-width: 0; gap: 2px; }
.league-language > div a strong { overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.league-language > div a small { color: var(--muted); font-size: 9px; font-weight: 900; line-height: 1; }
.league-language > div a > b { display: none; color: var(--cyan); font-size: 14px; }
.league-language > div a[aria-current] { color: var(--text); border-color: rgba(57, 200, 212, .3); background: rgba(57, 200, 212, .11); }
.league-language > div a[aria-current] > b { display: block; }
.league-language > div a.is-fun-language { grid-column: 1 / -1; border-top: 1px solid rgba(214, 169, 63, .18); }
.league-language > div a.is-fun-language small { color: var(--gold); }
.nav-short { display: none; }
main {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 64px;
}
.league-hero {
  height: auto;
  min-height: 320px;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid var(--gold);
  isolation: isolate;
}
.league-hero .hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: -3;
}
.league-hero .hero-art-next {
  z-index: -2;
  opacity: 0;
  transition: opacity 1.25s ease;
}
.league-hero.is-swapping .hero-art-next {
  opacity: 1;
}
.league-hero.has-swapped .hero-art-next {
  transition: none;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(4, 9, 13, 0.94) 0%,
    rgba(4, 9, 13, 0.62) 48%,
    rgba(4, 9, 13, 0.08) 82%
  );
  z-index: -1;
}
.hero-copy {
  position: relative;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
}
.hero-copy::before {
  position: absolute;
  z-index: -1;
  inset: 12px auto 12px 12px;
  width: min(720px, calc(100% - 24px));
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(3, 9, 15, .72), rgba(3, 9, 15, .34) 72%, transparent);
  content: "";
  pointer-events: none;
}
.hero-copy h1 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.08;
  padding-top: .08em;
  margin: 0 0 10px;
  max-width: 700px;
}
.hero-copy > p:last-child {
  font-size: 17px;
  color: #d4dee4;
  margin: 0;
  max-width: 620px;
}
.league-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.league-hero-actions a {
  --action-accent: #70e1eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--action-accent) 48%, #263541);
  border-radius: 5px;
  color: color-mix(in srgb, var(--action-accent) 72%, #d8e2e8);
  background: color-mix(in srgb, var(--action-accent) 7%, #0b141d);
  box-shadow: inset 0 -2px color-mix(in srgb, var(--action-accent) 9%, transparent);
  font-size: .71rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
}
.league-action-pill {
  --action-accent: #70e1eb;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.league-action-pill > i {
  flex: 0 0 auto;
  color: var(--action-accent);
  font-size: .78rem;
}
.league-action-pill > span { min-width: 0; }
.league-action-pill.is-primary {
  border-color: var(--action-accent) !important;
  color: #f7fdff !important;
  background: color-mix(in srgb, var(--action-accent) 20%, #0a141c) !important;
  box-shadow: inset 0 -3px color-mix(in srgb, var(--action-accent) 28%, transparent), 0 0 0 2px color-mix(in srgb, var(--action-accent) 13%, transparent) !important;
}
.league-action-pill.is-primary > i { color: #fff !important; }
.league-action-pill:is(:hover, :focus-visible) {
  border-color: var(--action-accent) !important;
  color: #fff !important;
  background: color-mix(in srgb, var(--action-accent) 13%, #0b141d) !important;
}
.league-hero-actions a i {
  color: var(--action-accent);
  font-size: .95rem;
}
.league-hero-actions a:first-child {
  --action-accent: #e7bd5d;
}
.league-hero-actions a:nth-child(2) { --action-accent: #70e1eb; }
.league-hero-actions a:nth-child(3) { --action-accent: #9b86ee; }
.lookup-shell {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(520px, 1.28fr);
  gap: 34px;
  align-items: end;
  padding: 30px 0 34px;
  border-bottom: 1px solid var(--line);
}
.eyebrow {
  color: var(--cyan);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 800;
  margin: 0 0 8px;
}
.lookup-copy h2 {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1;
  margin: 0 0 12px;
}
.lookup-copy p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}
.lookup-form {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}
.lookup-actions {
  display: flex;
  grid-column: 1/-1;
  justify-content: flex-end;
  gap: 8px;
}
.lookup-actions button {
  white-space: nowrap;
}
.lookup-actions .secondary {
  border-color: var(--line);
  background: var(--panel-2);
  color: var(--text);
}
.lookup-actions .secondary:hover {
  border-color: var(--cyan);
}
.lookup-form label {
  display: grid;
  min-width: 0;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
}
.lookup-form input,
.lookup-form select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 48px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  padding: 0 13px;
  font: inherit;
  border-radius: 5px;
}
.lookup-form input:focus,
.lookup-form select:focus {
  outline: 2px solid #39c8d455;
  border-color: var(--cyan);
}
button,
.next-work a {
  height: 48px;
  border: 1px solid #e6b754;
  background: var(--gold);
  color: #101317;
  padding: 0 20px;
  font-weight: 800;
  font: inherit;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.status {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
  min-height: 20px;
  font-size: 13px;
}
.status.error {
  color: #ff9292;
}
.status.success {
  color: #76dbaa;
}
.results {
  padding-top: 30px;
}
.profile-band {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 26px;
}
.profile-band img {
  border-radius: 6px;
  border: 2px solid var(--gold);
}
.profile-band h2 {
  font-size: 30px;
  margin: 0 0 5px;
}
.profile-band p:last-child {
  color: var(--muted);
  margin: 0;
}
.result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.recent-overview {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: 6px;
  background: var(--panel);
}
.recent-overview .section-heading { align-items: end; }
.recent-overview .section-heading .eyebrow { margin-bottom: 4px; }
.recent-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.recent-metrics article {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel-2);
}
.recent-metrics span,
.recent-metrics small,
.recent-breakdowns > div > span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.recent-metrics strong {
  display: block;
  margin: 7px 0 4px;
  color: var(--text);
  font-size: clamp(17px, 2vw, 23px);
}
.recent-breakdowns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.recent-breakdowns > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #0b151e;
}
.recent-breakdowns > div > span { width: 100%; }
.recent-breakdowns b {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid rgba(57, 200, 212, .24);
  border-radius: 999px;
  color: var(--text);
  background: rgba(57, 200, 212, .08);
  font-size: 12px;
}
.recent-breakdowns b small { color: var(--muted); font-weight: 600; }
.sample-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.result-grid > section,
.matches {
  border-top: 3px solid var(--line);
  background: var(--panel);
  padding: 18px;
  border-radius: 5px;
}
.result-grid > section:first-child {
  border-top-color: var(--gold);
}
.result-grid > section:last-child {
  border-top-color: var(--cyan);
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.section-heading h3 {
  font-size: 17px;
  margin: 0;
}
.section-heading span {
  font-size: 12px;
  color: var(--muted);
}
.stack {
  display: grid;
  gap: 8px;
}
.stack article {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.stack article div {
  display: grid;
  gap: 3px;
}
.stack article span,
.stack article small {
  font-size: 12px;
  color: var(--muted);
}
.stack article b {
  font-size: 13px;
}
.matches {
  margin-top: 20px;
}
.match-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.match-list article {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  background: var(--panel-2);
  border-radius: 4px;
}
.match-list article.win {
  border-left-color: var(--green);
}
.mastery-identity {
  display: flex !important;
  min-width: 0;
  align-items: center;
  gap: 10px !important;
}
.mastery-identity img,
.match-champion img {
  flex: 0 0 auto;
  border: 1px solid rgba(102, 224, 234, .25);
  border-radius: 5px;
  background: #080d13;
  object-fit: cover;
}
.mastery-identity > span,
.match-champion > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.match-champion {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
  margin: 3px 0;
}
.match-champion strong {
  overflow: hidden;
  color: #f4f8fa;
  font-size: .94rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.match-kda {
  color: #e7edf0;
  font-size: 1rem;
}
.match-list article > span {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--red);
}
.match-result { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.match-result > span { color: var(--red); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.match-list article.win .match-result > span { color: var(--green); }
.match-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; padding-top: 7px; border-top: 1px solid var(--line); }
.match-items { display: flex; flex-wrap: wrap; gap: 4px; min-height: 28px; }
.match-items img { border: 1px solid rgba(255, 255, 255, .14); border-radius: 4px; background: #081018; }
.match-list article.win > span {
  color: var(--green);
}
.match-list small {
  color: var(--muted);
  font-size: 11px;
}
@media (max-width: 760px) {
  .recent-metrics { grid-template-columns: 1fr 1fr; }
  .recent-breakdowns { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
  .recent-metrics { grid-template-columns: 1fr; }
}

/* Beginner artwork v4: keep the complete splash without turning it into a full-width billboard. */
.beginner-result-art { width: min(calc(100% - 48px), 720px); margin: 24px auto 0; border: 1px solid var(--beginner-line); border-radius: 7px; }
@media (max-width: 720px) { .beginner-result-art { width: 100%; margin-top: 0; border-width: 0 0 1px; border-radius: 0; } }

/* Keep the final contextual ping balanced when the list has an odd count. */
.pings-context > div article:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 760px) { .pings-context > div article:last-child:nth-child(odd) { grid-column: auto; } }

/* Ping guide v2: readable card widths and an icon-first directory. */
.pings-page :is(.pings-hero,.pings-wheel,.pings-combos,.pings-context,.pings-spam,.pings-reporting,.pings-sources) :is(h1,h2,h3,p,strong,small,span,li,a) { min-width: 0; overflow-wrap: break-word; }
.pings-hero h1 { max-width: 760px; padding-block: .06em; font-size: clamp(3rem,5.4vw,5.4rem); line-height: 1.02; text-wrap: balance; }
.pings-hero-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; width: min(660px,100%); margin: 30px 0 0; border: 1px solid #315061; background: #315061; }
.pings-hero-stats>div { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; align-items: center; min-width: 0; padding: 14px 16px; background: #0b1b25; }
.pings-hero-stats dt { color: var(--ping-cyan); font-size: 1.65rem; font-weight: 950; line-height: 1; }
.pings-hero-stats dd { margin: 0; color: #a9bdc8; font-size: .75rem; font-weight: 800; line-height: 1.25; }
.pings-hero>aside.pings-hero-directory { display: block; align-content: initial; padding: 30px; border-left: 1px solid #3c3855; background: #13101d; }
.pings-hero-directory>header { margin-bottom: 18px; }
.pings-hero-directory>header h2 { margin: 4px 0 8px; color: #f7f2ff; font-size: 1.8rem; line-height: 1.08; }
.pings-hero-directory>header>p:last-child { margin: 0; color: #aaa2be; line-height: 1.45; }
.pings-hero-directory>div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pings-hero-directory>div>a { --tone: var(--ping-cyan); display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 10px; align-items: center; justify-content: initial; min-height: 62px; padding: 9px 11px; border: 1px solid #453d5d; border-left: 4px solid var(--tone); border-radius: 6px; color: #edf8fb; background: #191624; text-align: left; }
.pings-hero-directory>div>a:hover { border-color: var(--tone); background: #211d2e; }
.pings-hero-directory>div>a.is-rose { --tone: var(--ping-rose); }.pings-hero-directory>div>a.is-blue { --tone: #70a8ff; }.pings-hero-directory>div>a.is-gold { --tone: var(--ping-gold); }.pings-hero-directory>div>a.is-green { --tone: var(--ping-green); }.pings-hero-directory>div>a.is-orange { --tone: #ff9a68; }.pings-hero-directory>div>a.is-violet { --tone: var(--ping-violet); }.pings-hero-directory>div>a.is-mint { --tone: #65d8bf; }
.pings-hero-directory>div>a>span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: #071115; background: var(--tone); font-size: 1.05rem; }
.pings-hero-directory>div>a>strong { color: #f3f7fa; font-size: .83rem; line-height: 1.2; }
.pings-wheel-grid article { min-height: 350px; }
.pings-wheel-grid article>header { position: relative; grid-template-columns: 60px minmax(0,1fr); gap: 14px; padding-right: 38px; }
.pings-wheel-grid article>header>b { position: absolute; top: 0; right: 0; width: 34px; height: 34px; font-size: .68rem; }
.pings-wheel-grid article>header>span { width: 58px; height: 58px; border-radius: 50%; font-size: 1.45rem; box-shadow: 0 0 0 5px color-mix(in srgb,var(--tone) 14%,transparent); }
.pings-wheel-grid h3 { font-size: 1.32rem; }
.pings-wheel-grid article>p { display: grid; gap: 7px; margin: 25px 0; }
.pings-wheel-grid article>p>strong { color: var(--tone); font-size: .68rem; font-weight: 950; text-transform: uppercase; }
.pings-wheel-grid article>p>span { color: #b8c9d1; line-height: 1.58; }
.pings-wheel-grid footer { min-height: 112px; }
@media(max-width:1360px){.pings-wheel-grid,.pings-combos>div{grid-template-columns:1fr 1fr}.pings-wheel-grid article{min-height:330px}.pings-wheel-grid footer{min-height:0}}
@media(max-width:1120px){.pings-hero>aside.pings-hero-directory{display:block;border-top:1px solid #3c3855;border-left:0}.pings-hero-directory>div{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){.pings-hero h1{font-size:clamp(2.65rem,12vw,3.7rem);line-height:1.04}.pings-hero-stats{grid-template-columns:1fr}.pings-hero-directory>div{grid-template-columns:1fr 1fr}.pings-wheel-grid article>header{grid-template-columns:54px minmax(0,1fr)}.pings-wheel-grid article>header>span{width:52px;height:52px}.pings-wheel-grid footer{min-height:0}}
@media(max-width:420px){.pings-hero-directory>div{grid-template-columns:1fr}.pings-hero>aside.pings-hero-directory{padding:22px 18px}.pings-wheel-grid article{padding:19px 17px}.pings-wheel-grid article>header{padding-right:34px}}

/* Reporting guide v3: decision path and local editor. */
.reporting-hero > div > .reporting-route-note { display: flex; gap: 11px; align-items: center; width: fit-content; max-width: 100%; margin: 18px 0 0 !important; padding: 11px 14px; border: 1px solid #2f6653; border-radius: 7px; color: #b8d5c8 !important; background: #0a211a; font-size: .86rem !important; line-height: 1.4 !important; }
.reporting-route-note > i { color: #67dda0; font-size: 1.15rem; }
.reporting-route-note > span { display: grid; gap: 1px; min-width: 0; }
.reporting-route-note strong { color: #8ae8ba; }
.reporting-triage { padding: clamp(28px,4vw,58px); border: 1px solid #345262; border-radius: 8px; background: #08131b; }
.reporting-triage > header { display: grid; grid-template-columns: minmax(0,.9fr) minmax(320px,1.1fr); gap: clamp(24px,5vw,72px); align-items: end; padding-bottom: 26px; border-bottom: 1px solid #2b414f; }
.reporting-triage > header h2 { margin: 5px 0 0; }
.reporting-triage > header > p { margin: 0; color: #a9bdc9; font-size: 1rem; line-height: 1.65; }
.reporting-triage-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; margin-top: 26px; }
.reporting-triage-grid article { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 16px; min-width: 0; padding: 24px; border: 1px solid #38505e; border-top: 5px solid #62dfaa; border-radius: 7px; background: #0d1a23; }
.reporting-triage-grid article.is-pause { border-top-color: #f2c660; }
.reporting-triage-grid article.is-protect { border-top-color: #ac8bff; }
.reporting-triage-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 7px; color: #07120e; background: #62dfaa; font-size: 1.35rem; }
.reporting-triage-grid .is-pause .reporting-triage-icon { color: #1a1508; background: #f2c660; }
.reporting-triage-grid .is-protect .reporting-triage-icon { color: #100b1b; background: #ac8bff; }
.reporting-triage-grid small { display: block; color: #88a1b1; font-size: .7rem; font-weight: 900; line-height: 1.4; text-transform: uppercase; }
.reporting-triage-grid h3 { margin: 7px 0 9px; color: #f2f7fa; font-size: 1.16rem; line-height: 1.25; }
.reporting-triage-grid p { margin: 0; color: #a9bbc6; line-height: 1.55; }
.reporting-triage-grid a { display: inline-flex; align-items: center; min-height: 38px; margin-top: 17px; padding: 0 13px; border: 1px solid #466577; border-radius: 999px; color: #dcebf2; font-size: .78rem; font-weight: 900; text-decoration: none; background: #122431; }
.reporting-triage-grid a:hover { border-color: #59dce8; color: #fff; }
.reporting-triage > footer { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 14px; align-items: center; margin-top: 14px; padding: 18px 20px; border: 1px solid #5b4c31; border-left: 5px solid #f2c660; border-radius: 7px; background: #19160e; }
.reporting-triage > footer > i { color: #f2c660; font-size: 1.45rem; text-align: center; }
.reporting-triage > footer p { display: grid; gap: 3px; min-width: 0; margin: 0; }
.reporting-triage > footer strong { color: #f5e8bd; }
.reporting-triage > footer span { color: #bfb396; line-height: 1.45; }
.reporting-triage > footer a { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 15px; border: 1px solid #76633c; border-radius: 999px; color: #f4df9e; font-size: .78rem; font-weight: 900; text-decoration: none; }
.reporting-authority { display: grid; grid-template-columns: 58px minmax(280px,1.35fr) minmax(190px,.65fr) minmax(190px,.65fr); gap: 18px; align-items: center; margin: 0 auto 28px; padding: 22px; border: 1px solid #705ea8; border-left: 6px solid #ac8bff; border-radius: 8px; background: #151122; }
.reporting-authority > span { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 7px; color: #100b1b; background: #ac8bff; font-size: 1.45rem; }
.reporting-authority > div { min-width: 0; }
.reporting-authority small { color: #bca9ef; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.reporting-authority h2 { margin: 4px 0 7px !important; color: #f5f0ff; font-size: clamp(1.55rem,2.4vw,2.4rem) !important; line-height: 1.05 !important; }
.reporting-authority > div p { margin: 0; color: #c4b9db; line-height: 1.5; }
.reporting-authority > p { display: grid; gap: 5px; min-width: 0; margin: 0; padding: 14px; border: 1px solid #443963; border-radius: 6px; background: #1c1729; }
.reporting-authority > p strong { color: #d7c8ff; font-size: .75rem; text-transform: uppercase; }
.reporting-authority > p span { color: #b9afcc; font-size: .88rem; line-height: 1.45; }
.reporting-ping-guide { padding: clamp(28px,4vw,58px); border: 1px solid #315368; border-radius: 8px; background: #07131c; }
.reporting-ping-guide > header { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.85fr); gap: clamp(24px,5vw,68px); align-items: end; margin-bottom: 26px; padding-bottom: 25px; border-bottom: 1px solid #294352; }
.reporting-ping-guide > header h2 { margin-bottom: 0; }
.reporting-ping-guide > header > p { margin: 0; color: #a9bfca; line-height: 1.65; }
.reporting-ping-guide > header > p strong { color: #71e4ed; }
.reporting-ping-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.reporting-ping-grid article { display: grid; grid-template-columns: 52px minmax(0,1fr); grid-template-areas: "icon label" "icon title" "text text" "verdict verdict"; gap: 3px 15px; min-width: 0; padding: 22px; border: 1px solid #345263; border-top: 5px solid #59dce8; border-radius: 7px; background: #0d1b25; }
.reporting-ping-grid article.is-gold { border-top-color: #f2c660; }
.reporting-ping-grid article.is-violet { border-top-color: #ac8bff; }
.reporting-ping-grid article > span { grid-area: icon; display: grid; width: 48px; height: 48px; place-items: center; border-radius: 6px; color: #071216; background: #59dce8; font-size: 1.2rem; }
.reporting-ping-grid article.is-gold > span { color: #191307; background: #f2c660; }
.reporting-ping-grid article.is-violet > span { color: #110b1d; background: #ac8bff; }
.reporting-ping-grid small { grid-area: label; align-self: end; color: #8ea7b5; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.reporting-ping-grid h3 { grid-area: title; min-width: 0; margin: 3px 0 0; color: #eff8fb; font-size: 1.12rem; line-height: 1.3; overflow-wrap: anywhere; }
.reporting-ping-grid p { grid-area: text; margin: 20px 0 0; color: #a8bbc5; line-height: 1.55; }
.reporting-ping-grid article > strong { grid-area: verdict; width: fit-content; max-width: 100%; margin-top: 13px; padding: 7px 10px; border: 1px solid #3c6676; border-radius: 999px; color: #8de8ee; font-size: .72rem; line-height: 1.3; overflow-wrap: anywhere; }
.reporting-ping-grid article.is-gold > strong { border-color: #6c5b32; color: #f2d682; }
.reporting-ping-grid article.is-violet > strong { border-color: #5a487c; color: #cdbaff; }
.reporting-ping-decisions { display: grid; gap: 8px; margin-top: 14px; }
.reporting-ping-decisions article { display: grid; grid-template-columns: 50px minmax(0,1fr) auto; gap: 15px; align-items: center; min-width: 0; padding: 15px 17px; border: 1px solid #2c4858; border-radius: 6px; background: #0b1821; }
.reporting-ping-decisions article > div { min-width: 0; }
.reporting-ping-decisions article strong { display: block; color: #eef7fa; }
.reporting-ping-decisions article p { margin: 5px 0 0; color: #9eb3bf; line-height: 1.45; }
.reporting-ping-decisions article > span { justify-self: end; padding: 8px 11px; border: 1px solid #425d6c; border-radius: 999px; color: #c7d8e0; font-size: .72rem; font-weight: 900; white-space: nowrap; }
.reporting-ping-guide > aside { display: flex; gap: 14px; align-items: center; margin-top: 14px; padding: 18px; border: 1px solid #2e6652; border-left: 5px solid #67dda0; border-radius: 6px; background: #0a1d17; }
.reporting-ping-guide > aside i { color: #67dda0; font-size: 1.35rem; }
.reporting-ping-guide > aside p { margin: 0; color: #b7d0c4; line-height: 1.55; }

.reporting-workbench { display: grid; grid-template-columns: minmax(260px,.58fr) minmax(0,1.42fr); overflow: hidden; margin-bottom: 26px; border: 1px solid #3d5363; border-radius: 8px; background: #0a151e; }
.reporting-workbench > aside { padding: 22px; border-right: 1px solid #3d5363; background: #0d1923; }
.reporting-workbench > aside > span { display: block; margin-bottom: 13px; color: #83dfea; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.reporting-workbench > aside > div { display: grid; gap: 8px; }
.reporting-workbench [data-report-load] { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 11px; align-items: center; min-height: 52px; padding: 7px 12px; border: 1px solid #324858; border-radius: 6px; color: #b9c9d4; text-align: left; background: #101d27; cursor: pointer; }
.reporting-workbench [data-report-load] i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 5px; color: #78dfeb; background: #0b2931; }
.reporting-workbench [data-report-load] span { min-width: 0; font-weight: 850; overflow-wrap: anywhere; }
.reporting-workbench [data-report-load]:hover { border-color: #5790a2; color: #fff; }
.reporting-workbench [data-report-load].is-active { border-color: #59dce8; color: #fff; background: #102832; box-shadow: inset 4px 0 #59dce8; }
.reporting-workbench > section { min-width: 0; margin: 0; padding: clamp(22px,3vw,34px); background: #07121a; }
.reporting-workbench label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; margin-bottom: 12px; }
.reporting-workbench label > span { color: #f2f7fa; font-size: 1.1rem; font-weight: 900; }
.reporting-workbench label > small { color: #8ea5b4; line-height: 1.45; }
#reportEditor { display: block; box-sizing: border-box; width: 100%; min-height: 210px; resize: vertical; padding: 19px; border: 1px solid #4a6577; border-radius: 7px; outline: none; color: #eaf3f7; background: #0c1a24; font: inherit; font-size: 1rem; line-height: 1.65; }
#reportEditor:focus { border-color: #59dce8; box-shadow: 0 0 0 3px rgba(89,220,232,.14); }
.reporting-editor-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; margin-top: 13px; }
.reporting-character-count { color: #8fa6b5; font-size: .82rem; }
.reporting-character-count strong { color: #dcebf1; }
.reporting-editor-footer > div { display: flex; flex-wrap: wrap; gap: 8px; }
.reporting-editor-footer button,.reporting-template-actions button { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1px solid #59dce8; border-radius: 5px; color: #071116; background: #59dce8; font: inherit; font-size: .82rem; font-weight: 900; cursor: pointer; }
.reporting-editor-footer button.is-secondary,.reporting-template-actions button:first-child { border-color: #50697a; color: #d7e5eb; background: #111f29; }
.reporting-editor-footer button:hover,.reporting-template-actions button:hover { filter: brightness(1.1); }
.reporting-editor-note { display: flex; gap: 12px; align-items: center; margin: 16px 0 0; padding: 13px 15px; border: 1px solid #285544; border-radius: 6px; color: #a9cbbd; background: #0a2019; }
.reporting-editor-note > i { color: #67dda0; font-size: 1.2rem; }
.reporting-editor-note > span { display: grid; gap: 2px; line-height: 1.45; }
.reporting-editor-note strong { color: #86e5b5; }
.reporting-template-divider { display: flex; align-items: center; gap: 14px; margin: 4px 0 18px; color: #8098a8; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.reporting-template-divider::before,.reporting-template-divider::after { content: ''; height: 1px; flex: 1; background: #2d4251; }
.reporting-template-grid article > .reporting-template-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; color: inherit; font-size: inherit; text-transform: none; }
.reporting-template-grid article > .reporting-template-actions button { width: 100%; min-width: 0; margin: 0; padding: 8px 12px; justify-content: flex-start; text-align: left; }
.reporting-template-grid article > .reporting-template-actions button i { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border: 1px solid #52697a; border-radius: 4px; color: #8ce8ef; background: #0a1b25; }
.reporting-template-grid article > .reporting-template-actions button:last-child { border-color: #8c7439; color: #f8df94; background: #241f12; }
.reporting-template-grid article > .reporting-template-actions button:last-child i { border-color: #9f843e; color: #f5cf69; background: #17140c; }
.reporting-template-grid article > .reporting-template-actions button span { color: inherit; font-size: .78rem; text-transform: none; }

@media(max-width:1050px){
  .reporting-triage-grid { grid-template-columns: 1fr; }
  .reporting-triage-grid article { grid-template-columns: 54px minmax(0,1fr); }
  .reporting-workbench { grid-template-columns: 1fr; }
  .reporting-workbench > aside { border-right: 0; border-bottom: 1px solid #3d5363; }
  .reporting-workbench > aside > div { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media(max-width:760px){
  .reporting-triage > header { grid-template-columns: 1fr; gap: 12px; }
  .reporting-triage > footer { grid-template-columns: 38px minmax(0,1fr); }
  .reporting-triage > footer > a { grid-column: 1/-1; }
  .reporting-workbench > aside > div { grid-template-columns: 1fr 1fr; }
  .reporting-editor-footer { align-items: stretch; }
  .reporting-editor-footer > div { width: 100%; }
  .reporting-editor-footer button { flex: 1; }
  .reporting-template-grid article > .reporting-template-actions { grid-template-columns: 1fr; }
}
@media(max-width:440px){
  .reporting-triage { padding: 22px 18px; }
  .reporting-triage-grid article { grid-template-columns: 46px minmax(0,1fr); padding: 19px 16px; }
  .reporting-triage-icon { width: 44px; height: 44px; }
  .reporting-workbench > aside { padding: 18px 14px; }
  .reporting-workbench > aside > div { grid-template-columns: 1fr; }
  .reporting-workbench > section { padding: 20px 14px; }
  .reporting-editor-footer > div { display: grid; grid-template-columns: 1fr; }
}

/* Reporting guide: evidence anatomy and category detail. */
.reporting-valid-grid article dl { display: grid; gap: 10px; margin: 20px 0 0; }
.reporting-valid-grid article dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid #263443; border-radius: 6px; background: #09111a; }
.reporting-valid-grid article dt { color: #73e5cc; font-size: .76rem; font-weight: 900; line-height: 1.35; text-transform: uppercase; }
.reporting-valid-grid article dl > div:last-child dt { color: #ff9aaa; }
.reporting-valid-grid article dd { min-width: 0; margin: 0; color: #c5d0dc; font-size: .9rem; line-height: 1.55; overflow-wrap: anywhere; }
.reporting-anatomy { margin-top: 26px; padding: clamp(24px, 4vw, 48px); border: 1px solid #26465a; border-left: 5px solid #35d6ef; border-radius: 8px; background: #07121a; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.reporting-anatomy > header { display: grid; grid-template-columns: minmax(0, .9fr) minmax(300px, 1.1fr); gap: clamp(24px, 5vw, 72px); align-items: end; padding-bottom: 26px; border-bottom: 1px solid #263949; }
.reporting-anatomy > header h2 { margin: 4px 0 0; color: #f4f8fc; font-size: clamp(1.7rem, 3.3vw, 2.65rem); line-height: 1.06; }
.reporting-anatomy > header > p { margin: 0; color: #b8c7d6; font-size: 1.02rem; line-height: 1.7; }
.reporting-anatomy-layout { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(420px, 1.22fr); gap: 24px; margin-top: 28px; }
.reporting-anatomy-layout > ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.reporting-anatomy-layout > ol li { display: grid; grid-template-columns: 48px minmax(0, 1fr) 34px; gap: 14px; align-items: center; min-height: 112px; padding: 16px; border: 1px solid #263949; border-radius: 7px; background: #0b1721; }
.reporting-anatomy-layout > ol li:nth-child(1) { border-left: 4px solid #35d6ef; }
.reporting-anatomy-layout > ol li:nth-child(2) { border-left: 4px solid #ffd166; }
.reporting-anatomy-layout > ol li:nth-child(3) { border-left: 4px solid #ab79f7; }
.reporting-anatomy-layout > ol li > i { color: #7c93a8; font-size: 1.35rem; text-align: center; }
.reporting-anatomy-layout > ol small { display: block; margin-bottom: 3px; color: #7fdcef; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.reporting-anatomy-layout > ol strong { color: #f7f9fc; font-size: 1.08rem; }
.reporting-anatomy-layout > ol p { margin: 5px 0 0; color: #aebdcc; font-size: .9rem; line-height: 1.5; }
.reporting-example-card { overflow: hidden; border: 1px solid #40556a; border-radius: 8px; background: #0d1722; }
.reporting-example-card > header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 17px 20px; border-bottom: 1px solid #344557; background: #152231; }
.reporting-example-card > header span { color: #64e4f2; font-weight: 900; }
.reporting-example-card > header span i { margin-right: 8px; }
.reporting-example-card > header strong { color: #ffd166; font-size: .82rem; text-transform: uppercase; }
.reporting-example-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid #344557; }
.reporting-example-fields span { min-width: 0; padding: 17px 18px; border-right: 1px solid #344557; }
.reporting-example-fields span:last-child { border-right: 0; }
.reporting-example-fields small { display: block; margin-bottom: 6px; color: #7f94a8; font-size: .68rem; font-weight: 900; }
.reporting-example-fields strong { display: block; color: #e8eef5; font-size: .88rem; line-height: 1.45; overflow-wrap: anywhere; }
.reporting-example-card blockquote { margin: 0; padding: clamp(22px, 4vw, 36px); color: #f3f7fb; font-size: clamp(1rem, 1.8vw, 1.22rem); line-height: 1.7; }
.reporting-example-card > footer { display: flex; gap: 13px; align-items: center; padding: 16px 20px; border-top: 1px solid #29473f; background: #0a211c; }
.reporting-example-card > footer > i { color: #59e1a8; font-size: 1.45rem; }
.reporting-example-card > footer span { display: grid; gap: 2px; }
.reporting-example-card > footer strong { color: #87efc2; }
.reporting-example-card > footer small { color: #a9c8bd; }

/* Companion: an explicit local-versus-network data boundary. */
.companion-data-flow { margin-top: 26px; padding: clamp(24px, 4vw, 48px); border: 1px solid #29465a; border-radius: 8px; background: #07121a; }
.companion-data-flow > .companion-section-heading { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid #263949; }
.companion-flow-diagram { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(110px, .45fr) minmax(160px, 1fr) minmax(110px, .45fr) minmax(160px, 1fr); gap: 14px; align-items: stretch; }
.companion-flow-diagram > article { position: relative; display: grid; align-content: start; min-width: 0; min-height: 210px; padding: 22px; border: 1px solid #334858; border-top: 5px solid #35d6ef; border-radius: 7px; background: #0c1822; }
.companion-flow-diagram > article.is-app { border-top-color: #ab79f7; }
.companion-flow-diagram > article.is-storage { border-top-color: #55daa2; }
.companion-flow-diagram > article > span { position: absolute; top: 12px; right: 14px; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #3b5568; border-radius: 50%; color: #b9c9d7; font-weight: 900; }
.companion-flow-diagram > article > i { margin-bottom: 19px; color: #67e6f5; font-size: 2rem; }
.companion-flow-diagram > article.is-app > i { color: #c59eff; }
.companion-flow-diagram > article.is-storage > i { color: #71e2b2; }
.companion-flow-diagram article small { color: #8aa1b4; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.companion-flow-diagram article h3 { margin: 6px 0 8px; color: #f5f8fb; font-size: 1.15rem; }
.companion-flow-diagram article p { margin: 0; color: #aebdcc; line-height: 1.55; }
.companion-flow-link { display: grid; place-items: center; align-content: center; gap: 7px; min-width: 0; color: #91a6b8; text-align: center; }
.companion-flow-link b { color: #d8e2ea; font-size: .76rem; text-transform: uppercase; }
.companion-flow-link code { max-width: 100%; padding: 5px 8px; border: 1px solid #2d5165; border-radius: 5px; color: #67e6f5; background: #08151d; overflow-wrap: anywhere; }
.companion-flow-link > i { color: #35d6ef; font-size: 1.35rem; }
.companion-flow-link.is-device > i { color: #55daa2; }
.companion-network-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.companion-network-board > article { min-width: 0; padding: 22px; border: 1px solid #334858; border-left: 5px solid #55daa2; border-radius: 7px; background: #0b1721; }
.companion-network-board > article.is-network { border-left-color: #35d6ef; }
.companion-network-board > article.is-never { border-left-color: #ff758f; }
.companion-network-board header { display: flex; gap: 13px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid #263949; }
.companion-network-board header > i { color: #67e6f5; font-size: 1.55rem; }
.companion-network-board .is-local header > i { color: #71e2b2; }
.companion-network-board .is-never header > i { color: #ff91a5; }
.companion-network-board header small { color: #8aa1b4; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.companion-network-board header h3 { margin: 4px 0 0; color: #f4f8fc; font-size: 1.03rem; }
.companion-network-board ul { display: grid; gap: 10px; margin: 17px 0 0; padding: 0; list-style: none; }
.companion-network-board li { position: relative; padding-left: 20px; color: #b8c7d5; line-height: 1.5; }
.companion-network-board li::before { content: ''; position: absolute; top: .62em; left: 2px; width: 7px; height: 7px; border-radius: 50%; background: #55daa2; }
.companion-network-board .is-network li::before { background: #35d6ef; }
.companion-network-board .is-never li::before { background: #ff758f; }
.companion-api-truth { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-top: 22px; padding: 20px 22px; border: 1px solid #4a4262; border-left: 5px solid #ab79f7; border-radius: 7px; background: #171425; }
.companion-api-truth > * { min-width: 0; overflow-wrap: anywhere; }
.companion-api-truth > i { color: #c59eff; font-size: 1.8rem; text-align: center; }
.companion-api-truth strong { color: #f4edff; }
.companion-api-truth p { margin: 5px 0 0; color: #c2b9d1; line-height: 1.6; }
.companion-api-truth code { color: #72e6f3; overflow-wrap: anywhere; }
.companion-api-truth > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 15px; border: 1px solid #8b67c9; border-radius: 6px; color: #efe5ff; font-weight: 850; text-decoration: none; background: #251d38; }
.companion-api-truth > a:hover { border-color: #c59eff; background: #302346; }
.companion-safety-verdict { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; border: 1px solid #334858; border-radius: 7px; background: #0a151e; }
.companion-safety-verdict > div { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 13px; min-width: 0; padding: 20px; border-right: 1px solid #334858; }
.companion-safety-verdict > div:last-child { border-right: 0; }
.companion-safety-verdict .companion-step-number { display: grid; place-items: center; align-self: start; }
.companion-safety-verdict > div:nth-child(1) .companion-step-number { color: #67e2b0; border-color: #347c65; background: #0b2921; }
.companion-safety-verdict > div:nth-child(2) .companion-step-number { color: #6de4f2; border-color: #34798a; background: #0a2830; }
.companion-safety-verdict > div:nth-child(3) .companion-step-number { color: #ffd166; border-color: #8c6d29; background: #2b230e; }
.companion-safety-verdict p { min-width: 0; margin: 0; }
.companion-safety-verdict strong { display: block; color: #eef4f8; line-height: 1.35; }
.companion-safety-verdict small { display: block; margin-top: 5px; color: #aebdcc; font-size: .86rem; line-height: 1.5; overflow-wrap: anywhere; }

@media (max-width: 1080px) {
  .reporting-anatomy-layout { grid-template-columns: 1fr; }
  .companion-flow-diagram { grid-template-columns: 1fr 70px 1fr 70px 1fr; }
  .companion-flow-diagram > article { padding: 18px; }
  .companion-network-board { grid-template-columns: 1fr 1fr; }
  .companion-network-board > article.is-never { grid-column: 1 / -1; }
  .companion-safety-verdict { grid-template-columns: 1fr; }
  .companion-safety-verdict > div { border-right: 0; border-bottom: 1px solid #334858; }
  .companion-safety-verdict > div:last-child { border-bottom: 0; }
}
@media (max-width: 760px) {
  .reporting-anatomy > header { grid-template-columns: 1fr; gap: 14px; }
  .reporting-example-fields { grid-template-columns: 1fr; }
  .reporting-example-fields span { border-right: 0; border-bottom: 1px solid #344557; }
  .reporting-example-fields span:last-child { border-bottom: 0; }
  .companion-flow-diagram { grid-template-columns: 1fr; }
  .companion-flow-diagram > article { min-height: 0; }
  .companion-flow-link { min-height: 64px; }
  .companion-flow-link > i { transform: rotate(90deg); }
  .companion-network-board { grid-template-columns: 1fr; }
  .companion-network-board > article.is-never { grid-column: auto; }
  .companion-api-truth { grid-template-columns: 40px minmax(0, 1fr); }
  .companion-api-truth > a { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .reporting-valid-grid article dl > div { grid-template-columns: 1fr; gap: 4px; }
  .reporting-anatomy-layout > ol li { grid-template-columns: 42px minmax(0, 1fr); }
  .reporting-anatomy-layout > ol li > i { display: none; }
  .reporting-example-card > header { display: grid; }
  .companion-data-flow,
  .reporting-anatomy { padding: 20px 16px; }
  .companion-api-truth { grid-template-columns: minmax(0, 1fr); }
  .companion-api-truth > i { text-align: left; }
  .companion-api-truth > a { grid-column: auto; }
  .companion-safety-verdict > div { grid-template-columns: 40px minmax(0, 1fr); padding: 17px 14px; }
}

/* Reporting guide */
.reporting-page{--report-bg:#070d13;--report-panel:#0d1721;--report-line:#2a3f50;--report-cyan:#59dce8;--report-gold:#f2c660;--report-rose:#ff6f89;--report-violet:#ac8bff;--report-green:#67dda0;background:#05090e;color:#e8f3f8}.reporting-page main{width:min(1480px,calc(100% - 36px));margin:0 auto 80px}.reporting-page section{margin:0 auto 28px}.reporting-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(390px,.65fr);min-height:550px;overflow:hidden;border:1px solid #334959;border-radius:8px;background:linear-gradient(110deg,#0b1923 0 62%,#141120 62%)}.reporting-hero>div{display:flex;flex-direction:column;justify-content:center;padding:clamp(38px,6vw,88px)}.reporting-hero h1{max-width:900px;margin:8px 0 22px;font-size:clamp(3.1rem,6.7vw,6.7rem);line-height:.92;letter-spacing:0}.reporting-hero>div>p:not(.eyebrow){max-width:760px;margin:0;color:#b8c9d4;font-size:clamp(1.02rem,1.5vw,1.3rem);line-height:1.65}.reporting-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}.reporting-hero-actions a,.reporting-after a{display:inline-flex;min-height:46px;align-items:center;justify-content:center;padding:0 18px;border:1px solid var(--report-cyan);border-radius:999px;color:#061116;background:var(--report-cyan);font-weight:900;text-decoration:none}.reporting-hero-actions a.is-secondary{color:#d9edf5;background:#101c27;border-color:#456275}.reporting-hero aside{display:grid;align-content:center;gap:12px;padding:32px;border-left:1px solid #3b3850;background:#100e18}.reporting-hero aside article{display:grid;grid-template-columns:54px minmax(0,1fr);grid-template-areas:"icon label" "icon title";gap:2px 16px;align-items:center;padding:20px;border:1px solid #343348;border-left:4px solid var(--report-violet);background:#151422}.reporting-hero aside article:nth-child(2){border-left-color:var(--report-gold)}.reporting-hero aside article:nth-child(3){border-left-color:var(--report-cyan)}.reporting-hero aside i{grid-area:icon;display:grid;width:52px;height:52px;place-items:center;border-radius:7px;color:#0b0c10;background:var(--report-violet);font-size:1.35rem}.reporting-hero aside article:nth-child(2) i{background:var(--report-gold)}.reporting-hero aside article:nth-child(3) i{background:var(--report-cyan)}.reporting-hero aside span{grid-area:label;color:#a9a5bf;font-size:.72rem;font-weight:900;text-transform:uppercase}.reporting-hero aside strong{grid-area:title;font-size:1.03rem}.reporting-jump{position:sticky;z-index:8;top:74px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 36px;padding:13px 16px;border:1px solid #2a4050;border-radius:7px;background:rgba(8,15,22,.95);backdrop-filter:blur(12px)}.reporting-jump strong{margin-right:4px;color:var(--report-cyan);font-size:.72rem;text-transform:uppercase}.reporting-jump a{padding:8px 12px;border:1px solid #344b5d;border-radius:999px;color:#cad9e2;text-decoration:none;font-size:.78rem;font-weight:800}.reporting-split,.reporting-check,.reporting-templates,.reporting-after,.reporting-sources{padding:clamp(28px,4vw,58px);border:1px solid var(--report-line);border-radius:8px;background:var(--report-bg)}.reporting-split>header,.reporting-check>header,.reporting-templates>header,.reporting-after>header,.reporting-sources>header{max-width:900px;margin-bottom:28px}.reporting-page section h2{margin:5px 0 12px;font-size:clamp(2rem,4vw,4rem);line-height:1}.reporting-page section header>p:last-child{color:#9fb3c0;line-height:1.6}.reporting-valid-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.reporting-valid-grid article{padding:24px;border:1px solid #364957;border-top:5px solid var(--report-cyan);background:#0d1721}.reporting-valid-grid article.is-red{border-top-color:var(--report-rose)}.reporting-valid-grid article.is-gold{border-top-color:var(--report-gold)}.reporting-valid-grid article.is-violet{border-top-color:var(--report-violet)}.reporting-valid-grid i{display:grid;width:48px;height:48px;place-items:center;margin-bottom:26px;border-radius:6px;color:#061116;background:var(--report-cyan);font-size:1.2rem}.reporting-valid-grid .is-red i{background:var(--report-rose)}.reporting-valid-grid .is-gold i{background:var(--report-gold)}.reporting-valid-grid .is-violet i{background:var(--report-violet)}.reporting-valid-grid span{color:#93a9b7;font-size:.7rem;font-weight:900;text-transform:uppercase}.reporting-valid-grid h3{margin:7px 0 10px;font-size:1.25rem}.reporting-valid-grid p{margin:0;color:#a9bbc6;line-height:1.55}.reporting-not-alone{display:grid;grid-template-columns:minmax(290px,.55fr) minmax(0,1.45fr);gap:32px;padding:clamp(28px,4vw,58px);border:1px solid #554832;border-radius:8px;background:#15130d}.reporting-not-alone>div:first-child p:last-child{color:#c8bea4;line-height:1.6}.reporting-not-alone>div:nth-child(2){display:grid;grid-template-columns:1fr 1fr;gap:10px}.reporting-not-alone article{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-areas:"icon title" "icon text";gap:3px 12px;align-items:start;padding:17px;border:1px solid #4e4430;background:#1c190f}.reporting-not-alone article i{grid-area:icon;display:grid;width:38px;height:38px;place-items:center;color:#171309;background:var(--report-gold)}.reporting-not-alone article strong{grid-area:title}.reporting-not-alone article span{grid-area:text;color:#bdb49c;font-size:.88rem;line-height:1.4}.reporting-not-alone aside{grid-column:1/-1;display:flex;gap:14px;align-items:center;padding:18px;border-left:5px solid var(--report-gold);background:#211b0e}.reporting-not-alone aside i{color:var(--report-gold);font-size:1.4rem}.reporting-not-alone aside p{margin:0;color:#d8ceb2;line-height:1.5}.reporting-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.reporting-check-grid label{cursor:pointer}.reporting-check-grid input{position:absolute;opacity:0;pointer-events:none}.reporting-check-grid label>span{display:grid;grid-template-columns:54px minmax(0,1fr);grid-template-areas:"number title" "number text";gap:3px 15px;min-height:118px;padding:18px;border:1px solid #314758;background:#0e1923;transition:border-color .16s,background .16s}.reporting-check-grid b{grid-area:number}.reporting-check-grid strong{grid-area:title;align-self:end}.reporting-check-grid small{grid-area:text;color:#9eb1be;line-height:1.45}.reporting-check-grid input:checked+span{border-color:var(--report-green);background:#0c1d18}.reporting-check-grid input:checked+span b{background:var(--report-green);color:#07110d}.reporting-check-result{display:flex;justify-content:space-between;gap:20px;margin-top:12px;padding:18px 20px;border:1px solid #3a5162;background:#101b25}.reporting-check-result strong{color:var(--report-cyan)}.reporting-check-result span{color:#a8bac6}.reporting-check-result.is-complete{border-color:var(--report-green)}.reporting-check-result.is-complete strong{color:var(--report-green)}.reporting-template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.reporting-template-grid article{display:flex;flex-direction:column;min-width:0;min-height:310px;padding:22px;border:1px solid #344a5b;border-top:4px solid var(--report-violet);background:#0e1822}.reporting-template-grid article:nth-child(3n+2){border-top-color:var(--report-cyan)}.reporting-template-grid article:nth-child(3n){border-top-color:var(--report-gold)}.reporting-template-grid article>div{display:flex;justify-content:space-between;gap:12px;color:#d9cfff;font-size:.72rem;font-weight:900;text-transform:uppercase}.reporting-template-grid article>div i{font-size:1.1rem}.reporting-template-grid blockquote{overflow-wrap:anywhere;margin:22px 0;color:#d6e1e7;font-size:1rem;line-height:1.62}.reporting-template-grid button{display:inline-flex;gap:9px;align-items:center;justify-content:center;min-height:44px;margin-top:auto;border:1px solid #597185;border-radius:999px;color:#eaf6fb;background:#142331;font-weight:900;cursor:pointer}.reporting-template-grid button:hover{border-color:var(--report-cyan);background:#18303a}.reporting-copy-status{margin:16px 0 0;color:#88dce4;font-weight:800}.reporting-after ol{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none}.reporting-after li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;padding:24px;border-right:1px solid #2f4352;background:#0e1821}.reporting-after li:last-child{border-right:0}.reporting-after li strong{display:block;margin-bottom:8px}.reporting-after li p{margin:0;color:#9fb1bd;line-height:1.5}.reporting-after a{min-height:36px;margin-top:14px;padding:0 12px;font-size:.75rem}.reporting-sources>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}.reporting-sources a{display:grid;grid-template-columns:50px minmax(0,1fr);gap:16px;align-items:center;padding:20px;border:1px solid #334a5b;color:#eaf4f8;background:#0f1923;text-decoration:none}.reporting-sources a:hover{border-color:var(--report-cyan)}.reporting-sources a>i{display:grid;width:48px;height:48px;place-items:center;color:#081116;background:var(--report-cyan);font-size:1.25rem}.reporting-sources span{display:grid;gap:5px}.reporting-sources small{color:#9fb1bd;line-height:1.4}
.reporting-built-in{display:grid;grid-template-columns:58px minmax(240px,.8fr) minmax(380px,1.2fr);gap:18px;align-items:center;margin:0 0 18px;padding:22px;border:1px solid #2e6652;border-left:5px solid var(--report-green);border-radius:7px;background:#0a1d17}.reporting-built-in>span{display:grid;width:54px;height:54px;place-items:center;border-radius:7px;color:#07120e;background:var(--report-green);font-size:1.4rem}.reporting-built-in small{color:#83d5b0;font-size:.68rem;font-weight:900;text-transform:uppercase}.reporting-built-in h3{margin:5px 0 7px;color:#effaf4;font-size:1.18rem}.reporting-built-in p{margin:0;color:#aac8b9;line-height:1.5}.reporting-built-in dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}.reporting-built-in dl>div{min-width:0;padding:12px;border:1px solid #2b5042;border-radius:6px;background:#0d271f}.reporting-built-in dt{color:#83e4b6;font-size:.7rem;font-weight:900;text-transform:uppercase}.reporting-built-in dd{margin:5px 0 0;color:#b5cfc3;font-size:.84rem;line-height:1.45;overflow-wrap:anywhere}
@media(max-width:1050px){.reporting-hero{grid-template-columns:1fr}.reporting-hero aside{grid-template-columns:repeat(3,1fr);border-top:1px solid #3b3850;border-left:0}.reporting-hero aside article{grid-template-columns:44px minmax(0,1fr);padding:16px}.reporting-hero aside i{width:42px;height:42px}.reporting-valid-grid,.reporting-after ol{grid-template-columns:1fr 1fr}.reporting-after li:nth-child(2){border-right:0}.reporting-after li:nth-child(-n+2){border-bottom:1px solid #2f4352}.reporting-built-in{grid-template-columns:54px minmax(0,1fr)}.reporting-built-in dl{grid-column:1/-1}}
@media(max-width:760px){.reporting-page main{width:min(100% - 20px,1480px)}.reporting-hero{min-height:0}.reporting-hero>div{padding:42px 24px}.reporting-hero h1{font-size:3.25rem}.reporting-hero aside{grid-template-columns:1fr;padding:20px}.reporting-jump{position:static}.reporting-valid-grid,.reporting-check-grid,.reporting-template-grid,.reporting-after ol,.reporting-sources>div,.reporting-not-alone>div:nth-child(2){grid-template-columns:1fr}.reporting-not-alone{grid-template-columns:1fr}.reporting-not-alone aside{grid-column:auto}.reporting-after li{border-right:0;border-bottom:1px solid #2f4352}.reporting-after li:last-child{border-bottom:0}.reporting-check-result{display:grid}.reporting-template-grid article{min-height:270px}.reporting-built-in dl{grid-template-columns:1fr}}
@media(max-width:440px){.reporting-hero h1{font-size:2.65rem}.reporting-hero-actions{display:grid}.reporting-valid-grid article,.reporting-split,.reporting-check,.reporting-templates,.reporting-after,.reporting-sources,.reporting-not-alone{padding:22px 18px}.reporting-check-grid label>span{grid-template-columns:44px minmax(0,1fr);padding:15px}.reporting-not-alone article{grid-template-columns:36px minmax(0,1fr)}}
@media(max-width:1100px){.reporting-authority{grid-template-columns:54px minmax(0,1fr) minmax(180px,.6fr)}.reporting-authority>p:last-child{grid-column:2/-1}.reporting-ping-guide>header{grid-template-columns:1fr;gap:10px}.reporting-ping-grid{grid-template-columns:1fr}.reporting-ping-grid article{grid-template-columns:52px minmax(0,1fr)}}
@media(max-width:760px){.reporting-authority{grid-template-columns:48px minmax(0,1fr);padding:18px}.reporting-authority>span{width:46px;height:46px}.reporting-authority>p,.reporting-authority>p:last-child{grid-column:1/-1}.reporting-ping-guide{padding:26px 20px}.reporting-ping-decisions article{grid-template-columns:44px minmax(0,1fr)}.reporting-ping-decisions article>span{grid-column:2;justify-self:start;white-space:normal}.reporting-ping-guide>aside{align-items:flex-start}}
@media(max-width:440px){.reporting-authority{grid-template-columns:1fr}.reporting-authority>div,.reporting-authority>p,.reporting-authority>p:last-child{grid-column:1}.reporting-ping-grid article{grid-template-columns:44px minmax(0,1fr);padding:18px 16px}.reporting-ping-grid article>span{width:42px;height:42px}.reporting-ping-decisions article{grid-template-columns:38px minmax(0,1fr);padding:14px 12px}}

/* League ping reference */
.pings-page{--ping-bg:#071019;--ping-panel:#0d1923;--ping-line:#294353;--ping-cyan:#55ddea;--ping-rose:#ff758c;--ping-gold:#f2c65d;--ping-violet:#ad8cff;--ping-green:#65dda0;background:#050a0f;color:#eaf5f8}.pings-page main{width:min(1480px,calc(100% - 36px));margin:0 auto 80px}.pings-page section{margin:0 auto 28px}.pings-page h2{margin:5px 0 12px;font-size:clamp(2rem,4vw,4rem);line-height:1}.pings-page section>header>p:last-child{color:#a6bbc6;line-height:1.62}.pings-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,.7fr);min-height:520px;overflow:hidden;border:1px solid #335064;border-radius:8px;background:#0a1721}.pings-hero>div{display:flex;flex-direction:column;justify-content:center;padding:clamp(38px,6vw,88px)}.pings-hero h1{max-width:900px;margin:8px 0 22px;font-size:clamp(3.1rem,6.5vw,6.5rem);line-height:.94;letter-spacing:0}.pings-hero>div>p:not(.eyebrow){max-width:770px;margin:0;color:#b6c9d3;font-size:clamp(1rem,1.45vw,1.25rem);line-height:1.65}.pings-hero>div>div{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}.pings-hero a,.pings-reporting a{display:inline-flex;gap:9px;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border:1px solid var(--ping-cyan);border-radius:999px;color:#061115;background:var(--ping-cyan);font-weight:900;text-decoration:none}.pings-hero a.is-secondary{border-color:#536d7d;color:#e2f0f5;background:#11212d}.pings-hero>aside{display:grid;align-content:center;gap:12px;padding:32px;border-left:1px solid #3c3855;background:#13101d}.pings-hero>aside article{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center;padding:20px;border:1px solid #3c3850;border-left:5px solid var(--ping-violet);background:#191624}.pings-hero>aside article:nth-child(2){border-left-color:var(--ping-gold)}.pings-hero>aside article:nth-child(3){border-left-color:var(--ping-cyan)}.pings-hero>aside span{display:grid;gap:4px;min-width:0}.pings-hero>aside small{color:#a9a3c2;font-size:.68rem;font-weight:900;text-transform:uppercase}.pings-hero>aside strong{line-height:1.35}.pings-jump{position:sticky;z-index:8;top:74px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 36px;padding:13px 16px;border:1px solid #2a4656;border-radius:7px;background:rgba(7,14,20,.96);backdrop-filter:blur(12px)}.pings-jump strong{margin-right:4px;color:var(--ping-cyan);font-size:.72rem;text-transform:uppercase}.pings-jump a{padding:8px 12px;border:1px solid #365364;border-radius:999px;color:#ccdde4;font-size:.78rem;font-weight:850;text-decoration:none}.pings-wheel,.pings-combos,.pings-context,.pings-spam,.pings-reporting,.pings-sources{padding:clamp(28px,4vw,58px);border:1px solid var(--ping-line);border-radius:8px;background:var(--ping-bg)}.pings-wheel>header,.pings-context>header,.pings-spam>header{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);gap:clamp(24px,5vw,70px);align-items:end;margin-bottom:28px;padding-bottom:26px;border-bottom:1px solid #294252}.pings-wheel>header>p,.pings-context>header>p,.pings-spam>header>p{margin:0}.pings-wheel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.pings-wheel-grid article{--tone:var(--ping-cyan);display:flex;flex-direction:column;min-width:0;min-height:330px;padding:22px;border:1px solid #35505f;border-top:5px solid var(--tone);border-radius:7px;background:var(--ping-panel)}.pings-wheel-grid article.is-rose{--tone:var(--ping-rose)}.pings-wheel-grid article.is-blue{--tone:#70a8ff}.pings-wheel-grid article.is-gold{--tone:var(--ping-gold)}.pings-wheel-grid article.is-green{--tone:var(--ping-green)}.pings-wheel-grid article.is-orange{--tone:#ff9a68}.pings-wheel-grid article.is-violet{--tone:var(--ping-violet)}.pings-wheel-grid article.is-mint{--tone:#65d8bf}.pings-wheel-grid article>header{display:grid;grid-template-columns:42px 48px minmax(0,1fr);gap:10px;align-items:center}.pings-wheel-grid article>header>b{width:40px;height:40px;font-size:.74rem}.pings-wheel-grid article>header>span{display:grid;width:46px;height:46px;place-items:center;border-radius:7px;color:#071115;background:var(--tone);font-size:1.25rem}.pings-wheel-grid article>header>div{min-width:0}.pings-wheel-grid small{color:#91a8b4;font-size:.65rem;font-weight:900;text-transform:uppercase}.pings-wheel-grid h3{margin:3px 0 0;color:#f1f8fb;font-size:1.22rem;line-height:1.2;overflow-wrap:anywhere}.pings-wheel-grid article>p{margin:28px 0;color:#b0c1ca;line-height:1.58}.pings-wheel-grid footer{display:grid;gap:6px;margin-top:auto;padding-top:18px;border-top:1px solid #2b414f}.pings-wheel-grid footer strong{color:var(--tone);font-size:.68rem;text-transform:uppercase}.pings-wheel-grid footer span{color:#9eb3bd;font-size:.88rem;line-height:1.5}.pings-combos>header,.pings-reporting>header,.pings-sources>header{max-width:920px;margin-bottom:28px}.pings-combos>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.pings-combos article{min-width:0;padding:21px;border:1px solid #354d5b;border-bottom:4px solid var(--ping-cyan);border-radius:7px;background:#0d1922}.pings-combos article>span{display:flex;gap:8px;margin-bottom:24px}.pings-combos article i{display:grid;width:42px;height:42px;place-items:center;border-radius:50%;color:#071115;background:var(--ping-cyan);font-size:1.05rem}.pings-combos article i+ i{color:#171207;background:var(--ping-gold)}.pings-combos h3{margin:0 0 9px;font-size:1.08rem;line-height:1.3;overflow-wrap:anywhere}.pings-combos p{margin:0;color:#9fb3bd;line-height:1.52}.pings-context>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pings-context>div article{display:grid;grid-template-columns:50px minmax(0,1fr);gap:15px;align-items:center;min-width:0;padding:20px;border:1px solid #354d5c;background:#0c1922}.pings-context>div i{display:grid;width:48px;height:48px;place-items:center;border-radius:7px;color:#081115;background:var(--ping-violet);font-size:1.2rem}.pings-context>div span{display:grid;gap:5px;min-width:0}.pings-context>div small{color:#9fb2bd;line-height:1.45}.pings-context>aside{display:flex;gap:14px;align-items:center;margin-top:12px;padding:18px;border-left:5px solid var(--ping-gold);background:#1c180d}.pings-context>aside i{color:var(--ping-gold);font-size:1.35rem}.pings-context>aside p{margin:0;color:#d2c8aa;line-height:1.5}.pings-spam-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}.pings-spam-compare article{padding:25px;border:1px solid #365163;border-top:5px solid var(--ping-green);border-radius:7px;background:#0c1922}.pings-spam-compare article.is-disruptive{border-top-color:var(--ping-rose)}.pings-spam-compare header{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center}.pings-spam-compare header>i{display:grid;width:50px;height:50px;place-items:center;border-radius:7px;color:#07120e;background:var(--ping-green);font-size:1.25rem}.pings-spam-compare .is-disruptive header>i{color:#19090d;background:var(--ping-rose)}.pings-spam-compare small{color:#92a8b3;font-size:.68rem;font-weight:900;text-transform:uppercase}.pings-spam-compare h3{margin:3px 0 0;font-size:1.2rem}.pings-spam-compare ul{display:grid;gap:10px;margin:24px 0 0;padding:0;list-style:none}.pings-spam-compare li{position:relative;padding:13px 14px 13px 40px;border:1px solid #2c4654;color:#b2c3cb;background:#0a151d;line-height:1.48}.pings-spam-compare li:before{position:absolute;left:14px;top:13px;color:var(--ping-green);content:"✓";font-weight:900}.pings-spam-compare .is-disruptive li:before{color:var(--ping-rose);content:"!"}.pings-spam>footer{display:grid;grid-template-columns:58px minmax(0,1fr);gap:17px;align-items:center;margin-top:13px;padding:20px;border:1px solid #665734;border-left:5px solid var(--ping-gold);border-radius:7px;background:#1b170d}.pings-spam>footer>span{display:grid;width:54px;height:54px;place-items:center;border-radius:7px;color:#181307;background:var(--ping-gold);font-size:1.25rem}.pings-spam>footer small{color:#e4c96e;font-size:.67rem;font-weight:900;text-transform:uppercase}.pings-spam>footer h3{margin:4px 0 6px;color:#f3e6bd}.pings-spam>footer p{margin:0;color:#c5ba9d;line-height:1.5}.pings-reporting ol{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0;list-style:none}.pings-reporting li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;padding:23px;border-right:1px solid #304654;background:#0d1922}.pings-reporting li:last-child{border-right:0}.pings-reporting li strong{display:block;margin-bottom:7px}.pings-reporting li p{margin:0;color:#9fb3bd;line-height:1.5}.pings-reporting>div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;margin-top:12px;padding:18px;border:1px solid #4a3e67;border-radius:7px;background:#171321}.pings-reporting>div p{margin:0;color:#bdb2d1;line-height:1.5}.pings-reporting>div p strong{color:#dacbff}.pings-sources>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pings-sources a{display:grid;grid-template-columns:50px minmax(0,1fr);gap:15px;align-items:center;min-width:0;padding:20px;border:1px solid #354d5c;color:#edf6f9;background:#0d1922;text-decoration:none}.pings-sources a:hover{border-color:var(--ping-cyan)}.pings-sources a>i{display:grid;width:48px;height:48px;place-items:center;border-radius:7px;color:#071115;background:var(--ping-cyan);font-size:1.2rem}.pings-sources a span{display:grid;gap:5px;min-width:0}.pings-sources a small{color:#9fb3bd;line-height:1.42}.reporting-spam-guide{margin-top:14px;padding:20px;border:1px solid #3a5061;border-radius:7px;background:#0b1720}.reporting-spam-guide>header{display:flex;justify-content:space-between;gap:18px;align-items:end;padding-bottom:17px;border-bottom:1px solid #2d4452}.reporting-spam-guide h3{margin:4px 0 0;color:#edf7fa;font-size:1.35rem}.reporting-spam-guide>header a{display:inline-flex;gap:8px;align-items:center;min-height:40px;padding:0 13px;border:1px solid #49697a;border-radius:999px;color:#d9edf3;font-size:.78rem;font-weight:900;text-decoration:none}.reporting-spam-guide>div{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}.reporting-spam-guide article{display:grid;grid-template-columns:48px minmax(0,1fr);gap:13px;min-width:0;padding:17px;border:1px solid #315444;background:#0b1e18}.reporting-spam-guide article.is-disruptive{border-color:#633849;background:#201119}.reporting-spam-guide article>span{display:grid;width:46px;height:46px;place-items:center;border-radius:6px;color:#07120e;background:#67dda0;font-size:1.15rem}.reporting-spam-guide article.is-disruptive>span{color:#19080d;background:#ff758c}.reporting-spam-guide article small{color:#8bdcb3;font-size:.66rem;font-weight:900;text-transform:uppercase}.reporting-spam-guide article.is-disruptive small{color:#ff9aae}.reporting-spam-guide h4{margin:3px 0 7px;color:#eff8f3;font-size:1.02rem}.reporting-spam-guide article p{margin:0;color:#acc7b9;line-height:1.48}.reporting-spam-guide article.is-disruptive p{color:#d3aeba}.reporting-spam-guide>footer{display:grid;gap:4px;margin-top:10px;padding:14px;border-left:4px solid var(--report-gold);color:#c9bea0;background:#1d190e;line-height:1.48}.reporting-spam-guide>footer strong{color:#f1dfa8}
@media(max-width:1120px){.pings-wheel-grid,.pings-combos>div{grid-template-columns:1fr 1fr}.pings-wheel-grid article{min-height:300px}.pings-hero{grid-template-columns:1fr}.pings-hero>aside{grid-template-columns:repeat(3,1fr);border-top:1px solid #3c3855;border-left:0}.reporting-spam-guide>header{align-items:start;flex-direction:column}}
@media(max-width:760px){.pings-page main{width:min(100% - 20px,1480px)}.pings-hero{min-height:0}.pings-hero>div{padding:42px 24px}.pings-hero h1{font-size:3.2rem}.pings-hero>aside{grid-template-columns:1fr;padding:20px}.pings-jump{position:static}.pings-wheel>header,.pings-context>header,.pings-spam>header{grid-template-columns:1fr;gap:10px}.pings-wheel-grid,.pings-combos>div,.pings-context>div,.pings-spam-compare,.pings-reporting ol,.pings-sources>div,.reporting-spam-guide>div{grid-template-columns:1fr}.pings-wheel-grid article{min-height:0}.pings-reporting li{border-right:0;border-bottom:1px solid #304654}.pings-reporting li:last-child{border-bottom:0}.pings-reporting>div{grid-template-columns:1fr}.pings-reporting>div a{justify-self:start}.reporting-spam-guide>header a{width:100%}}
@media(max-width:440px){.pings-hero h1{font-size:2.6rem}.pings-hero>div>div{display:grid}.pings-wheel,.pings-combos,.pings-context,.pings-spam,.pings-reporting,.pings-sources{padding:22px 17px}.pings-wheel-grid article>header{grid-template-columns:38px 42px minmax(0,1fr)}.pings-wheel-grid article>header>b{width:36px;height:36px}.pings-wheel-grid article>header>span{width:40px;height:40px}.pings-spam>footer{grid-template-columns:1fr}.reporting-spam-guide{padding:16px}.reporting-spam-guide article{grid-template-columns:42px minmax(0,1fr)}.reporting-spam-guide article>span{width:40px;height:40px}}
.empty {
  color: var(--muted);
}
.next-work {
  margin-top: 28px;
  padding: 26px 0;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.next-work h2 {
  margin: 0 0 8px;
}
.next-work p:last-child {
  color: var(--muted);
  margin: 0;
  max-width: 700px;
}
.next-work a {
  white-space: nowrap;
}
.next-work-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.league-tool-directory {
  margin-top: 34px;
  padding: 30px 0 34px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.league-tool-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 20px;
}
.league-tool-heading h2 {
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
}
.league-tool-heading > p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.league-tool-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.league-tool-card {
  grid-column: span 2;
  min-height: 184px;
  padding: 18px;
  border: 1px solid rgba(151, 171, 212, .2);
  border-top: 3px solid var(--cyan);
  border-radius: 7px;
  color: var(--text);
  background: #0d161f;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.league-tool-card:nth-child(2) { border-top-color: #c486ff; }
.league-tool-card:nth-child(3) { border-top-color: #ff838f; }
.league-tool-card:nth-child(4) { border-top-color: #72e4b0; grid-column: 2 / span 2; }
.league-tool-card:nth-child(5) { border-top-color: var(--gold); grid-column: 4 / span 2; }
.league-tool-card:is(:hover, :focus-visible) {
  outline: 0;
  border-color: rgba(113, 226, 235, .7);
  background: #12212b;
  transform: translateY(-2px);
}
.league-tool-card.is-current { background: #10232a; }
.league-tool-number {
  color: #718794;
  font-size: .72rem;
  font-weight: 900;
}
.league-tool-card strong {
  margin-top: 20px;
  font-size: 1.12rem;
}
.league-tool-card small {
  margin-top: 7px;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.45;
}
.league-tool-action {
  margin-top: auto;
  padding-top: 18px;
  color: #7ee7ee;
  font-size: .78rem;
  font-weight: 850;
}

@media (max-width: 820px) {
  .league-tool-heading { align-items: start; flex-direction: column; gap: 12px; }
  .league-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .league-tool-card,
  .league-tool-card:nth-child(4),
  .league-tool-card:nth-child(5) { grid-column: auto; }
  .league-tool-card:last-child { grid-column: 1 / -1; min-height: 150px; }
}

@media (max-width: 540px) {
  .league-tool-directory { margin-top: 22px; padding-block: 24px; }
  .league-tool-grid { grid-template-columns: 1fr; }
  .league-tool-card,
  .league-tool-card:nth-child(4),
  .league-tool-card:nth-child(5),
  .league-tool-card:last-child { grid-column: auto; min-height: 142px; }
  .league-tool-card strong { margin-top: 12px; }
}
.guide-main {
  padding-top: 24px;
}
.guide-hero {
  height: 260px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 3px solid var(--gold);
}
.guide-hero > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}
.guide-picker {
  padding: 24px 0 20px;
  border-bottom: 1px solid var(--line);
}
.picker-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 16px;
}
.picker-heading > p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
.picker-heading h2 {
  margin: 3px 0 0;
  font-size: 23px;
}
.matchup-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.champion-field {
  position: relative;
  min-width: 0;
}
.champion-field > label {
  display: grid;
  gap: 2px;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.champion-field > label small {
  color: #667887;
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
}
.champion-input-shell {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-height: 58px;
  padding: 7px 38px 7px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
}
.champion-input-shell::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid #718593;
  border-bottom: 2px solid #718593;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.champion-input-shell:focus-within {
  outline: 2px solid #39c8d455;
  border-color: var(--cyan);
}
.champion-input-shell > img {
  display: block;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 4px;
  background: #080d13;
}
.champion-input-shell input {
  width: 100%;
  height: 42px;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  padding: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
}
.champion-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  max-height: 350px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #2a3a46;
  border-radius: 5px;
  background: #090f15;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.champion-menu[hidden] { display: none; }
.champion-option {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.champion-option:hover,
.champion-option:focus-visible,
.champion-option.active {
  outline: 0;
  background: #15232d;
}
.champion-option img {
  border-radius: 4px;
}
.champion-option strong,
.champion-option small {
  display: block;
}
.champion-option strong { font-size: 14px; }
.champion-option small {
  margin-top: 2px;
  overflow: hidden;
  color: #8395a2;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.champion-empty {
  margin: 0;
  padding: 14px;
  color: var(--muted);
  font-size: 13px;
}
.picker-status {
  margin: 10px 0 0;
  color: #718593;
  font-size: 12px;
}
.versus-mark {
  display: grid;
  place-items: center;
  height: 58px;
  margin-bottom: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #0d151c;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 900;
}
.guide-source,
.guide-error {
  margin: 0;
  padding: 16px 0;
  color: var(--muted);
  font-size: 13px;
}
.guide-source {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.guide-source span::before {
  content: "\2022";
  margin-right: 18px;
  color: var(--cyan);
}
.guide-jumps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
}
.guide-jumps span {
  margin-right: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.guide-jumps a {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: #d7e2e9;
  background: #0f171f;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.guide-jumps a:hover,
.guide-jumps a:focus-visible {
  border-color: var(--cyan);
  color: #fff;
}
#role-fit-title, #starter-build-title, #champion-playbook-title, #combos-title, #matchup-notes, #abilities-title { scroll-margin-top: 88px; }
#role-fit-title,
#starter-build-title,
#matchup-notes,
#abilities-title {
  scroll-margin-top: 76px;
}
.role-fit {
  padding: 20px 0 4px;
  border-bottom: 1px solid var(--line);
}
.role-fit .section-heading {
  margin: 0 0 14px;
}
.role-fit .section-heading h2 {
  margin: 2px 0 0;
  font-size: 23px;
}
.role-fit-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}
.selected-role-verdict {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-bottom: 10px;
  padding: 16px 18px;
  border-left: 4px solid #74e6b2;
  background: linear-gradient(90deg, rgba(54, 194, 132, .1), var(--panel) 38%);
}
.role-verdict-title span,
.role-verdict-title strong {
  display: block;
}
.role-verdict-title { display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:10px;align-items:center;min-width:0; }
.role-verdict-title .guide-lane-icon { grid-row:1/3;display:block;width:44px;height:44px;padding:7px;border:1px solid rgba(91,222,231,.5);border-radius:6px;background:#0b1a22;object-fit:contain; }
.role-verdict-title span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.role-verdict-title strong {
  margin-top: 3px;
  color: #74e6b2;
  font-size: 22px;
}
.role-verdict-copy p {
  margin: 0;
  color: #c1cdd4;
  line-height: 1.55;
}
.selected-role-verdict.possible {
  border-left-color: var(--gold);
  background: linear-gradient(90deg, rgba(226, 178, 79, .1), var(--panel) 38%);
}
.selected-role-verdict.possible .role-verdict-title strong {
  color: var(--gold);
}
.selected-role-verdict.avoid {
  border-left-color: #ff6f7f;
  background: linear-gradient(90deg, rgba(255, 80, 100, .16), rgba(34, 16, 23, .9) 42%, var(--panel));
  box-shadow: inset 0 0 0 1px rgba(255, 111, 127, .12);
}
.selected-role-verdict.avoid .role-verdict-title strong {
  color: #ff9292;
}
.role-switches {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.role-switches span {
  color: #ffb5bd;
  font-size: 12px;
  font-weight: 800;
}
.role-switches a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(116, 230, 178, .42);
  border-radius: 4px;
  color: #9df0c8;
  background: rgba(39, 137, 98, .12);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
.role-switches a img { width:24px;height:24px;margin-right:7px;padding:3px;border:1px solid rgba(116,230,178,.32);border-radius:4px;background:#0b1918;object-fit:contain; }
.role-switches a:hover,
.role-switches a:focus-visible {
  border-color: #74e6b2;
  background: rgba(39, 137, 98, .23);
}
.role-fit-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
}
.role-fit-card span,
.role-fit-card strong,
.role-fit-card small {
  display: block;
}
.role-fit-card .role-fit-card-heading { display:flex;align-items:center;gap:8px;min-width:0; }
.role-fit-card .role-fit-card-heading img { flex:0 0 34px;width:34px;height:34px;padding:5px;border:1px solid rgba(99,218,228,.34);border-radius:5px;background:#0a1820;object-fit:contain; }
.role-fit-card .role-fit-card-heading b { min-width:0;color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase; }
.role-fit-card.selected .role-fit-card-heading img { border-color:var(--cyan);background:rgba(57,200,212,.12); }
.guide-role-kicker { display:flex!important;align-items:center;gap:8px; }
.guide-role-kicker img { width:26px;height:26px;padding:4px;border:1px solid rgba(104,225,233,.5);border-radius:5px;background:rgba(4,15,22,.72);object-fit:contain; }
.auto-role-badge { display:inline-flex;align-items:center;gap:7px; }
.auto-role-badge img { width:22px;height:22px;padding:3px;border:1px solid rgba(91,217,227,.4);border-radius:4px;background:#0a1921;object-fit:contain; }
.role-fit-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.role-fit-card strong {
  margin-top: 5px;
  color: #74e6b2;
}
.role-fit-card small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}
.role-fit-card.possible strong {
  color: var(--gold);
}
.role-fit-card.avoid strong {
  color: #ff9292;
}
.role-fit-card.avoid {
  border-color: rgba(255, 111, 127, .18);
  background: linear-gradient(145deg, rgba(255, 78, 101, .06), var(--panel));
}
.role-fit-card.selected {
  border-color: var(--cyan);
  box-shadow: inset 0 0 0 1px var(--cyan);
}
.role-fit-card.avoid.selected {
  border-color: #ff6f7f;
  box-shadow: inset 0 0 0 1px #ff6f7f, 0 8px 24px rgba(255, 69, 92, .08);
}
.wrong-role-build {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-color: rgba(255, 111, 127, .35);
  border-left: 4px solid #ff6f7f;
  background: rgba(255, 71, 94, .07);
}
.wrong-role-build[hidden],
.off-meta-build-content[hidden] {
  display: none !important;
}
.wrong-role-build strong { color: #ff9292; }
.wrong-role-build p { max-width: 760px; }
.off-meta-trigger {
  flex: 0 0 auto;
  border-color: rgba(255, 146, 146, .55);
  color: #ffe5e8;
  background: rgba(255, 92, 112, .16);
}
.off-meta-trigger:hover { background: rgba(255, 92, 112, .26); }
.build-confidence.off-meta {
  color: #ffb4bd;
  border-color: rgba(255, 111, 127, .35);
  background: rgba(255, 71, 94, .1);
}
.off-meta-build-content {
  padding-top: 18px;
  border-top: 1px solid rgba(255, 111, 127, .24);
}
.role-warning-dialog {
  width: min(560px, calc(100% - 28px));
  max-height: min(720px, calc(100dvh - 28px));
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(255, 111, 127, .4);
  border-radius: 6px;
  color: var(--text);
  background: #10151d;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .64);
}
.role-warning-dialog::backdrop {
  background: rgba(1, 4, 8, .78);
  backdrop-filter: blur(5px);
}
.role-warning-dialog form { padding: 28px; }
.role-warning-dialog h2 {
  margin: 4px 0 12px;
  font-size: 27px;
  line-height: 1.15;
}
.role-warning-dialog form > p:not(.eyebrow) {
  margin: 0;
  color: #c6d0d7;
  line-height: 1.55;
}
.role-warning-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 111, 127, .42);
  border-radius: 50%;
  color: #ff9292;
  background: rgba(255, 71, 94, .12);
  font-size: 23px;
  font-weight: 900;
}
.role-warning-points {
  margin-top: 20px;
  padding: 16px 18px;
  border-left: 3px solid #ff6f7f;
  background: rgba(255, 71, 94, .07);
}
.role-warning-points strong { color: #ffb4bd; }
.role-warning-points ul {
  margin: 9px 0 0;
  padding-left: 18px;
  color: #b8c4cc;
  line-height: 1.5;
}
.role-warning-points li + li { margin-top: 7px; }
.role-warning-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}
.role-warning-actions .secondary {
  border-color: var(--line);
  color: var(--text);
  background: var(--panel-2);
}
.role-warning-actions [data-confirm-off-meta] {
  border-color: #ff6f7f;
  color: #fff;
  background: #b9364a;
}
.win-rate-note {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px 18px;
  align-items: center;
  margin: 14px 0 18px;
  padding: 14px 16px;
  border-left: 3px solid var(--gold);
  background: #111920;
}
.win-rate-note span {
  color: var(--gold);
  font-weight: 800;
}
.win-rate-note p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.duo-lane-planner { margin-top: 22px; padding: 18px; border: 1px solid rgba(151, 171, 212, .18); background: #0a1019; }
.duo-lane-planner .section-heading { align-items: center; }
.duo-lane-toggle { min-height: 38px; padding: 8px 13px; border: 1px solid var(--cyan); border-radius: 999px; color: #061117; background: var(--cyan); font: inherit; font-size: .74rem; font-weight: 900; cursor: pointer; }
.duo-lane-intro { max-width: 760px; margin: 8px 0 0; color: #9eacbf; font-size: .8rem; line-height: 1.5; }
.duo-lane-fields { display: grid; grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr); gap: 12px; align-items: end; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(151, 171, 212, .14); }
.duo-lane-fields[hidden] { display: none; }
.duo-lane-versus { display: grid; place-items: center; align-self: end; height: 58px; color: #d89a3d; font-size: .72rem; font-weight: 950; }
.duo-target-plan { grid-column: 1/-1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 9px; margin-top: 2px; }
.duo-target-primary,
.duo-target-backup { padding: 13px; border: 1px solid rgba(151, 171, 212, .17); background: #070c13; }
.duo-target-primary { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; }
.duo-target-primary > span,
.duo-target-backup > span { grid-column: 1/-1; color: #7f8da3; font-size: .63rem; font-weight: 900; text-transform: uppercase; }
.duo-target-primary img { width: 52px; height: 52px; border: 1px solid rgba(255, 255, 255, .14); }
.duo-target-primary strong,
.duo-target-backup strong { display: block; color: #edf5ff; font-size: .9rem; }
.duo-target-primary p,
.duo-target-backup p { margin: 4px 0 0; color: #9eacbf; font-size: .72rem; line-height: 1.45; }
.duo-target-rule { grid-column: 1/-1; margin: 0; padding: 10px 12px; border-left: 3px solid #d89a3d; color: #aebbd0; background: rgba(216, 154, 61, .055); font-size: .72rem; line-height: 1.45; }
.duo-target-rule b { color: #f1d495; }
.guide-error {
  color: #ff9292;
}
.champion-pair,
.guide-tips,
.ability-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.champion-summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 0;
  border-top: 3px solid var(--gold);
  border-bottom: 1px solid var(--line);
}
.champion-summary:nth-child(2) {
  border-top-color: var(--cyan);
}
.champion-summary img {
  flex: 0 0 auto;
  border-radius: 5px;
}
.champion-summary h2 {
  margin: 0 0 3px;
  font-size: 27px;
}
.champion-summary p {
  margin: 4px 0 0;
  color: var(--muted);
}
.champion-summary .champion-title {
  color: var(--text);
  text-transform: capitalize;
}
.guide-tips {
  margin-top: 28px;
}
.guide-tips article {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
}
.guide-tips h2 {
  margin: 0 0 12px;
  font-size: 21px;
}
.guide-tips ul {
  margin: 0;
  padding-left: 20px;
  color: #c1cdd4;
  line-height: 1.65;
}
.guide-tips li + li {
  margin-top: 8px;
}

.champion-playbook { padding: 28px; border: 1px solid var(--line); background: #0a1119; }
.playbook-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(151,171,212,.17); }
.playbook-header .eyebrow { margin: 0 0 6px; }
.playbook-header h2 { margin: 0; color: #f5f8fb; font-size: clamp(1.45rem, 2.5vw, 2rem); line-height: 1.12; }
.playbook-header > div > p:last-child { max-width: 680px; margin: 9px 0 0; color: #9fb0c0; line-height: 1.5; }
.playbook-review-badge { align-self: center; padding: 7px 11px; border: 1px solid rgba(57,200,212,.34); border-radius: 999px; color: #bceff3; background: rgba(57,200,212,.08); font-size: .7rem; font-weight: 850; white-space: nowrap; }
.playbook-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.playbook-grid article { padding: 20px; border: 1px solid rgba(151,171,212,.18); background: #0d1621; }
.playbook-do { border-top: 3px solid #35d69f !important; }
.playbook-avoid { border-top: 3px solid #ff6f7d !important; }
.playbook-heading { display: flex; gap: 12px; align-items: center; }
.playbook-heading > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #071019; font-weight: 900; background: #35d69f; }
.playbook-avoid .playbook-heading > span { background: #ff6f7d; }
.playbook-heading small { display: block; color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.playbook-heading strong { display: block; margin-top: 2px; color: #f4f7fb; }
.playbook-grid ol { margin: 16px 0 0; padding-left: 22px; color: #cad6e3; }
.playbook-grid li { padding-left: 5px; line-height: 1.55; }
.playbook-grid li + li { margin-top: 9px; }
.playbook-state { margin-top: 16px; padding: 16px; border: 1px solid rgba(151,171,212,.17); background: #09121a; }
.playbook-state-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.playbook-state-heading > div:first-child > span { color: #f1f5f9; font-weight: 850; }
.playbook-state-heading p { margin: 4px 0 0; color: #93a6b8; font-size: .76rem; }
.playbook-state-switch { display: inline-grid; grid-template-columns: repeat(3, minmax(72px, 1fr)); padding: 3px; border: 1px solid rgba(151,171,212,.22); border-radius: 6px; background: #060c12; }
.playbook-state-switch button { min-height: 34px; padding: 6px 12px; border: 0; border-radius: 4px; color: #9fb0c0; background: transparent; font: 800 .72rem/1 system-ui,sans-serif; cursor: pointer; }
.playbook-state-switch button[aria-selected="true"] { color: #061015; background: #46d4c5; box-shadow: 0 3px 12px rgba(70,212,197,.2); }
.playbook-state-switch button[data-playbook-state-button="ahead"][aria-selected="true"] { background: #68dfa8; }
.playbook-state-switch button[data-playbook-state-button="behind"][aria-selected="true"] { background: #ff9b69; }
.playbook-state-panel { margin-top: 14px; }
.playbook-state-summary { margin: 0 0 10px; padding: 10px 12px; border-left: 3px solid var(--gold); color: #c9d5df; background: rgba(214,169,63,.06); font-size: .82rem; line-height: 1.5; }
.playbook-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.playbook-phases article { padding: 14px; border: 1px solid rgba(151,171,212,.16); background: #0b141e; }
.playbook-phases span { color: var(--gold); font-size: .7rem; font-weight: 850; text-transform: uppercase; }
.playbook-phases p { margin: 6px 0 0; color: #c3d0de; font-size: .82rem; line-height: 1.5; }
.playbook-note { margin: 14px 0 0; padding: 12px 14px; border-left: 3px solid var(--cyan); color: #b8c7d7; background: rgba(57,200,212,.06); font-size: .84rem; }
.combo-guide { padding: 28px; border: 1px solid var(--line); background: #09121a; }
.ability-key-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ability-key-map > div { display: grid; grid-template-columns: 34px 38px minmax(0, 1fr); gap: 9px; align-items: center; min-width: 0; padding: 11px; border: 1px solid rgba(151,171,212,.17); background: #0d1721; }
.ability-key-map kbd, .combo-buttons kbd { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 7px; border: 1px solid rgba(57,200,212,.55); border-bottom-width: 3px; border-radius: 6px; color: #e8fcff; background: #102431; font: 850 .78rem/1 system-ui,sans-serif; }
.ability-key-map img { border-radius: 5px; }
.ability-key-map span { min-width: 0; }
.ability-key-map strong, .ability-key-map small { display: block; }
.ability-key-map strong { color: #f2f6fa; font-size: .78rem; line-height: 1.25; overflow-wrap: anywhere; }
.ability-key-map small { margin-top: 3px; color: #91a5b9; font-size: .68rem; line-height: 1.4; overflow-wrap: anywhere; }
.combo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.combo-grid article { padding: 18px; border: 1px solid rgba(151,171,212,.18); border-left: 3px solid var(--cyan); background: #0d1620; }
.combo-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.combo-title > span { min-width: 0; color: #f3f7fb; font-weight: 850; line-height: 1.35; overflow-wrap: anywhere; }
.combo-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; min-width: 0; }
.combo-buttons kbd { flex: 0 0 auto; width: auto; max-width: 100%; white-space: nowrap; }
.combo-buttons kbd.basic-attack { border-color: rgba(214,169,63,.6); color: #f8dfa0; background: #2a2415; }
.combo-grid p { margin: 12px 0 8px; color: #c8d5e1; line-height: 1.52; }
.combo-grid small { color: #97aabd; line-height: 1.45; }
.combo-grid small b { color: #ffbd77; }
.combo-pending { margin-top: 14px; padding: 16px; border: 1px dashed rgba(151,171,212,.28); background: #0c151e; }
.combo-pending strong { color: #f1d495; }
.combo-pending p, .combo-note { margin: 6px 0 0; color: #a9b9c8; line-height: 1.5; }
.combo-note { margin-top: 12px; font-size: .78rem; }
.picker-feedback { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.picker-feedback .picker-status { margin: 0; }
.auto-role-badge { flex: 0 0 auto; padding: 6px 10px; border: 1px solid rgba(57,200,212,.35); border-radius: 999px; color: #bdeff4; background: rgba(57,200,212,.09); font-size: .72rem; font-weight: 850; }
.tip-source {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: #718593;
  font-size: 11px;
  line-height: 1.5;
}
.ability-compare {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.ability-compare > .section-heading {
  grid-column: 1/-1;
  margin: 0;
}
.ability-compare > .section-heading h2 {
  margin: 0;
}
.ability-column {
  display: grid;
  align-content: start;
  gap: 8px;
}
.ability-column > h3 {
  margin: 0 0 4px;
  font-size: 19px;
}
.ability-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
}
.ability-row img {
  border-radius: 4px;
}
.ability-row strong,
.ability-row span {
  display: block;
}
.ability-row span {
  margin-top: 2px;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.ability-row p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
footer {
  border-top: 1px solid var(--line);
  padding: 24px max(20px, 4vw);
  color: #7f929f;
  font-size: 11px;
  line-height: 1.6;
}
footer > p,
.footer-links {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 10px;
}
.footer-links a {
  color: #c0ccd3;
  text-decoration: none;
}
.legal-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 42px 0;
}
.legal-page h1 {
  font-size: 42px;
  margin: 0 0 12px;
}
.legal-page .intro {
  font-size: 18px;
  color: var(--muted);
  margin: 0 0 32px;
}
.legal-page section {
  border-top: 1px solid var(--line);
  padding: 22px 0;
}
.legal-page h2 {
  font-size: 20px;
  margin: 0 0 9px;
}
.legal-page p,
.legal-page li {
  color: #b5c2ca;
  line-height: 1.7;
}
.legal-page a {
  color: #73d9e1;
}
.starter-build {
  margin: 22px 0;
  padding: 24px;
  border: 1px solid rgba(151, 171, 212, .2);
  border-top: 3px solid var(--cyan);
  background: #101722;
}
.build-intro,
.build-guidance {
  display: grid;
  gap: 18px;
}
.build-intro {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  margin: 18px 0;
}
.build-intro strong { color: #f7f9ff; font-size: 1.12rem; }
.build-intro p,
.matchup-swap p,
.build-unavailable p {
  margin: 5px 0 0;
  color: #aab6cc;
  line-height: 1.55;
}
.build-confidence {
  padding: 7px 10px;
  border: 1px solid rgba(91, 211, 255, .3);
  color: #83dcff;
  background: rgba(33, 151, 197, .1);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}
.build-confidence.baseline {
  border-color: rgba(245, 188, 92, .35);
  color: #f5c77c;
  background: rgba(180, 118, 28, .1);
}
.build-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 16px;
  border: 1px solid rgba(151, 171, 212, .16);
  background: rgba(151, 171, 212, .16);
}
.build-overview article {
  min-width: 0;
  padding: 15px 16px;
  background: #0b111b;
}
.build-overview span,
.build-overview strong {
  display: block;
}
.build-overview span {
  color: #71809b;
  font-size: .69rem;
  font-weight: 800;
  text-transform: uppercase;
}
.build-overview strong {
  margin-top: 5px;
  color: #edf4ff;
  line-height: 1.35;
}
.build-overview p {
  margin: 6px 0 0;
  color: #95a4b8;
  font-size: .78rem;
  line-height: 1.45;
}
.build-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.build-items li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 12px;
  align-items: start;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(151, 171, 212, .16);
  background: #0b111b;
}
.build-items li > span {
  display: block;
  grid-column: 1/-1;
  min-height: 14px;
  margin-bottom: 10px;
  color: #71809b;
  font-size: .7rem;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
}
.build-items img {
  display: block;
  width: 56px;
  height: 56px;
  grid-row: 2/4;
  border: 1px solid rgba(255, 255, 255, .16);
}
.build-items strong {
  display: block;
  overflow-wrap: anywhere;
  color: #e9effb;
  font-size: .9rem;
  line-height: 1.25;
}
.build-items small {
  display: block;
  margin-top: 3px;
  color: var(--gold);
  font-size: .72rem;
  font-weight: 700;
}
.build-items li > p {
  grid-column: 1/-1;
  margin: 11px 0 0;
  color: #9eacbf;
  font-size: .79rem;
  line-height: 1.48;
}
.build-recipe { grid-column: 1 / -1; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(255, 255, 255, .08); }
.build-recipe-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.build-recipe-heading span { color: var(--cyan); font-size: .59rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.build-recipe-heading strong { color: #9dabc0; font-size: .64rem; }
.build-recipe-parts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.build-recipe-parts > i { color: #56647a; font-size: .72rem; font-style: normal; font-weight: 900; }
.build-component { display: grid; grid-template-columns: 34px minmax(74px, auto); gap: 7px; align-items: center; min-width: 0; padding: 6px 8px; border: 1px solid rgba(117, 139, 171, .2); background: rgba(3, 8, 15, .62); }
.build-items .build-component > img { grid-column: 1; grid-row: 1; width: 34px; height: 34px; border-radius: 4px; }
.build-items .build-component > span:not(.build-component-subparts) { grid-column: 2; grid-row: 1; min-width: 0; }
.build-component b,
.build-component small { display: block; }
.build-component b { max-width: 120px; overflow: hidden; color: #e8f0fb; font-size: .62rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.build-component small { margin-top: 2px; color: #8f9eb3; font-size: .57rem; }
.build-component-subparts { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 3px 5px; align-items: center; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, .05); }
.build-items .build-component-subparts img { width: 18px; height: 18px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .1); }
.build-component-subparts small { max-width: 78px; margin: 0 4px 0 0; overflow: hidden; color: #738299; font-size: .5rem; text-overflow: ellipsis; white-space: nowrap; }
.build-combine-cost { min-width: 72px; padding: 7px 9px; border: 1px solid rgba(79, 230, 166, .25); background: rgba(79, 230, 166, .07); text-align: center; }
.build-combine-cost span,
.build-combine-cost strong { display: block; }
.build-combine-cost span { color: #68efb5; font-size: .52rem; font-weight: 900; text-transform: uppercase; }
.build-combine-cost strong { margin-top: 2px; color: #eafff6; font-size: .64rem; }
@media (max-width: 520px) {
  .build-recipe-heading { display: block; }
  .build-recipe-heading strong { display: block; margin-top: 2px; }
  .build-recipe-parts { align-items: stretch; }
  .build-component { flex: 1 1 calc(50% - 14px); }
  .build-combine-cost { flex: 1 1 74px; display: grid; place-content: center; }
}

/* v175: lane imagery and verdict-safe status colour. */
.discord-role-picker article {
  --discord-role-tone: #d9e4eb;
  position: relative;
  border-top: 3px solid var(--discord-role-tone);
}
.discord-role-picker article.is-top { --discord-role-tone: #71d9a3; }
.discord-role-picker article.is-jungle { --discord-role-tone: #d5a653; }
.discord-role-picker article.is-middle { --discord-role-tone: #aa8bea; }
.discord-role-picker article.is-bottom { --discord-role-tone: #ed718a; }
.discord-role-picker article.is-support { --discord-role-tone: #55dce9; }
.discord-role-lane-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 20px 0 13px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--discord-role-tone) 62%, #28343e);
  border-radius: 7px;
  background: color-mix(in srgb, var(--discord-role-tone) 10%, #08111a);
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--discord-role-tone) 8%, transparent);
}
.discord-role-lane-icon img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--discord-role-tone) 28%, transparent));
}

.champion-role-map-grid article.is-recommended { --fit-color: #4fe6a6; }
.champion-role-map-grid article.is-possible { --fit-color: #e4ad48; }
.champion-role-map-grid article.is-avoid { --fit-color: #ed637d; }
.champion-role-map-heading > .champion-role-icon {
  border-color: color-mix(in srgb, var(--fit-color, #6f8192) 72%, #26343e);
  background: color-mix(in srgb, var(--fit-color, #6f8192) 9%, #071018);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--fit-color, #6f8192) 7%, transparent), 0 8px 18px rgba(0, 0, 0, .18);
}
.champion-role-map-heading > .champion-role-icon img {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--fit-color, #6f8192) 24%, transparent));
}
.champion-role-map-grid article.is-current .champion-role-icon {
  border-color: var(--fit-color, #6f8192);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fit-color, #6f8192) 17%, transparent), 0 0 20px color-mix(in srgb, var(--fit-color, #6f8192) 18%, transparent);
}

.guide-main .selected-role-verdict.recommended,
.guide-main .role-fit-card.recommended { --fit-status-color: #4fe6a6; }
.guide-main .selected-role-verdict.possible,
.guide-main .role-fit-card.possible { --fit-status-color: #e4ad48; }
.guide-main .selected-role-verdict.avoid,
.guide-main .role-fit-card.avoid { --fit-status-color: #ed637d; }
.guide-main .selected-role-verdict .guide-lane-icon,
.guide-main .role-fit-card .role-fit-icon {
  border-color: color-mix(in srgb, var(--fit-status-color, #6f8192) 72%, #263845);
  background: color-mix(in srgb, var(--fit-status-color, #6f8192) 10%, #071018);
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 7px 18px color-mix(in srgb, var(--fit-status-color, #6f8192) 11%, transparent);
}
.guide-main .selected-role-verdict .guide-lane-icon img,
.guide-main .role-fit-card .role-fit-icon img {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--fit-status-color, #6f8192) 30%, transparent));
}

/* v174: cinematic League home canvas and illustrated task entry points. */
.league-home-page {
  background-color: #080d12;
  background-image: linear-gradient(180deg, rgba(7, 12, 17, .35), #080d12 34%, rgba(8, 13, 18, .94) 58%, #080d12 76%);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: scroll;
}
.league-home-page::before {
  position: fixed;
  z-index: -1;
  inset: 64px 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent 3%, var(--home-cyan) 26%, var(--home-violet) 51%, var(--home-gold) 76%, transparent 97%);
  content: "";
  opacity: .72;
  pointer-events: none;
}
.league-home-page .topbar {
  border-bottom-color: #3a4350;
  background: rgba(5, 10, 15, .97);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .3);
}
.league-home-page main { isolation: isolate; }
.league-home-page .league-hero {
  min-height: 570px;
  border-color: #554a35;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .42), 0 0 0 1px rgba(229, 185, 85, .08);
}
.league-home-page .league-hero::after {
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 5px;
  background: linear-gradient(90deg, var(--home-gold), var(--home-cyan) 36%, var(--home-violet) 68%, var(--home-rose));
  content: "";
  opacity: .9;
}
.league-home-page .league-hero .hero-copy { min-height: 570px; }
.league-home-page .league-hero .eyebrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-left: 3px solid var(--home-gold);
  color: #f0cd7b;
  background: rgba(10, 13, 18, .78);
}
.league-home-page .league-hero-actions a { backdrop-filter: blur(8px); }
.league-home-page .league-home-command {
  position: relative;
  margin-top: 28px;
  padding: 28px 0 0;
  border: 0;
  border-top: 1px solid #45404c;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Shared clipboard actions on policy and communication references. */
.chat-copy .conduct-copy-action,
.accounts-copy .conduct-copy-action {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  width: 100%;
  min-height: 62px;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(185, 137, 255, .48);
  border-radius: 5px;
  color: #eee6ff;
  background: linear-gradient(110deg, rgba(126, 81, 187, .22), rgba(24, 20, 42, .9));
  text-align: left;
}
.chat-copy .conduct-copy-action > i,
.accounts-copy .conduct-copy-action > i {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(185, 137, 255, .46);
  border-radius: 5px;
  color: #c9a9ff;
  background: rgba(185, 137, 255, .09);
  font-size: 1rem;
}
.chat-copy .conduct-copy-action > span,
.accounts-copy .conduct-copy-action > span { display: block; min-width: 0; }
.chat-copy .conduct-copy-action :is(small, strong),
.accounts-copy .conduct-copy-action :is(small, strong) { display: block; min-width: 0; margin: 0; }
.chat-copy .conduct-copy-action small,
.accounts-copy .conduct-copy-action small {
  color: #aaa0bd;
  font-size: .59rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}
.chat-copy .conduct-copy-action strong,
.accounts-copy .conduct-copy-action strong {
  margin-top: 3px;
  color: #fff;
  font-size: .74rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.chat-copy .conduct-copy-action:is(:hover, :focus-visible),
.accounts-copy .conduct-copy-action:is(:hover, :focus-visible) {
  border-color: #c6a0ff;
  background: linear-gradient(110deg, rgba(126, 81, 187, .34), rgba(30, 24, 52, .96));
}
.chat-copy .conduct-copy-action.is-copied,
.accounts-copy .conduct-copy-action.is-copied {
  border-color: rgba(94, 221, 156, .72);
  background: linear-gradient(110deg, rgba(40, 137, 90, .3), rgba(15, 42, 31, .95));
}
.chat-copy .conduct-copy-action.is-copied > i,
.accounts-copy .conduct-copy-action.is-copied > i { color: #dfffee; border-color: rgba(94, 221, 156, .64); }

.conduct-hero-actions .conduct-copy-action,
.conduct-reply .conduct-copy-action {
  display: inline-grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  justify-content: stretch;
  min-height: 62px;
  padding: 10px 16px 10px 10px;
  border: 1px solid var(--conduct-purple);
  color: #fff;
  background: linear-gradient(135deg, #452968, #271739);
  text-align: left;
}
.conduct-copy-action > i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 5px;
  color: #f1e8ff;
  background: rgba(255, 255, 255, .1);
  font-size: 1rem;
}
.conduct-copy-action > span,
.conduct-copy-action :is(small, strong) { display: block; min-width: 0; }
.conduct-copy-action small,
.conduct-reply .conduct-copy-action small {
  margin: 0;
  color: #d3baff;
  font-size: .61rem;
  line-height: 1.2;
  text-transform: uppercase;
}
.conduct-copy-action strong {
  margin-top: 4px;
  color: #fff;
  font-size: .9rem;
  line-height: 1.2;
}
.conduct-copy-action.is-copied {
  border-color: var(--conduct-green);
  background: linear-gradient(135deg, #14533e, #0b2f25);
}
.conduct-copy-action.is-copied > i { color: #dfffee; }
.league-home-page .league-home-command::before {
  position: absolute;
  top: -2px;
  left: 0;
  width: min(250px, 34%);
  height: 3px;
  background: linear-gradient(90deg, var(--home-gold), var(--home-violet));
  content: "";
}
.league-home-page .league-home-command > header { padding-inline: 4px; }
.league-home-page .league-home-command-grid { gap: 12px; }
.league-home-page .league-home-command-grid > a {
  position: relative;
  display: grid;
  grid-template-columns: 38px 28px minmax(0, 1fr);
  grid-template-rows: 112px auto auto 1fr auto;
  min-height: 335px;
  align-content: stretch;
  padding: 0 18px 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--home-card-tone) 42%, #27323c);
  border-top: 3px solid var(--home-card-tone);
  background: color-mix(in srgb, var(--home-card-tone) 7%, #0c141c);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .25);
}
.league-home-command-art {
  grid-column: 1 / -1;
  display: block;
  height: 112px;
  margin: 0 -18px 15px;
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--home-card-tone) 42%, #27323c);
  background: #080d12;
}
.league-home-command-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
  opacity: .78;
  filter: saturate(.92) contrast(1.08);
  transition: transform .35s ease, opacity .25s ease, filter .25s ease;
}
.league-home-command-grid .is-draft .league-home-command-art img { object-position: center; }
.league-home-command-grid .is-play .league-home-command-art img { object-position: center 42%; }
.league-home-page .league-home-command-grid > a:is(:hover, :focus-visible) .league-home-command-art img {
  opacity: .96;
  filter: saturate(1.15) contrast(1.06);
  transform: scale(1.035);
}
.league-home-page .league-home-command-grid .league-step-number {
  grid-column: 1;
  grid-row: 2 / span 4;
}
.league-home-page .league-home-command-grid > a > i {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  color: var(--home-card-tone);
  font-size: 1.05rem;
}
.league-home-page .league-home-command-grid > a > small,
.league-home-page .league-home-command-grid > a > strong,
.league-home-page .league-home-command-grid > a > p,
.league-home-page .league-home-command-grid > a > b {
  grid-column: 3;
}
.league-home-page .league-home-command-grid > a > small { grid-row: 2; align-self: center; }
.league-home-page .league-home-command-grid > a > strong { grid-row: 3; margin-top: 8px; font-size: 1.12rem; }
.league-home-page .league-home-command-grid > a > p { grid-row: 4; }
.league-home-page .league-home-command-grid > a > b {
  grid-row: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--home-card-tone) 24%, #27323c);
}
.league-home-page .league-home-command-grid > a > b i { color: inherit; }
.league-home-page .league-home-release {
  border-color: #4a414f;
  background: rgba(11, 15, 22, .94);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .2);
}
.league-home-page .league-home-reference-strip {
  margin-top: 18px;
  border-color: #51485a;
  background: #51485a;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .22);
}
.league-home-page .league-home-reference-strip > span {
  min-height: 68px;
  padding-left: 18px;
  border-left: 4px solid var(--home-violet);
  background: rgba(15, 18, 28, .97);
}
.league-home-page .league-home-reference-strip a {
  min-height: 82px;
  background: rgba(12, 19, 27, .96);
}
.league-home-page .league-home-reference-strip a > b { font-size: 1rem; }
.league-home-page .league-tool-directory {
  position: relative;
  margin-inline: calc(50% - 50vw);
  padding: 42px max(16px, calc((100vw - 1220px) / 2)) 54px;
  border-block: 1px solid #3b3546;
  background: rgba(8, 13, 19, .9);
  box-shadow: inset 0 22px 60px rgba(0, 0, 0, .18);
}
.league-home-page .league-tool-heading h2 { color: #f5f2ff; }
.league-home-page .league-tool-group {
  border-color: color-mix(in srgb, var(--group-tone) 32%, #33404a);
  background: rgba(11, 17, 24, .95);
  box-shadow: 0 22px 55px rgba(0, 0, 0, .2);
}
.league-home-page .league-tool-group > header {
  background: color-mix(in srgb, var(--group-tone) 7%, #0c131b);
}
.league-home-page .league-tool-group .league-tool-card {
  background: color-mix(in srgb, var(--group-tone) 4%, #101820);
}

@media (max-width: 980px) {
  .league-home-page .league-home-command { grid-template-columns: 1fr; }
  .league-home-page .league-home-release { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .league-home-page { background-image: linear-gradient(180deg, #080d12, #0d1019 62%, #080d12); }
  .league-home-page .league-hero,
  .league-home-page .league-hero .hero-copy { min-height: 0; }
  .league-home-page .league-home-command-grid { grid-template-columns: 1fr; }
  .league-home-page .league-home-command-grid > a { min-height: 280px; grid-template-rows: 96px auto auto 1fr auto; }
  .league-home-command-art { height: 96px; }
  .league-home-page .league-home-release { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .league-home-page .league-home-command { padding-top: 22px; }
  .league-home-page .league-home-command-grid > a {
    grid-template-columns: 36px 24px minmax(0, 1fr);
    padding-inline: 14px;
  }
  .league-home-command-art { margin-inline: -14px; }
  .league-home-page .league-home-reference-strip a { min-height: 76px; }
  .league-home-page .league-tool-directory { padding-top: 30px; }
}
.build-guidance {
  grid-template-columns: minmax(0, 1.4fr) minmax(250px, .6fr);
  margin-top: 16px;
}
.build-guidance article,
.build-unavailable {
  padding: 18px;
  border: 1px solid rgba(151, 171, 212, .16);
  background: #0b111b;
}
.build-guidance h3,
.matchup-swap h3,
.build-subheading h3 {
  margin: 4px 0 0;
  color: #f2f6fd;
  font-size: 1rem;
}
.build-guidance ul {
  margin: 10px 0 0;
  padding-left: 20px;
  color: #c4cede;
  line-height: 1.55;
}
.build-guidance li + li { margin-top: 7px; }
.matchup-swap > div {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
  color: #f7f9ff;
}
.matchup-swap img { border: 1px solid rgba(255, 255, 255, .16); }
.build-alternatives {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(151, 171, 212, .16);
}
.build-subheading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  margin-bottom: 12px;
}
.build-subheading > span {
  color: #8695aa;
  font-size: .78rem;
}
.alternative-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.alternative-grid article {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(151, 171, 212, .16);
  background: #0b111b;
}
.alternative-grid img {
  border: 1px solid rgba(255, 255, 255, .16);
}
.alternative-grid strong,
.alternative-grid small {
  display: block;
}
.alternative-grid strong { color: #edf4ff; }
.alternative-grid small {
  margin-top: 2px;
  color: var(--gold);
  font-size: .7rem;
}
.alternative-grid p {
  margin: 6px 0 0;
  color: #9eacbf;
  font-size: .78rem;
  line-height: 1.45;
}
.build-warning {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-left: 3px solid #d89a3d;
  color: #c9b78f;
  background: rgba(216, 154, 61, .08);
  line-height: 1.5;
}
.build-mode-switch {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-bottom: 14px;
  padding: 3px;
  border: 1px solid rgba(151, 171, 212, .2);
  background: #090f18;
  border-radius: 999px;
}
.build-mode-switch button {
  min-width: 150px;
  padding: 10px 14px;
  border: 0;
  color: #9cabc0;
  background: transparent;
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
  border-radius: 999px;
}
.build-mode-switch button[aria-selected="true"] {
  color: #061117;
  background: var(--cyan);
}
.build-view[hidden] { display: none !important; }
.build-view {
  border-top: 1px solid rgba(151, 171, 212, .14);
  padding-top: 14px;
}
.build-view-intro {
  margin: 0 0 14px;
  color: #9eacbf;
  line-height: 1.5;
}
.build-view-intro strong { color: #edf4ff; }
.build-start-callout {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  margin: 0 0 12px;
  padding: 14px;
  border: 1px solid rgba(79, 230, 166, .32);
  border-left: 4px solid #4fe6a6;
  background: rgba(79, 230, 166, .065);
}
.build-start-callout img { width: 56px; height: 56px; border: 1px solid rgba(255, 255, 255, .16); }
.build-start-callout span,
.build-start-callout strong { display: block; }
.build-start-callout span { color: #78efb9; font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.build-start-callout strong { margin-top: 3px; color: #f1f7ff; font-size: .96rem; line-height: 1.35; }
.build-start-callout p { margin: 5px 0 0; color: #afbed0; font-size: .76rem; line-height: 1.45; }
.build-opening-checklist {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.build-opening-set-title { grid-column: 1/-1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; align-items: baseline; padding-top: 3px; }
.build-opening-set-title strong { color: #eef7ff; font-size: .8rem; }
.build-opening-set-title span { color: #78efb9; font-size: .7rem; font-weight: 850; }
.build-opening-set-title p { grid-column: 1/-1; margin: 0; color: #8494aa; font-size: .68rem; }
.build-opening-checklist li { display: grid; grid-template-columns: 26px 36px minmax(0, 1fr); gap: 8px; align-items: center; padding: 9px; border: 1px solid rgba(79, 230, 166, .17); background: rgba(5, 14, 20, .55); }
.build-opening-checklist li > b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #061117; background: #4fe6a6; font-size: .7rem; }
.build-opening-checklist li > img { width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .13); }
.build-opening-checklist li strong,
.build-opening-checklist li small { display: block; }
.build-opening-checklist li strong { color: #eaf6ff; font-size: .76rem; }
.build-opening-checklist li small { margin-top: 2px; color: #8494aa; font-size: .64rem; line-height: 1.35; }
.build-opening-destination { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 5px 8px; align-items: baseline; padding: 9px 11px; border-left: 3px solid var(--cyan); background: rgba(62, 210, 229, .055); }
.build-opening-destination span { color: #8291a7; font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.build-opening-destination strong { color: #eaf6ff; font-size: .78rem; }
.build-opening-destination small { color: #8291a7; font-size: .66rem; }
.support-quest-path { margin: 16px 0 12px; padding: 16px; border: 1px solid rgba(216, 154, 61, .32); background: linear-gradient(145deg, rgba(216, 154, 61, .08), rgba(8, 13, 20, .92) 56%); }
.support-quest-heading span,
.support-quest-heading strong { display: block; }
.support-quest-heading span { color: #f2bd68; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.support-quest-heading strong { margin-top: 4px; color: #fff5df; font-size: 1rem; }
.support-quest-heading p { max-width: 820px; margin: 6px 0 0; color: #b6a98e; font-size: .76rem; line-height: 1.5; }
.support-quest-path ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.support-quest-path li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: center; min-width: 0; padding: 11px; border: 1px solid rgba(216, 154, 61, .22); background: #080d14; }
.support-quest-path img { width: 44px; height: 44px; }
.support-quest-path li strong,
.support-quest-path li small { display: block; }
.support-quest-path li strong { color: #edf4ff; font-size: .73rem; line-height: 1.25; }
.support-quest-path li small { margin-top: 3px; color: #8291a7; font-size: .61rem; line-height: 1.35; }
.support-quest-action { grid-column: 1/-1; width: max-content; padding: 4px 7px; border: 1px solid rgba(216, 154, 61, .25); border-radius: 999px; color: #f4d79e; background: rgba(216, 154, 61, .08); font-size: .59rem; font-weight: 900; text-transform: uppercase; }
.support-quest-arrow { position: absolute; z-index: 2; top: 50%; right: -11px; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid rgba(216, 154, 61, .28); border-radius: 50%; color: #f1d495; background: #0a1018; font-size: .7rem; transform: translateY(-50%); }
.build-purchase-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 20px; align-items: center; margin: 0 0 10px; padding: 13px 15px; border-left: 4px solid var(--cyan); background: rgba(62, 210, 229, .055); }
.build-purchase-heading div span,
.build-purchase-heading div strong { display: block; }
.build-purchase-heading div span { color: var(--cyan); font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.build-purchase-heading div strong { margin-top: 2px; color: #f1f7ff; font-size: .94rem; }
.build-purchase-heading p { margin: 0; color: #9eacbf; font-size: .75rem; line-height: 1.45; }
.build-purchase-heading p b { color: #68efb5; }
.queue-inventory-summary { margin: 12px 0; }
.queue-inventory-summary > div { position: relative; padding: 15px 17px 15px 20px; overflow: hidden; border: 1px solid rgba(62, 210, 229, .28); background: linear-gradient(110deg, rgba(62, 210, 229, .1), rgba(10, 17, 27, .96) 55%); }
.queue-inventory-summary > div::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--cyan); }
.queue-inventory-summary span,
.queue-inventory-summary strong { display: block; }
.queue-inventory-summary span { color: var(--cyan); font-size: .64rem; font-weight: 900; text-transform: uppercase; }
.queue-inventory-summary strong { margin-top: 4px; color: #f3f8ff; font-size: .94rem; }
.queue-inventory-summary p { max-width: 900px; margin: 6px 0 0; color: #9fadc0; font-size: .75rem; line-height: 1.5; }
.queue-inventory-summary [data-queue-inventory="swiftplay"] { border-color: rgba(79, 230, 166, .3); background: linear-gradient(110deg, rgba(79, 230, 166, .1), rgba(10, 17, 27, .96) 55%); }
.queue-inventory-summary [data-queue-inventory="swiftplay"]::before { background: #4fe6a6; }
.queue-inventory-summary [data-queue-inventory="swiftplay"] span { color: #68efb5; }
.queue-inventory-summary [hidden] { display: none; }
.build-selling-guide { margin: 12px 0; overflow: hidden; border: 1px solid rgba(62, 210, 229, .26); background: linear-gradient(135deg, rgba(62, 210, 229, .07), rgba(8, 14, 22, .96) 58%); }
.build-selling-guide summary { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 4px 12px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; }
.build-selling-guide summary::-webkit-details-marker { display: none; }
.build-selling-guide summary::after { content: '+'; grid-column: 3; grid-row: 1/3; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(62,210,229,.35); border-radius: 50%; color: var(--cyan); font-size: 1.15rem; font-weight: 900; }
.build-selling-guide[open] summary::after { content: '\2212'; }
.build-selling-guide summary span { color: var(--cyan); font-size: .66rem; font-weight: 900; text-transform: uppercase; }
.build-selling-guide summary strong { color: #f1f7ff; font-size: .92rem; }
.build-selling-guide summary small { grid-column: 2; color: #8e9db1; font-size: .69rem; line-height: 1.4; }
.build-selling-guide-body { padding: 0 16px 16px; border-top: 1px solid rgba(151,171,212,.14); }
.build-selling-guide ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 13px 0 9px; padding: 0; list-style: none; counter-reset: sell-guide; }
.build-selling-guide li { counter-increment: sell-guide; position: relative; min-width: 0; padding: 13px 13px 13px 48px; border: 1px solid rgba(62,210,229,.18); background: rgba(5,12,19,.74); }
.build-selling-guide li::before { content: counter(sell-guide); position: absolute; left: 13px; top: 13px; display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(62,210,229,.42); border-radius: 50%; color: #061117; background: var(--cyan); font-size: .72rem; font-weight: 950; }
.build-selling-guide li b { color: #eef7ff; font-size: .78rem; }
.build-selling-guide li p { margin: 5px 0 0; color: #93a3b7; font-size: .7rem; line-height: 1.5; }
.build-selling-guide li p strong { color: #f0d07c; }
.build-selling-keep { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px; border-left: 3px solid #e0ad43; background: rgba(224,173,67,.06); }
.build-selling-keep > strong { margin-right: 3px; color: #f2d184; font-size: .71rem; text-transform: uppercase; }
.build-selling-keep > span { padding: 4px 8px; border: 1px solid rgba(224,173,67,.24); border-radius: 999px; color: #ebd8aa; font-size: .67rem; font-weight: 800; }
.build-selling-keep > p { flex-basis: 100%; margin: 2px 0 0; color: #9b9a91; font-size: .68rem; line-height: 1.45; }
@media (max-width: 640px) {
  .build-purchase-heading { grid-template-columns: 1fr; gap: 7px; }
  .build-purchase-heading p { min-width: 0; }
  .build-selling-guide ol { grid-template-columns: 1fr; }
  .build-selling-guide summary { grid-template-columns: minmax(0,1fr) auto; }
  .build-selling-guide summary span,.build-selling-guide summary strong,.build-selling-guide summary small { grid-column: 1; }
  .build-selling-guide summary::after { grid-column: 2; grid-row: 1/4; }
}
.build-sequence {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 8px;
  overflow: visible;
  padding: 0;
}
.build-sequence li {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 10px;
  padding: 14px 14px 16px;
  border-color: rgba(151, 171, 212, .18);
}
.build-sequence .build-step-number {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  width: max-content;
  min-width: 42px;
  min-height: 42px;
  margin: 0;
  justify-content: center;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 8px;
  color: #051016;
  background: var(--cyan);
  font-size: 1.16rem;
  font-weight: 950;
  line-height: 1;
}
.build-sequence .build-opening-step .build-step-number { min-width: 78px; font-size: .7rem; text-transform: uppercase; }
.build-sequence img {
  grid-column: 1;
  grid-row: 2;
  width: 48px;
  height: 48px;
}
.build-item-copy { grid-column: 2; grid-row: 2; min-width: 0; }
.build-item-copy small,
.build-item-copy strong,
.build-item-copy em { display: block; }
.build-item-copy small {
  color: #7f8da3;
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
}
.build-item-copy strong {
  margin-top: 3px;
  color: #edf4ff;
  font-size: .88rem;
  line-height: 1.25;
}
.build-item-copy em {
  margin-top: 3px;
  color: var(--gold);
  font-size: .7rem;
  font-style: normal;
  font-weight: 700;
}
.build-item-copy p {
  grid-column: 1/-1;
  margin: 10px 0 0;
  color: #9eacbf;
  font-size: .76rem;
  line-height: 1.45;
}
.build-item-copy p b { color: #c7d4e6; }
.build-tracker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 18px;
  align-items: center;
  margin-bottom: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(151, 171, 212, .18);
  background: #0b111b;
}
.build-tracker > div:first-child span,
.build-tracker > div:first-child strong { display: block; }
.build-tracker > div:first-child span {
  color: #7f8da3;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
}
.build-tracker > div:first-child strong {
  margin-top: 3px;
  color: #edf4ff;
  font-size: .88rem;
}
.build-tracker-actions,
.build-tracker-toggle { display: flex; align-items: center; }
.build-tracker-actions { gap: 8px; }
.build-tracker-toggle {
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(151, 171, 212, .18);
  background: #070c13;
  border-radius: 999px;
}
.build-tracker-toggle button,
.build-reset {
  padding: 8px 10px;
  border: 0;
  color: #91a0b5;
  background: transparent;
  font: inherit;
  font-size: .73rem;
  font-weight: 800;
  cursor: pointer;
  border-radius: 999px;
}
.build-tracker-toggle button[aria-pressed="true"] {
  color: #071117;
  background: var(--cyan);
}
.build-reset { color: #ff9292; }
.build-reset[hidden] { display: none; }
.build-progress-bar {
  grid-column: 1/-1;
  height: 4px;
  overflow: hidden;
  background: rgba(151, 171, 212, .13);
}
.build-progress-bar span {
  display: block;
  width: 0;
  height: 100%;
  background: #4fe6a6;
  transition: width .25s ease;
}
.build-check {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(151, 171, 212, .35);
  color: #071117;
  background: #111a27;
  font-size: .9rem;
  font-weight: 900;
  cursor: pointer;
}
.build-check[hidden] { display: none; }
.build-check[aria-pressed="true"] {
  border-color: #4fe6a6;
  background: #4fe6a6;
}
.build-sequence.is-tracking li { transition: border-color .18s ease, opacity .18s ease; }
.build-sequence.is-tracking li.is-complete { opacity: .58; border-color: rgba(79, 230, 166, .42); }
.build-sequence.is-tracking li.is-next { border-color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(62, 210, 229, .2); }
.build-sequence.is-tracking li.is-next .build-step-number { box-shadow: 0 0 0 2px rgba(62, 210, 229, .22); }
.build-sequence li.build-opening-step { border-color: rgba(79, 230, 166, .34); background: rgba(79, 230, 166, .045); }
.build-sequence li.build-opening-step .build-step-number { background: #4fe6a6; }
.build-sequence li.build-quest-step { border-color: rgba(216, 154, 61, .3); background: rgba(216, 154, 61, .045); }
.build-sequence li.build-quest-step .build-step-number { color: #150e03; background: #e2aa54; }
.matchup-build-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
  gap: 12px;
}
.matchup-core,
.matchup-build-view .matchup-swap {
  padding: 18px;
  border: 1px solid rgba(151, 171, 212, .16);
  background: #0b111b;
}

.matchup-choice-set { min-width: 0; display: grid; gap: 14px; }
.matchup-choice-set > header { padding: 16px 18px; border: 1px solid rgba(93, 220, 226, .28); border-left: 4px solid #5ddce2; background: rgba(8, 21, 31, .78); }
.matchup-choice-set > header span, .matchup-choice-set > header strong, .matchup-choice-set > header p { display: block; min-width: 0; overflow-wrap: anywhere; }
.matchup-choice-set > header span { color: #77e8ed; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.matchup-choice-set > header strong { margin-top: 4px; color: #f1f7fb; font-size: 1.05rem; }
.matchup-choice-set > header p { margin: 5px 0 0; color: #aebdca; line-height: 1.55; }
.matchup-choice-set > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.matchup-choice-set .matchup-swap { min-width: 0; margin: 0; border-color: rgba(165, 123, 255, .3); background: linear-gradient(145deg, rgba(27, 22, 48, .9), rgba(11, 18, 29, .94)); }
.matchup-choice-set .matchup-swap.is-first { border-color: rgba(239, 184, 70, .5); box-shadow: inset 3px 0 0 #efb846; }
.matchup-choice-set .matchup-swap h3, .matchup-choice-set .matchup-swap p, .matchup-choice-set .matchup-swap small { overflow-wrap: anywhere; }
.matchup-choice-set .matchup-swap small { display: block; margin-top: 10px; color: #d8bd78; line-height: 1.45; }
@media (max-width: 760px) { .matchup-choice-set > div { grid-template-columns: 1fr; } }
.matchup-core span,
.matchup-core strong { display: block; }
.matchup-core span {
  color: #7f8da3;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
}
.matchup-core strong {
  margin-top: 8px;
  color: #edf4ff;
  font-size: 1rem;
  line-height: 1.45;
}
.matchup-core p,
.build-more p {
  color: #9eacbf;
  line-height: 1.5;
}
.build-more {
  margin-top: 14px;
  border: 1px solid rgba(151, 171, 212, .16);
  background: #0b111b;
}
.build-more > summary {
  padding: 14px 16px;
  color: #dce7f7;
  font-weight: 800;
  cursor: pointer;
}
.build-more[open] > summary { border-bottom: 1px solid rgba(151, 171, 212, .16); }
.build-more .build-guidance,
.build-more .build-alternatives { margin: 0; padding: 16px; }
.build-more .build-guidance { padding-bottom: 0; }
.alternative-timing {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(151, 171, 212, .12);
  color: #c7d4e6;
  font-size: .75rem;
  line-height: 1.45;
}
.alternative-grid p b { color: #dce7f7; }
.build-problem-helper {
  margin-top: 16px;
  padding: 18px 0 2px;
  border-top: 1px solid rgba(151, 171, 212, .16);
}
.build-problem-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 18px;
  align-items: end;
}
.build-problem-heading h3 { margin: 4px 0 0; color: #f2f6fd; }
.build-problem-heading p { margin: 6px 0 0; color: #9eacbf; line-height: 1.5; }
.build-problem-heading label span {
  display: block;
  margin-bottom: 6px;
  color: #9eacbf;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.build-problem-heading input {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid rgba(151, 171, 212, .25);
  color: #edf4ff;
  background: #090f18;
  font: inherit;
}
.problem-champion-field { min-width: 0; }
.problem-champion-field .champion-menu { z-index: 30; }
.common-problem-shortlist {
  display: grid;
  grid-template-columns: minmax(190px, .42fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(79, 230, 166, .2);
  background: linear-gradient(120deg, rgba(79, 230, 166, .07), rgba(13, 20, 31, .72) 42%);
}
.common-problem-shortlist > div:first-child > span,
.common-problem-shortlist > div:first-child > strong { display: block; }
.common-problem-shortlist > div:first-child > span {
  color: #4fe6a6;
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}
.common-problem-shortlist > div:first-child > strong { margin-top: 4px; color: #f1f6ff; line-height: 1.25; }
.common-problem-shortlist > div:first-child > p { margin: 7px 0 0; color: #95a5ba; font-size: .76rem; line-height: 1.45; }
.common-problem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.common-problem-grid button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 68px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(151, 171, 212, .2);
  color: #dfe9f7;
  background: #090f18;
  text-align: left;
  cursor: pointer;
}
.common-problem-grid button:hover,
.common-problem-grid button:focus-visible { border-color: #4fe6a6; background: #0d1920; }
.common-problem-grid button[aria-pressed="true"] { border-color: #4fe6a6; box-shadow: inset 3px 0 #4fe6a6; }
.common-problem-grid img { width: 42px; height: 42px; border-radius: 4px; object-fit: cover; }
.common-problem-grid span,
.common-problem-grid small,
.common-problem-grid strong,
.common-problem-grid em { display: block; min-width: 0; }
.common-problem-grid small { color: #4fe6a6; font-size: .62rem; font-style: normal; font-weight: 850; text-transform: uppercase; }
.common-problem-grid strong { margin-top: 1px; overflow: hidden; color: #f2f6fd; text-overflow: ellipsis; white-space: nowrap; }
.common-problem-grid em { margin-top: 3px; overflow: hidden; color: #8fa0b7; font-size: .68rem; font-style: normal; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.build-problem-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
@media (max-width: 760px) {
  .common-problem-shortlist { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .common-problem-grid { grid-template-columns: 1fr; }
}

/* Visible saved build changes and two-problem match planning */
.build-active-swaps[hidden] { display: none; }
.build-active-swaps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 18px;
  margin: 14px 0;
  padding: 16px;
  border: 1px solid rgba(245, 181, 74, .62);
  border-left: 5px solid #f5b54a;
  border-radius: 7px;
  background: linear-gradient(125deg, rgba(67, 42, 8, .74), rgba(13, 21, 31, .96) 56%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 225, 162, .08);
}
.build-active-swaps-heading > span,
.build-active-swaps-heading > strong { display: block; }
.build-active-swaps-heading > span { color: #ffc767; font-size: .66rem; font-weight: 950; text-transform: uppercase; }
.build-active-swaps-heading > strong { margin-top: 3px; color: #fff3d5; font-size: 1rem; }
.build-active-swaps-heading > p { margin: 5px 0 0; color: #c9baa0; font-size: .76rem; line-height: 1.48; }
.build-active-swaps > button,
.build-active-swap-list button {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 202, 111, .48);
  border-radius: 999px;
  color: #fff0cf;
  background: rgba(98, 59, 8, .58);
  font: inherit;
  font-size: .7rem;
  font-weight: 900;
  cursor: pointer;
}
.build-active-swaps > button:is(:hover, :focus-visible),
.build-active-swap-list button:is(:hover, :focus-visible) { outline: 0; border-color: #ffd27f; background: rgba(139, 84, 10, .72); }
.build-active-swap-list { grid-column: 1 / -1; display: grid; gap: 8px; }
.build-active-swap-list article {
  display: grid;
  grid-template-columns: auto minmax(130px, 1fr) auto minmax(150px, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 6px;
  background: rgba(4, 10, 17, .7);
}
.build-active-swap-list article > span { padding: 5px 8px; border-radius: 999px; color: #10151a; background: #ffc767; font-size: .64rem; font-weight: 950; }
.build-active-swap-list article div small { display: block; color: #8798ab; font-size: .6rem; font-weight: 850; text-transform: uppercase; }
.build-active-swap-list article s { color: #dba4a8; text-decoration-thickness: 2px; }
.build-active-swap-list article > b { color: #70dbe7; font-size: 1.25rem; }
.build-active-swap-list article strong { color: #aef3d0; }
.build-sequence > li.is-custom-replacement {
  border-color: rgba(245, 181, 74, .68);
  background: linear-gradient(120deg, rgba(76, 45, 8, .32), rgba(13, 22, 33, .98) 48%);
  box-shadow: inset 5px 0 #f5b54a, 0 12px 28px rgba(0, 0, 0, .16);
}
.custom-swap-label { display: inline-flex !important; width: fit-content; padding: 4px 8px; border-radius: 999px; color: #2b1900 !important; background: #ffc767; font-weight: 950 !important; text-transform: uppercase; }
.build-problem-choice-head { display: flex; gap: 12px; align-items: end; justify-content: space-between; margin-top: 16px; }
.build-problem-choice-head span,
.build-problem-choice-head strong { display: block; }
.build-problem-choice-head span { color: #65dce8; font-size: .64rem; font-weight: 900; text-transform: uppercase; }
.build-problem-choice-head strong { margin-top: 2px; color: #f0f5fb; font-size: .88rem; }
.build-problem-choice-head > b { padding: 6px 9px; border: 1px solid rgba(101, 220, 232, .3); border-radius: 999px; color: #bdeff4; background: rgba(48, 180, 196, .09); font-size: .66rem; }
.build-problem-coverage { margin: 10px 0 14px; border: 1px solid rgba(151, 171, 212, .16); border-radius: 6px; background: rgba(7, 13, 21, .58); }
.build-problem-coverage summary { padding: 10px 12px; color: #c8d5e7; font-size: .72rem; font-weight: 850; cursor: pointer; }
.build-problem-coverage > div { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; }
.build-problem-coverage > div span { padding: 5px 8px; border: 1px solid rgba(151, 171, 212, .2); border-radius: 999px; color: #aebed2; background: rgba(151, 171, 212, .06); font-size: .63rem; font-weight: 800; }
.build-problem-coverage > p { margin: 0; padding: 0 12px 12px; color: #8393a7; font-size: .68rem; line-height: 1.45; }
.build-problem-result:not([hidden]) + .build-problem-result:not([hidden]) { margin-top: 10px; }

@media (max-width: 700px) {
  .build-active-swaps { grid-template-columns: 1fr; }
  .build-active-swaps > button { width: 100%; }
  .build-active-swap-list { grid-column: 1; }
  .build-active-swap-list article { grid-template-columns: 1fr auto 1fr; }
  .build-active-swap-list article > span { grid-column: 1 / -1; width: fit-content; }
  .build-active-swap-list article button { grid-column: 1 / -1; width: 100%; }
}
.build-problem-buttons button {
  padding: 9px 12px;
  border: 1px solid rgba(151, 171, 212, .22);
  color: #b9c7da;
  background: #0b111b;
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
  border-radius: 999px;
}
.build-problem-buttons button[aria-pressed="true"] {
  border-color: var(--cyan);
  color: #071117;
  background: var(--cyan);
}
.build-problem-buttons button.suggested:not([aria-pressed="true"]) {
  border-color: #d89a3d;
  color: #f2d397;
  background: rgba(216, 154, 61, .09);
}
.build-problem-buttons button.suggested::after {
  content: "Check first";
  margin-left: 7px;
  padding-left: 7px;
  border-left: 1px solid currentColor;
  font-size: .61rem;
  font-weight: 900;
  text-transform: uppercase;
}
.build-problem-feedback { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin: 10px 0; }
.build-problem-status { margin: 0; color: #8291a7; font-size: .78rem; line-height: 1.45; }
.build-problem-feedback button {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(151, 171, 212, .25);
  border-radius: 999px;
  color: #aebdd1;
  background: #0b111b;
  font: inherit;
  font-size: .68rem;
  font-weight: 850;
  cursor: pointer;
}
.build-problem-feedback button:hover,
.build-problem-feedback button:focus-visible { border-color: #d89a3d; color: #f2d397; }
@media (max-width: 480px) {
  .build-problem-feedback { align-items: flex-start; flex-direction: column; }
}
.build-problem-result[hidden] { display: none; }
.build-problem-result {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 15px;
  border-left: 3px solid #4fe6a6;
  background: #0b111b;
}
.build-problem-result img { border: 1px solid rgba(255, 255, 255, .16); }
.build-problem-result span { color: #8291a7; font-size: .72rem; }
.build-problem-result h4 { margin: 3px 0; color: #f1f6ff; font-size: 1rem; }
.build-problem-result strong { color: #4fe6a6; font-size: .76rem; }
.build-problem-result p { margin: 5px 0 0; color: #aebbd0; line-height: 1.48; }
.build-problem-result .build-problem-warning {
  margin-top: 10px;
  padding: 9px 11px;
  border-left: 3px solid #d89a3d;
  color: #c7b891;
  background: rgba(216, 154, 61, .08);
  font-size: .76rem;
}
.build-problem-warning b { color: #f3d596; }
.add-counter-item {
  margin-top: 11px;
  padding: 9px 12px;
  border: 1px solid var(--cyan);
  color: #061117;
  background: var(--cyan);
  font: inherit;
  font-size: .76rem;
  font-weight: 850;
  cursor: pointer;
  border-radius: 999px;
}
.add-counter-item[disabled] {
  border-color: rgba(151, 171, 212, .25);
  color: #8291a7;
  background: #111923;
  cursor: default;
}
.build-counter-tray[hidden] { display: none; }
.build-counter-tray {
  display: grid;
  grid-template-columns: minmax(190px, .4fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(216, 154, 61, .3);
  background: rgba(216, 154, 61, .055);
}
.build-counter-tray > div:first-child span,
.build-counter-tray > div:first-child strong { display: block; }
.build-counter-tray > div:first-child span {
  color: #d89a3d;
  font-size: .68rem;
  font-weight: 850;
  text-transform: uppercase;
}
.build-counter-tray > div:first-child strong { margin-top: 3px; color: #f3f6fb; }
.build-counter-tray > div:first-child p { margin: 5px 0 0; color: #9eacbf; font-size: .76rem; line-height: 1.45; }
.build-counter-list { display: grid; gap: 8px; }
.build-counter-step {
  display: grid;
  grid-template-columns: auto 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(216, 154, 61, .38);
  background: #0b111b;
}
.build-counter-step .build-step-number {
  display: inline-flex;
  padding: 5px 8px;
  color: #11100b;
  background: #d89a3d;
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}
.build-counter-step > img { width: 42px; height: 42px; }
.build-counter-step .build-item-copy { grid-column: 3; grid-row: 1; }
.build-counter-step .build-item-copy p { margin-top: 4px; }
.build-counter-step .build-check { grid-column: 4; grid-row: 1; }
.build-counter-remove {
  grid-column: 3;
  justify-self: start;
  padding: 5px 9px;
  border: 1px solid rgba(255, 157, 157, .32);
  border-radius: 999px;
  color: #ff9d9d;
  background: transparent;
  font: inherit;
  font-size: .7rem;
  font-weight: 800;
  cursor: pointer;
}
.counter-main {
  width: min(1180px, calc(100% - 32px));
  margin: 28px auto 72px;
}
.counter-hero {
  position: relative;
  min-height: clamp(380px, 42vw, 500px);
  overflow: hidden;
  border: 1px solid rgba(151, 171, 212, .16);
  background: #080d14;
}
.counter-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.counter-hero .hero-shade { position: absolute; z-index: 0; inset: 0; background: linear-gradient(0deg, rgba(4, 8, 13, .995) 0%, rgba(4, 8, 13, .96) 23%, rgba(4, 8, 13, .58) 43%, rgba(4, 8, 13, .08) 67%), linear-gradient(90deg, rgba(4, 8, 13, .3), transparent 45%, rgba(4, 8, 13, .12)); }
.counter-hero .hero-copy { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; width: 100%; padding: 24px clamp(22px, 4vw, 48px) 42px; }
.counter-hero h1 { max-width: 980px; margin: 5px 0 8px; color: #f7fbff; font-size: clamp(2.15rem, 4vw, 3.5rem); line-height: 1.04; text-shadow: 0 2px 18px rgba(0, 0, 0, .8); }
.counter-hero p { max-width: 720px; margin: 0; color: #d4dee8; line-height: 1.5; text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }
.counter-picker {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(150px, .34fr) auto;
  gap: 12px;
  align-items: end;
  margin: -24px 22px 0;
  padding: 16px;
  border: 1px solid rgba(151, 171, 212, .2);
  background: #0a1019;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
}
.counter-role > span { display: block; margin-bottom: 7px; color: #dce6f4; font-size: .76rem; font-weight: 850; }
.counter-role select {
  width: 100%; min-height: 52px; padding: 0 12px; border: 1px solid rgba(151, 171, 212, .25); color: #eef4fc; background: #070c13; font: inherit;
}
.counter-picker > button,
.counter-guide-link,
.counter-empty a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid var(--cyan);
  border-radius: 999px;
  color: #061117;
  background: var(--cyan);
  font: inherit;
  font-size: .8rem;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}
.counter-picker-status { grid-column: 1/-1; margin: -3px 0 0; color: #8291a7; font-size: .74rem; }
.counter-results { margin-top: 34px; }
.counter-method { margin: 0 0 16px; padding: 12px 14px; border-left: 3px solid #d89a3d; color: #aebbd0; background: rgba(216, 154, 61, .065); line-height: 1.5; }
.counter-method strong { color: #f1d495; }
.counter-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.counter-scope a { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid rgba(151, 171, 212, .18); color: #dbe6ee; background: #0a1119; text-decoration: none; }
.counter-scope a:hover { border-color: rgba(57, 200, 212, .5); }
.counter-scope a[aria-current="page"] { border-color: var(--cyan); box-shadow: inset 3px 0 var(--cyan); background: rgba(57, 200, 212, .07); }
.counter-scope strong { font-size: .78rem; }
.counter-scope span { color: #8295a6; font-size: .65rem; }
.counter-lane-warning { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 14px 0; padding: 15px; border: 1px solid rgba(229, 168, 62, .35); border-left: 4px solid #e5a83e; background: rgba(229, 168, 62, .07); }
.counter-lane-warning span,
.counter-lane-warning strong { display: block; }
.counter-lane-warning span { color: #e7b65f; font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.counter-lane-warning strong { margin-top: 3px; color: #f3e3bd; }
.counter-lane-warning p { margin: 5px 0 0; color: #aeb9c4; font-size: .72rem; line-height: 1.45; }
.counter-lane-warning > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.counter-lane-warning a { padding: 8px 12px; border: 1px solid var(--cyan); border-radius: 999px; color: #061117; background: var(--cyan); font-size: .68rem; font-weight: 900; text-decoration: none; white-space: nowrap; }
.counter-lane-warning a.secondary { border-color: rgba(151, 171, 212, .3); color: #dbe6ee; background: #111a24; }
.counter-lane-warning p a.policy-link {
  display: inline;
  padding: 0;
  border: 0;
  color: #e7b65f;
  background: transparent;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: normal;
}
.role-choice-policy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px 14px;
  align-items: center;
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid rgba(229, 168, 62, .32);
  border-left: 4px solid #e5a83e;
  background: rgba(229, 168, 62, .06);
}
.role-choice-policy strong { color: #f3e3bd; }
.role-choice-policy span { color: #aeb9c4; font-size: .74rem; line-height: 1.5; }
.role-choice-policy a,
.role-policy-reference a { color: #e7b65f; font-weight: 900; text-underline-offset: 3px; }
.role-policy-reference {
  margin: 12px 0 0;
  padding: 11px 12px;
  border-left: 3px solid #e5a83e;
  color: #b9c5cf;
  background: rgba(229, 168, 62, .07);
  font-size: .78rem;
  line-height: 1.5;
}
.role-policy-reference strong { color: #f3e3bd; }
@media (max-width: 760px) {
  .role-choice-policy { grid-template-columns: 1fr; }
}

/* Off-meta conduct reference */
.off-meta-page main { width: min(1160px, calc(100% - 32px)); }
.conduct-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 1px;
  overflow: hidden;
  margin-bottom: 22px;
  border: 1px solid rgba(145, 167, 194, .22);
  border-top: 3px solid #4ad3de;
  background: rgba(145, 167, 194, .16);
}
.conduct-hero > div {
  min-width: 0;
  padding: 38px;
  background: linear-gradient(140deg, #0b1c26, #101321 70%);
}
.conduct-hero h1 {
  max-width: 760px;
  margin: 5px 0 12px;
  color: #f5fbff;
  font-size: clamp(2.3rem, 5vw, 4.5rem);
  line-height: 1.02;
}
.conduct-hero > div > p:not(.eyebrow) {
  max-width: 720px;
  margin: 0;
  color: #b4c5d2;
  font-size: 1rem;
  line-height: 1.65;
}
.conduct-hero > aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 30px;
  border-left: 4px solid #e6b850;
  background: #18170f;
}
.conduct-hero > aside span {
  color: #e6b850;
  font-size: .68rem;
  font-weight: 950;
  text-transform: uppercase;
}
.conduct-hero > aside strong {
  margin-top: 9px;
  color: #fff2c8;
  font-size: 1.35rem;
  line-height: 1.25;
}
.conduct-hero > aside p {
  margin: 12px 0 0;
  color: #c2bda9;
  font-size: .82rem;
  line-height: 1.6;
}
.conduct-share {
  max-width: 650px;
  margin-top: 24px;
  padding: 14px;
  border: 1px solid rgba(74, 211, 222, .28);
  background: #08131c;
}
.conduct-share label {
  display: block;
  margin-bottom: 7px;
  color: #76e5ed;
  font-size: .68rem;
  font-weight: 950;
  text-transform: uppercase;
}
.conduct-share > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}
.conduct-share input {
  min-width: 0;
  height: 43px;
  padding: 0 12px;
  border: 1px solid #344a5b;
  border-right: 0;
  border-radius: 4px 0 0 4px;
  color: #edfaff;
  background: #0c1721;
  font: 750 .82rem/1.2 inherit;
}
.conduct-share button {
  min-height: 43px;
  padding: 0 16px;
  border: 1px solid #4ad3de;
  border-radius: 0 4px 4px 0;
  color: #061115;
  background: #4ad3de;
  font-weight: 950;
  cursor: pointer;
}
.conduct-share small {
  display: block;
  margin-top: 7px;
  color: #8499a9;
  font-size: .68rem;
}
.conduct-proof,
.conduct-boundary,
.conduct-response {
  margin: 22px 0;
  padding: 28px;
  border: 1px solid rgba(145, 167, 194, .2);
  background: #0a121b;
}
.conduct-proof > header,
.conduct-boundary > header {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(280px, .45fr);
  gap: 22px;
  align-items: end;
  margin-bottom: 20px;
}
.conduct-proof > header .eyebrow,
.conduct-boundary > header .eyebrow { grid-column: 1; margin: 0; }
.conduct-proof > header h2,
.conduct-boundary > header h2 {
  grid-column: 1;
  margin: 2px 0 0;
  color: #f3f8fb;
  font-size: clamp(1.7rem, 3vw, 2.45rem);
}
.conduct-proof > header > p {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  color: #9badba;
  font-size: .82rem;
  line-height: 1.6;
}
.conduct-proof > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.conduct-proof article {
  position: relative;
  min-width: 0;
  padding: 22px;
  border: 1px solid #293846;
  border-top: 3px solid #8b70d7;
  background: #101822;
}
.conduct-proof article.is-primary { border-top-color: #48d1dc; }
.conduct-proof article > .league-step-number {
  position: absolute;
  top: 16px;
  right: 16px;
}
.conduct-proof article > small {
  display: block;
  padding-right: 45px;
  color: #8299aa;
  font-size: .65rem;
  font-weight: 900;
  text-transform: uppercase;
}
.conduct-proof h3 {
  margin: 10px 0;
  color: #eef7fc;
  font-size: 1.05rem;
  line-height: 1.35;
}
.conduct-proof blockquote {
  margin: 14px 0;
  padding: 13px 14px;
  border-left: 3px solid #e5b84f;
  color: #fff0bd;
  background: #1c190f;
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.55;
}
.conduct-proof article p {
  min-height: 78px;
  margin: 0 0 16px;
  color: #a9b8c4;
  font-size: .78rem;
  line-height: 1.55;
}
.conduct-proof article a,
.conduct-boundary > aside a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(74, 211, 222, .42);
  border-radius: 4px;
  color: #bdf9fd;
  background: rgba(74, 211, 222, .08);
  font-size: .72rem;
  font-weight: 900;
  text-decoration: none;
}
.conduct-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.conduct-compare article {
  padding: 22px;
  border: 1px solid #314251;
  border-left: 4px solid #47ca94;
  background: #0d1a19;
}
.conduct-compare article.is-not-okay {
  border-left-color: #ed6f7e;
  background: #1c1116;
}
.conduct-compare span {
  color: #66dca9;
  font-size: .68rem;
  font-weight: 950;
  text-transform: uppercase;
}
.conduct-compare .is-not-okay span { color: #ff8997; }
.conduct-compare h3 {
  margin: 7px 0 12px;
  color: #eef8f4;
  font-size: 1.15rem;
}
.conduct-compare ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.conduct-compare li {
  position: relative;
  padding-left: 21px;
  color: #afbeb9;
  font-size: .8rem;
  line-height: 1.5;
}
.conduct-compare li::before {
  position: absolute;
  left: 0;
  color: #59d9a0;
  content: "\2713";
  font-weight: 950;
}
.conduct-compare .is-not-okay li::before { color: #ff7f90; content: "\00d7"; }
.conduct-boundary > aside {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: center;
  margin-top: 12px;
  padding: 15px 17px;
  border: 1px solid rgba(229, 184, 79, .25);
  border-left: 4px solid #e5b84f;
  background: #18170f;
}
.conduct-boundary > aside strong { color: #ffe8a7; }
.conduct-boundary > aside p { margin: 0; color: #bdb9a9; font-size: .75rem; line-height: 1.5; }
.conduct-response {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(360px, 1.15fr);
  gap: 30px;
  align-items: center;
  border-top: 3px solid #9a78e2;
  background: #11101c;
}
.conduct-response h2 { margin: 5px 0 9px; color: #f4f0ff; font-size: 1.65rem; }
.conduct-response p:not(.eyebrow) { margin: 0; color: #aaa7ba; font-size: .8rem; line-height: 1.55; }
.conduct-response blockquote {
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(154, 120, 226, .35);
  border-left: 4px solid #9a78e2;
  color: #e7dcff;
  background: #171426;
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.6;
}
@media (max-width: 900px) {
  .conduct-hero,
  .conduct-proof > div,
  .conduct-response { grid-template-columns: 1fr; }
  .conduct-hero > aside { border-top: 1px solid rgba(229, 184, 79, .2); border-left-width: 4px; }
  .conduct-proof > header,
  .conduct-boundary > header { display: block; }
  .conduct-proof > header > p { margin-top: 10px; }
  .conduct-boundary > aside { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .off-meta-page main { width: min(100% - 20px, 1160px); }
  .conduct-hero > div,
  .conduct-hero > aside,
  .conduct-proof,
  .conduct-boundary,
  .conduct-response { padding: 20px; }
  .conduct-share > div,
  .conduct-compare { grid-template-columns: 1fr; }
  .conduct-share input { border-right: 1px solid #344a5b; border-radius: 4px 4px 0 0; }
  .conduct-share button { border-radius: 0 0 4px 4px; }
  .conduct-proof article p { min-height: 0; }
}

/* Off-meta policy reference v2 */
.off-meta-page {
  --conduct-cyan: #55e6ef;
  --conduct-purple: #b988ff;
  --conduct-gold: #f3c95f;
  --conduct-green: #62e0a6;
  --conduct-red: #ff7188;
}
.off-meta-page main {
  width: min(1240px, calc(100% - 32px));
}
.off-meta-page .league-breadcrumbs {
  margin-bottom: 12px;
}
.conduct-hero {
  position: relative;
  display: block;
  min-height: 560px;
  margin-bottom: 0;
  overflow: hidden;
  border: 1px solid rgba(112, 207, 232, .3);
  border-top: 0;
  background:
    linear-gradient(90deg, rgba(4, 10, 19, .98) 0%, rgba(6, 13, 24, .94) 42%, rgba(10, 15, 29, .35) 72%, rgba(8, 12, 23, .15) 100%),
    url("/league/assets/vex-social-20260718.jpg") 67% center / cover no-repeat;
}
.conduct-hero::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #080e17 100%),
    linear-gradient(90deg, rgba(85, 230, 239, .1), transparent 42%, rgba(185, 136, 255, .1));
  content: "";
}
.conduct-hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(700px, 66%);
  min-height: 405px;
  padding: 50px 46px 38px;
}
.conduct-hero-copy .eyebrow {
  color: var(--conduct-cyan);
}
.conduct-hero h1 {
  max-width: 690px;
  margin: 8px 0 16px;
  color: #fff;
  font-size: 4rem;
  line-height: 1;
  text-wrap: balance;
  text-shadow: 0 2px 28px rgba(0, 0, 0, .75);
}
.conduct-lead {
  max-width: 630px;
  margin: 0;
  color: #d8e7ef;
  font-size: 1.18rem;
  line-height: 1.65;
}
.conduct-lead strong {
  color: #fff1b7;
}
.conduct-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
}
.conduct-hero-actions a,
.conduct-hero-actions button,
.conduct-reply button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid var(--conduct-cyan);
  border-radius: 6px;
  color: #041115;
  background: var(--conduct-cyan);
  font: 900 .84rem/1.2 inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.conduct-hero-actions button {
  color: #f1eaff;
  border-color: rgba(185, 136, 255, .7);
  background: rgba(96, 62, 150, .78);
}
.conduct-hero-actions a:hover,
.conduct-hero-actions button:hover,
.conduct-reply button:hover {
  transform: translateY(-2px);
}
.conduct-hero-copy > small {
  margin-top: 10px;
  color: #9eb2c0;
  font-size: .76rem;
}
.conduct-verdict {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 22px 22px;
  border: 1px solid rgba(139, 174, 196, .24);
  background: rgba(139, 174, 196, .18);
  box-shadow: 0 22px 40px rgba(0, 0, 0, .28);
}
.conduct-verdict article {
  min-width: 0;
  padding: 19px 21px;
  background: rgba(6, 14, 24, .94);
}
.conduct-verdict article:nth-child(1) { border-top: 3px solid var(--conduct-cyan); }
.conduct-verdict article:nth-child(2) { border-top: 3px solid var(--conduct-gold); }
.conduct-verdict article:nth-child(3) { border-top: 3px solid var(--conduct-red); }
.conduct-verdict span {
  display: block;
  margin-bottom: 5px;
  color: #87a0b0;
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
}
.conduct-verdict strong {
  display: block;
  color: #f4f9fc;
  font-size: 1.03rem;
  line-height: 1.3;
}
.conduct-verdict p {
  margin: 7px 0 0;
  color: #aebfca;
  font-size: .79rem;
  line-height: 1.5;
}
.conduct-jump {
  display: grid;
  gap: 14px;
  margin-bottom: 24px;
  padding: 18px;
  border: 1px solid rgba(112, 151, 177, .22);
  border-top: 0;
  background: #070d17;
}
.conduct-jump > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: baseline;
}
.conduct-jump > header span {
  color: #7f95a4;
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
}
.conduct-jump > header strong {
  color: #eefaff;
  font-size: 1rem;
}
.conduct-jump > header small {
  color: #8196a5;
  font-size: .72rem;
}
.conduct-jump-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.conduct-jump-grid a {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-width: 0;
  min-height: 68px;
  padding: 10px 12px;
  border: 1px solid rgba(85, 230, 239, .25);
  border-radius: 5px;
  color: #b9f7fa;
  background: rgba(85, 230, 239, .07);
  text-decoration: none;
}
.conduct-jump-grid a:hover,
.conduct-jump-grid a:focus-visible,
.conduct-jump-grid a[aria-current="location"] {
  border-color: rgba(85, 230, 239, .68);
  background: rgba(85, 230, 239, .13);
}
.conduct-jump-grid a > b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(85, 230, 239, .4);
  color: #55e6ef;
  background: #091722;
  font-size: .7rem;
}
.conduct-jump-grid a > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.conduct-jump-grid a strong {
  overflow-wrap: anywhere;
  color: #dffcff;
  font-size: .82rem;
  line-height: 1.25;
}
.conduct-jump-grid a small {
  overflow-wrap: anywhere;
  color: #859ba9;
  font-size: .7rem;
  line-height: 1.25;
}
.conduct-jump-grid a:nth-child(1),
.conduct-jump-grid a:nth-child(2),
.conduct-jump-grid a:nth-child(3) { border-top-color: rgba(239, 193, 85, .72); }
.conduct-jump-grid a:nth-child(4),
.conduct-jump-grid a:nth-child(5),
.conduct-jump-grid a:nth-child(6) { border-top-color: rgba(160, 105, 245, .76); }
.conduct-jump-grid a:nth-child(n+7) { border-top-color: rgba(245, 100, 150, .68); }
.conduct-jump-grid a[aria-current="location"] {
  box-shadow: inset 3px 0 0 #55e6ef, 0 8px 24px rgba(0, 0, 0, .2);
}
.accounts-jump .conduct-jump-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.accounts-jump .conduct-jump-grid a {
  min-height: 76px;
}
.accounts-jump .conduct-jump-grid a:nth-child(1),
.accounts-jump .conduct-jump-grid a:nth-child(5) {
  border-top-color: rgba(85, 230, 239, .76);
}
.accounts-jump .conduct-jump-grid a:nth-child(2),
.accounts-jump .conduct-jump-grid a:nth-child(6) {
  border-top-color: rgba(239, 193, 85, .78);
}
.accounts-jump .conduct-jump-grid a:nth-child(3),
.accounts-jump .conduct-jump-grid a:nth-child(7) {
  border-top-color: rgba(160, 105, 245, .8);
}
.accounts-jump .conduct-jump-grid a:nth-child(4),
.accounts-jump .conduct-jump-grid a:nth-child(8) {
  border-top-color: rgba(245, 100, 150, .74);
}
.conduct-menu-return {
  position: fixed;
  z-index: 55;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(85, 230, 239, .5);
  border-radius: 999px;
  color: #e7fdff;
  background: rgba(7, 18, 28, .96);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .42);
  font-size: .76rem;
  font-weight: 900;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease;
}
.conduct-menu-return.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.conduct-menu-return:hover,
.conduct-menu-return:focus-visible {
  border-color: #55e6ef;
  background: #0d2634;
}
.off-meta-page [id] { scroll-margin-top: 86px; }
@media (max-width: 900px) {
  .conduct-jump-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accounts-jump .conduct-jump-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .conduct-jump { padding: 14px; }
  .conduct-jump > header { grid-template-columns: 1fr; gap: 3px; }
  .conduct-jump-grid { grid-template-columns: 1fr; }
  .accounts-jump .conduct-jump-grid { grid-template-columns: 1fr; }
  .conduct-jump-grid a { min-height: 62px; }
  .conduct-menu-return { right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .conduct-menu-return { transition: none; }
}
.conduct-proof,
.conduct-boundary,
.conduct-response,
.conduct-faq {
  margin: 26px 0;
  padding: 34px;
  border: 1px solid rgba(139, 174, 196, .2);
  background: #09111b;
}
.conduct-proof {
  border-top: 4px solid var(--conduct-cyan);
  background:
    linear-gradient(115deg, rgba(85, 230, 239, .06), transparent 34%),
    #09111b;
}
.conduct-proof > header,
.conduct-boundary > header,
.conduct-faq > header {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(280px, .4fr);
  gap: 24px;
  align-items: end;
  margin-bottom: 24px;
}
.conduct-proof > header .eyebrow,
.conduct-boundary > header .eyebrow,
.conduct-faq > header .eyebrow {
  grid-column: 1;
  margin: 0;
}
.conduct-proof > header h2,
.conduct-boundary > header h2,
.conduct-faq > header h2 {
  grid-column: 1;
  margin: 4px 0 0;
  color: #f6fbff;
  font-size: 2.35rem;
  line-height: 1.12;
  text-wrap: balance;
}
.conduct-proof > header > p,
.conduct-boundary > header > p {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  color: #a8bac7;
  font-size: .9rem;
  line-height: 1.65;
}
.conduct-proof > div {
  gap: 14px;
}
.conduct-proof article {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid #304152;
  border-top: 4px solid var(--conduct-purple);
  background:
    linear-gradient(145deg, rgba(185, 136, 255, .07), transparent 42%),
    #0e1824;
}
.conduct-proof article.is-primary {
  border-top-color: var(--conduct-cyan);
}
.conduct-proof article:nth-child(3) {
  border-top-color: var(--conduct-gold);
}
.conduct-proof article > small {
  color: #91a9b9;
  font-size: .72rem;
}
.conduct-proof h3 {
  margin: 12px 0 4px;
  color: #f4f9fc;
  font-size: 1.18rem;
}
.conduct-proof blockquote {
  margin: 15px 0;
  padding: 16px;
  border: 1px solid rgba(243, 201, 95, .22);
  border-left: 4px solid var(--conduct-gold);
  color: #fff0bb;
  background: rgba(52, 41, 14, .58);
  font-size: .96rem;
  line-height: 1.55;
}
.conduct-proof article p {
  min-height: 0;
  margin: 0 0 19px;
  color: #b5c3cd;
  font-size: .85rem;
  line-height: 1.62;
}
.conduct-proof article p strong {
  color: #e8f6fd;
}
.conduct-proof article a {
  margin-top: auto;
  font-size: .78rem;
}
.conduct-boundary {
  border-top: 4px solid var(--conduct-purple);
  background:
    linear-gradient(120deg, rgba(185, 136, 255, .06), transparent 32%),
    #0c101b;
}
.conduct-compare {
  gap: 14px;
}
.conduct-compare article {
  padding: 25px;
  border: 1px solid rgba(98, 224, 166, .3);
  border-left: 5px solid var(--conduct-green);
  background: #0b1a18;
}
.conduct-compare article.is-not-okay {
  border-color: rgba(255, 113, 136, .3);
  border-left-color: var(--conduct-red);
  background: #1b1017;
}
.conduct-compare span {
  color: var(--conduct-green);
  font-size: .72rem;
}
.conduct-compare .is-not-okay span {
  color: #ff91a3;
}
.conduct-compare h3 {
  margin: 8px 0 16px;
  font-size: 1.3rem;
}
.conduct-compare ul {
  gap: 11px;
}
.conduct-compare li {
  padding-left: 25px;
  color: #bdcbc6;
  font-size: .88rem;
}
.conduct-boundary > aside {
  grid-template-columns: minmax(220px, auto) minmax(0, 1fr) auto;
  margin-top: 15px;
  padding: 18px 20px;
  border: 1px solid rgba(243, 201, 95, .3);
  border-left: 5px solid var(--conduct-gold);
  background: #1c190f;
}
.conduct-boundary > aside strong {
  color: #ffedae;
  font-size: .92rem;
}
.conduct-boundary > aside p {
  color: #c7c1a9;
  font-size: .81rem;
}
.conduct-response {
  grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr);
  gap: 32px;
  border-top: 4px solid var(--conduct-gold);
  background:
    linear-gradient(120deg, rgba(243, 201, 95, .08), transparent 35%),
    #11101b;
}
.conduct-response h2 {
  font-size: 2rem;
  line-height: 1.18;
}
.conduct-response p:not(.eyebrow) {
  color: #bbb9c8;
  font-size: .89rem;
  line-height: 1.65;
}
.conduct-reply {
  padding: 21px;
  border: 1px solid rgba(185, 136, 255, .38);
  border-left: 5px solid var(--conduct-purple);
  background: #181427;
}
.conduct-reply > span {
  color: #c9a9ff;
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
}
.conduct-reply blockquote {
  margin: 10px 0 16px;
  padding: 0;
  border: 0;
  color: #eee7ff;
  background: transparent;
  font-size: .94rem;
  line-height: 1.62;
}
.conduct-reply button {
  min-height: 40px;
  padding: 8px 14px;
  border-color: var(--conduct-purple);
  color: #170c26;
  background: #c7a4ff;
}
.conduct-reply small {
  margin-left: 10px;
  color: #9a8fad;
  font-size: .7rem;
}
.conduct-faq {
  border-top: 4px solid var(--conduct-green);
  background:
    linear-gradient(115deg, rgba(98, 224, 166, .06), transparent 30%),
    #09131a;
}
.conduct-faq > div {
  display: grid;
  gap: 9px;
}
.conduct-faq details {
  border: 1px solid rgba(125, 160, 178, .22);
  border-left: 4px solid rgba(85, 230, 239, .58);
  background: #0c1720;
}
.conduct-faq summary {
  position: relative;
  padding: 17px 48px 17px 18px;
  color: #eef8fc;
  font-size: .94rem;
  font-weight: 850;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.conduct-faq summary::-webkit-details-marker {
  display: none;
}
.conduct-faq summary::after {
  position: absolute;
  top: 50%;
  right: 18px;
  color: var(--conduct-cyan);
  content: "+";
  font-size: 1.35rem;
  transform: translateY(-50%);
}
.conduct-faq details[open] summary::after {
  content: "\2212";
}
.conduct-faq details p {
  margin: 0;
  padding: 0 18px 18px;
  color: #aebfc9;
  font-size: .86rem;
  line-height: 1.65;
}
@media (max-width: 900px) {
  .conduct-hero {
    min-height: 0;
    background:
      linear-gradient(180deg, rgba(5, 11, 20, .22), rgba(5, 11, 20, .9) 40%, #07101a 67%),
      url("/league/assets/vex-social-20260718.jpg") 67% top / auto 390px no-repeat,
      #07101a;
  }
  .conduct-hero-copy {
    width: auto;
    min-height: 470px;
    justify-content: flex-end;
    padding: 210px 28px 30px;
  }
  .conduct-hero h1 {
    font-size: 3.15rem;
  }
  .conduct-verdict {
    grid-template-columns: 1fr;
    margin: 0 16px 16px;
  }
  .conduct-proof > header,
  .conduct-boundary > header,
  .conduct-faq > header {
    display: block;
  }
  .conduct-proof > header > p,
  .conduct-boundary > header > p {
    margin-top: 12px;
  }
  .conduct-response {
    grid-template-columns: 1fr;
  }
  .conduct-boundary > aside {
    grid-template-columns: 1fr;
  }
}

/* Turret guide */
.conduct-rule-link { display: inline-flex; align-items: center; min-height: 38px; margin-top: 2px; padding: 0 14px; border: 1px solid #2ca8b5; border-radius: 4px; background: #092832; color: #8ff5fb; font-size: .82rem; font-weight: 900; text-decoration: none; }
.conduct-rule-link:hover { border-color: #75edf4; background: #0d3541; color: #fff; }
.turrets-page { background: radial-gradient(circle at 12% 10%, #163f5038, transparent 27rem), radial-gradient(circle at 88% 28%, #5130182e, transparent 30rem), #070b11; }
.turrets-page main { width: min(1500px, calc(100% - 32px)); margin: 22px auto 70px; }
.turret-hero { position: relative; display: grid; grid-template-columns: minmax(0,1.55fr) minmax(300px,.65fr); gap: 34px; min-height: 520px; padding: clamp(38px,6vw,86px); overflow: hidden; border: 1px solid #29465b; background: linear-gradient(90deg,#071018 15%,#08131de8 52%,#08131ca6),url('/league/champion/blitzcrank/splash.jpg') center 22%/cover; }
.turret-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 5px; background: linear-gradient(90deg,#2de7ef,#ffd15e,#f06d59); }
.turret-hero > * { position: relative; z-index: 1; }
.turret-hero h1 { max-width: 900px; margin: 8px 0 16px; color: #f7fbff; font-size: clamp(2.5rem,5.5vw,5.4rem); line-height: .98; }
.turret-hero > div > p:last-of-type { max-width: 780px; color: #b5c6d3; font-size: clamp(1rem,1.4vw,1.25rem); line-height: 1.65; }
.turret-hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 27px; }
.turret-hero-actions a,.turret-inline-action { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1px solid #368493; border-radius: 4px; background: #0a2832e8; color: #96f6fb; font-weight: 900; text-decoration: none; }
.turret-hero-actions a:hover,.turret-inline-action:hover { border-color: #ffd15e; color: #fff3b4; }
.turret-hero > aside { align-self: end; padding: 24px; border: 1px solid #9c772f; border-left: 5px solid #ffd15e; background: #17150ee8; box-shadow: 0 18px 50px #0009; }
.turret-hero-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border: 1px solid #edca71; background: #362b13; color: #ffe394; font-size: 1.6rem; }
.turret-hero aside small,.turret-hero aside strong { display: block; }
.turret-hero aside small { color: #edc75d; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.turret-hero aside strong { margin-top: 6px; color: #fff6d9; font-size: 1.45rem; }
.turret-hero aside p { margin: 10px 0 0; color: #cbbf9f; line-height: 1.6; }
.turret-jumps { position: sticky; z-index: 10; top: 68px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 12px 16px; border: 1px solid #293947; background: #080e15ee; backdrop-filter: blur(16px); }
.turret-jumps span { margin-right: 5px; color: #71899a; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.turret-jumps a { padding: 7px 10px; border: 1px solid transparent; color: #b9ceda; font-size: .82rem; font-weight: 800; text-decoration: none; }
.turret-jumps a:hover { border-color: #287e88; background: #0b252d; color: #7ff2f7; }
.turret-rule,.turret-order,.turret-farming,.turret-sources { padding: clamp(28px,4vw,58px); border: 1px solid #263744; background: #0a1018; }
.turret-rule > header,.turret-order > header,.turret-farming > header,.turret-sources > header { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 28px; }
.turret-rule h2,.turret-order h2,.turret-farming h2,.turret-sources h2,.turret-setting h2,.turret-answer h2,.turret-blitz h2,.turret-plates h2 { margin: 5px 0 0; color: #f3f8fc; font-size: clamp(1.7rem,3vw,2.8rem); line-height: 1.1; }
.turret-rule > header > p,.turret-order > header > p,.turret-farming > header > p,.turret-sources > header > p { max-width: 600px; margin: 0; color: #8fa5b3; line-height: 1.55; }
.turret-rule ol { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.turret-rule li { position: relative; min-width: 0; padding: 22px; border: 1px solid #2b4556; background: #0e1a24; }
.turret-rule li::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: #33cbd4; }
.turret-rule li:nth-child(2)::after { background: #ffcc59; }.turret-rule li:nth-child(3)::after { background: #6fd59d; }.turret-rule li:nth-child(4)::after { background: #b18aff; }
.turret-rule li > b { margin-bottom: 19px; }
.turret-rule li span,.turret-rule li strong { display: block; }
.turret-rule li span { color: #5fdce3; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.turret-rule li strong { margin-top: 6px; color: #edf6fb; font-size: 1.08rem; line-height: 1.3; }
.turret-rule li p { margin: 10px 0 0; color: #8fa5b2; line-height: 1.55; }
.turret-answer { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 26px; align-items: center; padding: 34px clamp(28px,5vw,70px); border: 1px solid #2c755c; background: linear-gradient(110deg,#092018,#0b1617); }
.turret-answer > span { display: grid; place-items: center; width: 78px; height: 78px; border: 1px solid #4fd39c; background: #123a2d; color: #8fffcf; font-size: 2rem; }
.turret-answer p:last-child { max-width: 1000px; margin: 8px 0 0; color: #9fc2b4; line-height: 1.6; }
.turret-setting { display: grid; grid-template-columns: .75fr 1.25fr; gap: 30px; padding: clamp(28px,4vw,58px); border: 1px solid #55442a; background: #15120c; }
.turret-setting > div:first-child > p:last-child { color: #b7aa8d; line-height: 1.6; }
.turret-setting-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.turret-setting-grid article { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 12px; padding: 18px; border: 1px solid #5b4b31; background: #1d190f; }
.turret-setting-grid i { color: #f3c966; font-size: 1.4rem; }.turret-setting-grid strong { color: #fff2c9; }.turret-setting-grid p { margin: 6px 0 0; color: #ad9e7d; font-size: .88rem; line-height: 1.5; }
.turret-blitz { display: grid; grid-template-columns: minmax(280px,.75fr) minmax(0,1.25fr); border: 1px solid #246b78; background: #08131a; }
.turret-blitz-art { min-height: 620px; overflow: hidden; }.turret-blitz-art img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.turret-blitz > div:last-child { padding: clamp(28px,4vw,58px); }
.turret-blitz-flow { display: grid; gap: 8px; margin: 24px 0; }
.turret-blitz-flow article { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 14px; padding: 14px; border: 1px solid #254653; background: #0c1d25; }
.turret-blitz-flow strong { color: #e9f9fb; }.turret-blitz-flow p { margin: 4px 0 0; color: #91aeb6; line-height: 1.5; }
.turret-order-track { display: grid; grid-template-columns: repeat(9,auto); gap: 10px; align-items: stretch; }
.turret-order-track > article { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px; min-width: 0; padding: 18px; border: 1px solid #344b5e; background: #101923; }
.turret-order-track > article > b { position: absolute; top: 8px; right: 8px; }.turret-order-track > article > i { margin-top: 3px; color: #54dce5; font-size: 1.35rem; }
.turret-order-track strong,.turret-order-track small { display: block; }.turret-order-track strong { padding-right: 30px; color: #f3f8fb; }.turret-order-track small { margin-top: 3px; color: #62dbe3; font-size: .66rem; font-weight: 900; text-transform: uppercase; }
.turret-order-track p { color: #8da0af; font-size: .82rem; line-height: 1.45; }.turret-order-track > i { align-self: center; color: #607b8d; }
.turret-plates { display: grid; grid-template-columns: .8fr 1.2fr; gap: 35px; padding: clamp(28px,4vw,58px); border: 1px solid #49366d; background: linear-gradient(120deg,#130e1e,#0c1017); }
.turret-plates > div > p:last-child { color: #aa9bbb; line-height: 1.6; }.turret-plates aside { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.turret-plates article { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; padding: 18px; border: 1px solid #51406f; background: #171022; }
.turret-plates strong { color: #efe7ff; }.turret-plates p { margin: 5px 0 0; color: #a699ba; line-height: 1.45; }
.turret-farming > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.turret-farming article { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 12px; padding: 18px; border: 1px solid #31475a; background: #101923; }
.turret-farming strong { color: #edf4fa; }.turret-farming p { margin: 5px 0 0; color: #91a3b1; line-height: 1.5; }
.turret-sources > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.turret-sources a { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 14px; align-items: center; padding: 18px; border: 1px solid #315267; background: #0d1922; color: inherit; text-decoration: none; }
.turret-sources a:hover { border-color: #43cbd5; background: #10232d; }.turret-sources i { color: #5de3eb; font-size: 1.5rem; }
.turret-sources strong,.turret-sources small { display: block; }.turret-sources strong { color: #edf8fb; }.turret-sources small { margin-top: 4px; color: #8ba6b2; line-height: 1.4; }
@media (max-width: 1100px) {
  .turret-rule ol,.turret-farming > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .turret-setting,.turret-plates { grid-template-columns: 1fr; }
  .turret-order-track { grid-template-columns: 1fr; }
  .turret-order-track > i { transform: rotate(90deg); justify-self: center; }
}
@media (max-width: 760px) {
  .turrets-page main { width: min(100% - 18px,1500px); margin-top: 10px; }
  .turret-hero { grid-template-columns: 1fr; min-height: 680px; padding: 28px 20px; background-position: 66% center; }
  .turret-hero h1 { font-size: clamp(2.25rem,12vw,3.7rem); }
  .turret-jumps { top: 58px; max-height: 130px; overflow: auto; }
  .turret-rule > header,.turret-order > header,.turret-farming > header,.turret-sources > header { align-items: start; flex-direction: column; }
  .turret-rule ol,.turret-setting-grid,.turret-farming > div,.turret-sources > div,.turret-plates aside { grid-template-columns: 1fr; }
  .turret-answer { grid-template-columns: 1fr; }
  .turret-blitz { grid-template-columns: 1fr; }
  .turret-blitz-art { min-height: 300px; max-height: 380px; }
}

/* v109: universal turret aggro guide and Auto Attack comparison. */
.turrets-page {
  --turret-cyan: #45e2eb;
  --turret-gold: #f2c75c;
  --turret-green: #65dfa7;
  --turret-red: #ff6f86;
  --turret-violet: #ad8cff;
  background:
    radial-gradient(circle at 8% 6%, #143f4b55, transparent 30rem),
    radial-gradient(circle at 91% 18%, #4d341f3d, transparent 32rem),
    #070b11;
}
.turrets-page main {
  display: grid;
  gap: 12px;
}
.turret-hero.turret-hero-universal {
  grid-template-columns: minmax(0,1.25fr) minmax(360px,.75fr);
  min-height: 560px;
  background:
    linear-gradient(110deg,#071018 0%,#091722 52%,#10131d 100%);
}
.turret-hero-universal::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .32;
  background-image:
    linear-gradient(#23415155 1px,transparent 1px),
    linear-gradient(90deg,#23415155 1px,transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg,#000,transparent 70%);
}
.turret-hero-copy { align-self: center; }
.turret-hero-universal h1 { max-width: 820px; font-size: clamp(3rem,5.4vw,5.6rem); }
.turret-hero-facts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.turret-hero-facts span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid #2f5265;
  border-radius: 4px;
  background: #0b1c27cc;
  color: #c6dbe7;
  font-size: .78rem;
}
.turret-hero-facts i { color: var(--turret-cyan); font-size: 1rem; }
.turret-map {
  position: relative;
  align-self: center;
  justify-self: end;
  width: min(100%,500px);
  aspect-ratio: 1;
  margin: 0;
  padding: 34px;
  border: 1px solid #34566a;
  background: #07121bcc;
  box-shadow: 0 28px 80px #000a;
}
.turret-map::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid #31526766;
  pointer-events: none;
}
.turret-map img { width: 100%; height: 100%; object-fit: contain; filter: saturate(.8) brightness(.9); }
.turret-map-marker {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid #61dce7;
  border-radius: 4px;
  background: #081922e8;
  color: #a8f7fb;
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 0 0 18px #28dbe633;
}
.turret-map-marker.is-top { top: 20%; left: 25%; }
.turret-map-marker.is-mid { top: 47%; left: 48%; }
.turret-map-marker.is-bot { right: 18%; bottom: 23%; }
.turret-map figcaption {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  padding: 14px 16px;
  border-left: 4px solid var(--turret-gold);
  background: #090d12e8;
}
.turret-map figcaption strong,.turret-map figcaption span { display: block; }
.turret-map figcaption strong { color: #fff2c8; }
.turret-map figcaption span { margin-top: 3px; color: #9eacb5; font-size: .75rem; line-height: 1.4; }
.turret-core-answer {
  display: grid;
  grid-template-columns: 62px minmax(0,1fr);
  gap: 18px;
  align-items: center;
  padding: 22px clamp(22px,4vw,52px);
  border: 1px solid #3d775f;
  border-left: 5px solid var(--turret-green);
  background: #091b17;
}
.turret-core-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid #4bc18e;
  background: #11382c;
  color: #8dffd0;
  font-size: 1.45rem;
}
.turret-core-answer small,.turret-core-answer strong { display: block; }
.turret-core-answer small { color: #68dca7; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.turret-core-answer strong { margin-top: 3px; color: #f0fff8; font-size: clamp(1.15rem,2vw,1.65rem); line-height: 1.25; }
.turret-core-answer p { margin: 5px 0 0; color: #9fc5b5; line-height: 1.5; }
.turret-checker,.turret-auto,.turret-champions,.turret-example {
  padding: clamp(28px,4vw,58px);
  border: 1px solid #263744;
  background: #0a1018;
}
.turret-checker > header,.turret-auto > header,.turret-champions > header,.turret-example > header {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: end;
  margin-bottom: 28px;
}
.turret-checker h2,.turret-auto h2,.turret-champions h2,.turret-example h2 {
  margin: 5px 0 0;
  color: #f3f8fc;
  font-size: clamp(1.7rem,3vw,2.8rem);
  line-height: 1.1;
}
.turret-checker > header > p,.turret-champions > header > p {
  max-width: 620px;
  margin: 0;
  color: #8fa5b3;
  line-height: 1.55;
}
.turret-checker-layout { display: grid; grid-template-columns: minmax(320px,.8fr) minmax(0,1.2fr); gap: 12px; }
.turret-action-buttons { display: grid; gap: 8px; }
.turret-action-buttons button {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 13px;
  align-items: center;
  width: 100%;
  min-height: 68px;
  padding: 12px 15px;
  border: 1px solid #2d4556;
  border-radius: 4px;
  background: #0d1721;
  color: #dcebf3;
  text-align: left;
  cursor: pointer;
}
.turret-action-buttons button:hover { border-color: #428797; background: #10232c; }
.turret-action-buttons button.is-active { border-color: var(--turret-cyan); background: #0b2932; box-shadow: inset 4px 0 var(--turret-cyan); }
.turret-action-buttons button > i { color: #5adfe7; font-size: 1.3rem; text-align: center; }
.turret-action-buttons strong,.turret-action-buttons small { display: block; }
.turret-action-buttons strong { font-size: .94rem; }
.turret-action-buttons small { margin-top: 3px; color: #8298a6; font-size: .72rem; }
.turret-checker-result {
  display: grid;
  grid-template-columns: 72px minmax(0,1fr);
  grid-template-areas: "icon label" "icon title" "body body" "note note";
  align-content: center;
  gap: 5px 20px;
  min-height: 372px;
  padding: clamp(24px,4vw,52px);
  border: 1px solid #42647a;
  border-top: 5px solid #5dbbd1;
  background: #0d1923;
}
.turret-result-icon { grid-area: icon; display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid currentColor; color: #7ae4eb; font-size: 1.65rem; }
.turret-checker-result small { grid-area: label; align-self: end; color: #65dce4; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.turret-checker-result > strong { grid-area: title; color: #f3fbff; font-size: clamp(1.35rem,2.5vw,2.3rem); line-height: 1.15; }
.turret-checker-result p { grid-area: body; margin: 24px 0 0; color: #abc0cc; font-size: 1.02rem; line-height: 1.65; }
.turret-checker-result em { grid-area: note; margin-top: 12px; padding: 12px 14px; border-left: 3px solid #557487; background: #09131b; color: #8fa7b5; font-size: .82rem; line-height: 1.5; }
.turret-checker-result.is-danger { border-color: #9e4052; border-top-color: var(--turret-red); background: #211017; }
.turret-checker-result.is-danger .turret-result-icon,.turret-checker-result.is-danger small { color: #ff8ea0; }
.turret-checker-result.is-warning { border-color: #8c6c31; border-top-color: var(--turret-gold); background: #1d180d; }
.turret-checker-result.is-warning .turret-result-icon,.turret-checker-result.is-warning small { color: #ffd875; }
.turret-checker-result.is-safe { border-color: #347759; border-top-color: var(--turret-green); background: #0b1e17; }
.turret-checker-result.is-safe .turret-result-icon,.turret-checker-result.is-safe small { color: #7ef0ba; }
.turret-auto { border-color: #55442a; background: #12100c; }
.turret-auto > header > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 520px;
  padding: 10px 13px;
  border: 1px solid #66522f;
  background: #1c170d;
  color: #d3bd85;
  font-size: .82rem;
  line-height: 1.45;
}
.turret-auto-compare { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.turret-auto-compare article { padding: clamp(22px,3vw,36px); border: 1px solid #66522f; background: #19150e; }
.turret-auto-compare article.is-on { border-top: 5px solid var(--turret-gold); }
.turret-auto-compare article.is-off { border-top: 5px solid var(--turret-cyan); }
.turret-toggle-visual { display: flex; align-items: center; gap: 10px; width: fit-content; min-height: 40px; padding: 0 10px 0 13px; border: 1px solid #6d5b37; background: #0d0c09; color: #d7c89d; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.turret-toggle-visual b { color: #fff4d1; }
.turret-toggle-visual i { position: relative; width: 38px; height: 20px; border: 1px solid #87703e; border-radius: 10px; background: #3d321d; }
.turret-toggle-visual i::after { content: ""; position: absolute; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #ffe08a; }
.turret-auto-compare .is-on .turret-toggle-visual i::after { right: 2px; }
.turret-auto-compare .is-off .turret-toggle-visual i { border-color: #376d76; background: #11272c; }
.turret-auto-compare .is-off .turret-toggle-visual i::after { left: 2px; background: #6eeaf1; }
.turret-auto-compare h3 { margin: 20px 0 9px; color: #fff6df; font-size: clamp(1.25rem,2vw,1.7rem); line-height: 1.25; }
.turret-auto-compare > article > p { margin: 0; color: #baad8c; line-height: 1.65; }
.turret-auto-compare ul { display: grid; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.turret-auto-compare li { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; padding: 12px; border: 1px solid #4e422b; background: #100e0a; }
.turret-auto-compare li i { color: #efca68; font-size: 1.05rem; }
.turret-auto-compare li strong,.turret-auto-compare li span { display: block; }
.turret-auto-compare li span { color: #a99d80; font-size: .8rem; line-height: 1.45; }
.turret-auto-compare li strong { margin-bottom: 2px; color: #f5e9c7; font-size: .84rem; }
.turret-auto-summary { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; margin-top: 12px; }
.turret-auto-summary span { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; align-items: center; min-height: 62px; padding: 11px 14px; border: 1px solid #56462d; background: #0f0e0a; color: #e8dbb7; font-size: .8rem; }
.turret-auto-summary span i { color: #61dce4; font-size: 1.2rem; text-align: center; }
.turret-auto-summary > i { color: #88754a; }
.turret-champion-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.turret-champion-grid article {
  position: relative;
  min-width: 0;
  padding: 24px;
  overflow: hidden;
  border: 1px solid #30485a;
  background: #0e1822;
}
.turret-champion-grid article::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: var(--turret-cyan); }
.turret-champion-grid article.is-ranged::after { background: var(--turret-gold); }
.turret-champion-grid article.is-dot::after { background: var(--turret-red); }
.turret-champion-grid article.is-pet::after { background: var(--turret-violet); }
.turret-champion-grid article.is-move::after { background: #58a9ff; }
.turret-champion-grid article.is-utility::after { background: var(--turret-green); }
.turret-champion-grid article > i { color: #67e5ed; font-size: 1.5rem; }
.turret-champion-grid article > span,.turret-champion-grid article > strong { display: block; }
.turret-champion-grid article > span { margin-top: 16px; color: #61dce4; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.turret-champion-grid article > strong { margin-top: 5px; color: #edf7fc; font-size: 1.05rem; line-height: 1.35; }
.turret-champion-grid article > p { margin: 9px 0 0; color: #8fa5b2; line-height: 1.55; }
.turret-example > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.turret-example article { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 14px; padding: 20px; border: 1px solid #334c5f; background: #0e1821; }
.turret-example article small,.turret-example article strong { display: block; }
.turret-example article small { color: #5fdce4; font-size: .66rem; font-weight: 900; text-transform: uppercase; }
.turret-example article strong { margin-top: 4px; color: #f1f8fc; }
.turret-example article p { margin: 7px 0 0; color: #91a6b3; line-height: 1.5; }
.turret-example aside { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 15px; align-items: center; margin-top: 10px; padding: 16px 18px; border: 1px solid #665331; background: #1a160d; }
.turret-example aside > i { color: #ffd36b; font-size: 1.4rem; text-align: center; }
.turret-example aside p { margin: 0; color: #bdaf8c; line-height: 1.5; }
.turret-example aside strong { color: #fff0be; }
.turret-example aside a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px; border: 1px solid #997735; border-radius: 4px; background: #2b210f; color: #ffe18d; font-size: .78rem; font-weight: 900; text-decoration: none; white-space: nowrap; }
.turret-example aside a:hover { border-color: #ffd15e; color: #fff; }
.turret-gotchas,.turret-plate-sharing {
  padding: clamp(28px,4vw,58px);
  border: 1px solid #263744;
  background: #0a1018;
}
.turret-gotchas > header,.turret-plate-sharing > header {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: end;
  margin-bottom: 28px;
}
.turret-gotchas h2,.turret-plate-sharing h2 {
  margin: 5px 0 0;
  color: #f3f8fc;
  font-size: clamp(1.7rem,3vw,2.8rem);
  line-height: 1.1;
}
.turret-gotchas > header > p {
  max-width: 620px;
  margin: 0;
  color: #8fa5b3;
  line-height: 1.55;
}
.turret-scorch-callout {
  display: grid;
  grid-template-columns: 74px minmax(0,1fr) minmax(280px,.55fr);
  gap: 22px;
  align-items: center;
  padding: clamp(22px,3vw,34px);
  border: 1px solid #95533f;
  border-top: 5px solid #ff795d;
  background: linear-gradient(105deg,#24120e,#17100d);
}
.turret-scorch-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 1px solid #d96c50;
  background: #391b13;
  color: #ff9c70;
  font-size: 1.8rem;
}
.turret-scorch-callout small { color: #ff9876; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.turret-scorch-callout h3 { margin: 4px 0 7px; color: #fff3ec; font-size: clamp(1.3rem,2.2vw,2rem); line-height: 1.2; }
.turret-scorch-callout p { margin: 0; color: #c8aaa0; line-height: 1.6; }
.turret-scorch-callout dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; border: 1px solid #6a3d31; background: #100c0a; }
.turret-scorch-callout dl div { min-width: 0; padding: 13px; border-right: 1px solid #6a3d31; }
.turret-scorch-callout dl div:last-child { border-right: 0; }
.turret-scorch-callout dt { color: #a88578; font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.turret-scorch-callout dd { margin: 3px 0 0; color: #ffcfbf; font-size: .86rem; font-weight: 900; }
.turret-gotcha-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-top: 10px; }
.turret-gotcha-grid article { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 11px; min-width: 0; padding: 17px; border: 1px solid #493b37; background: #151110; }
.turret-gotcha-grid i { color: #ff8c6e; font-size: 1.15rem; text-align: center; }
.turret-gotcha-grid strong { color: #f6e9e4; }
.turret-gotcha-grid p { margin: 4px 0 0; color: #a58e87; font-size: .82rem; line-height: 1.48; }
.turret-gotchas > aside { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; align-items: center; margin-top: 10px; padding: 13px 16px; border: 1px solid #326b57; background: #0b1a15; }
.turret-gotchas > aside i { color: #61dfa8; font-size: 1.1rem; text-align: center; }
.turret-gotchas > aside p { margin: 0; color: #a3c4b6; line-height: 1.5; }
.turret-gotchas > aside strong { color: #8cf1c3; }
.turret-plate-sharing { border-color: #4f3e68; background: #0f0c17; }
.turret-decision-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border: 1px solid #72599a;
  background: #191225;
  color: #d7bfff;
  font-size: .8rem;
  font-weight: 900;
}
.turret-plate-verdict { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(380px,.9fr); gap: 12px; }
.turret-plate-verdict > div:first-child { padding: clamp(22px,3vw,34px); border: 1px solid #594670; background: #161020; }
.turret-plate-verdict small,.turret-plate-verdict strong { display: block; }
.turret-plate-verdict > div:first-child > small { color: #b995ee; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.turret-plate-verdict > div:first-child > strong { margin-top: 5px; color: #f5eeff; font-size: clamp(1.25rem,2.1vw,1.8rem); line-height: 1.25; }
.turret-plate-verdict > div:first-child > p { color: #aa9bbb; line-height: 1.6; }
.turret-plate-rule { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid #795c9c; background: #0c0912; }
.turret-plate-rule i { color: #d3a9ff; font-size: 1.1rem; text-align: center; }
.turret-plate-rule span { color: #c3aed9; font-size: .83rem; line-height: 1.5; }
.turret-plate-rule b { color: #f1e1ff; }
.turret-plate-math { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 18px; border: 1px solid #594670; background: #0b0910; }
.turret-plate-math article { min-width: 0; padding: 22px 15px; border: 1px solid #483959; background: #15101d; text-align: center; }
.turret-plate-math article span,.turret-plate-math article strong,.turret-plate-math article small { display: block; }
.turret-plate-math article span { color: #ad91c8; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.turret-plate-math article strong { margin-top: 6px; color: #f0c868; font-size: clamp(1.55rem,3vw,2.4rem); }
.turret-plate-math article small { margin-top: 4px; color: #81728e; line-height: 1.35; }
.turret-plate-math > i { color: #9c7fbb; }
.turret-plate-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.turret-plate-choices article { display: grid; grid-template-columns: 50px minmax(0,1fr); gap: 15px; padding: 22px; border: 1px solid #4d3e5f; background: #15101d; }
.turret-plate-choices article > i { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #755a94; color: #d0a8ff; font-size: 1.25rem; }
.turret-plate-choices small,.turret-plate-choices strong { display: block; }
.turret-plate-choices small { color: #b88fe1; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.turret-plate-choices strong { margin-top: 4px; color: #f1e9f8; font-size: 1.05rem; line-height: 1.35; }
.turret-plate-choices p { margin: 7px 0 0; color: #a395ae; line-height: 1.5; }
.turret-plate-choices article.is-stay { border-color: #315f5b; background: #0d1918; }
.turret-plate-choices article.is-stay > i { border-color: #3c7e76; color: #74ded0; }
.turret-plate-choices article.is-stay small { color: #69cfc3; }
.turret-plate-checklist { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin: 10px 0 0; padding: 0; list-style: none; }
.turret-plate-checklist li { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 11px; min-width: 0; padding: 17px; border: 1px solid #443650; background: #100c16; }
.turret-plate-checklist strong,.turret-plate-checklist small { display: block; }
.turret-plate-checklist strong { color: #eee6f5; line-height: 1.35; }
.turret-plate-checklist small { margin-top: 5px; color: #95869e; line-height: 1.45; }
.turret-plate-sharing > aside { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; align-items: center; margin-top: 10px; padding: 14px 16px; border: 1px solid #824653; background: #1b0e13; }
.turret-plate-sharing > aside i { color: #ff7d91; font-size: 1.1rem; text-align: center; }
.turret-plate-sharing > aside p { margin: 0; color: #c2a0a7; line-height: 1.5; }
.turret-plate-sharing > aside strong { color: #ff9bab; }
.turret-plate-sharing > aside span { color: #aa9398; }

@media (max-width: 1100px) {
  .turret-hero.turret-hero-universal { grid-template-columns: minmax(0,1fr) minmax(310px,.7fr); }
  .turret-map { padding: 24px; }
  .turret-champion-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .turret-auto-summary { grid-template-columns: 1fr; }
  .turret-auto-summary > i { transform: rotate(90deg); justify-self: center; }
  .turret-scorch-callout { grid-template-columns: 64px minmax(0,1fr); }
  .turret-scorch-callout dl { grid-column: 1 / -1; }
  .turret-gotcha-grid,.turret-plate-checklist { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .turret-plate-verdict { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .turret-hero.turret-hero-universal { grid-template-columns: 1fr; min-height: 0; }
  .turret-map { justify-self: stretch; width: min(100%,520px); margin-inline: auto; }
  .turret-checker-layout,.turret-auto-compare { grid-template-columns: 1fr; }
  .turret-checker-result { min-height: 300px; }
  .turret-example > div { grid-template-columns: 1fr; }
  .turret-example aside { grid-template-columns: 34px minmax(0,1fr); }
  .turret-example aside a { grid-column: 2; width: fit-content; white-space: normal; }
  .turret-plate-choices { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .turret-hero.turret-hero-universal { padding: 28px 20px; background: #09131c; }
  .turret-hero-universal h1 { font-size: clamp(2.35rem,11vw,3.5rem); }
  .turret-hero-facts { display: grid; grid-template-columns: 1fr; }
  .turret-hero-facts span { width: 100%; }
  .turret-map { padding: 18px; }
  .turret-map::before { inset: 9px; }
  .turret-map figcaption { right: 10px; bottom: 10px; left: 10px; }
  .turret-core-answer { grid-template-columns: 1fr; }
  .turret-checker > header,.turret-auto > header,.turret-champions > header,.turret-example > header { align-items: start; flex-direction: column; }
  .turret-gotchas > header,.turret-plate-sharing > header { align-items: start; flex-direction: column; }
  .turret-checker-layout { grid-template-columns: 1fr; }
  .turret-action-buttons button { grid-template-columns: 34px minmax(0,1fr); min-height: 64px; }
  .turret-checker-result { grid-template-columns: 54px minmax(0,1fr); min-height: 0; padding: 22px 18px; }
  .turret-result-icon { width: 50px; height: 50px; }
  .turret-checker-result p { margin-top: 17px; }
  .turret-champion-grid { grid-template-columns: 1fr; }
  .turret-example aside { grid-template-columns: 1fr; }
  .turret-example aside a { grid-column: 1; width: 100%; justify-content: center; }
  .turret-scorch-callout { grid-template-columns: 1fr; }
  .turret-scorch-callout dl { grid-column: auto; }
  .turret-gotcha-grid,.turret-plate-checklist { grid-template-columns: 1fr; }
  .turret-plate-math { grid-template-columns: 1fr; }
  .turret-plate-math > i { transform: rotate(90deg); justify-self: center; }
}
@media (max-width: 430px) {
  .turret-map-marker { min-height: 26px; padding: 0 6px; font-size: .58rem; }
  .turret-map figcaption span { display: none; }
  .turret-jumps { position: relative; top: auto; max-height: none; overflow: visible; }
  .turret-jumps span { width: 100%; }
  .turret-jumps a { border-color: #263c4a; background: #0a141c; }
  .turret-auto-compare article,.turret-champion-grid article { padding: 20px 17px; }
}

/* v176: clearer matchup commands and visual jump controls. */
.guide-main .guide-picker button[type="submit"] { display:inline-flex; min-height:44px; align-items:center; justify-content:center; gap:9px; padding:10px 17px; border:1px solid #63dce6; border-radius:6px; color:#edfdff; background:#12323a; box-shadow:inset 0 -3px rgba(99,220,230,.15),0 10px 24px rgba(0,0,0,.18); }
.guide-main .guide-picker button[type="submit"] i { color:#7cebf1; font-size:1rem; }
.guide-main .guide-picker button[type="submit"]:is(:hover,:focus-visible) { color:#fff; background:#18434b; box-shadow:inset 0 -3px rgba(99,220,230,.22),0 12px 28px rgba(0,0,0,.24); }
.guide-main .guide-jumps { display:grid; grid-template-columns:auto repeat(7,minmax(0,1fr)); gap:7px; padding:10px; border-color:#394451; background:#0a1119; }
.guide-main .guide-jumps>span { display:flex; align-items:center; padding:0 8px; white-space:nowrap; }
.guide-main .guide-jumps a { --jump-tone:#c8d3da; display:flex; min-width:0; min-height:44px; align-items:center; justify-content:center; gap:7px; padding:8px 9px; border:1px solid color-mix(in srgb,var(--jump-tone) 38%,#33404a); border-radius:6px; color:#dbe4e9; background:color-mix(in srgb,var(--jump-tone) 5%,#0e1720); text-align:center; }
.guide-main .guide-jumps a:nth-of-type(1) { --jump-tone:#63dba0; }
.guide-main .guide-jumps a:nth-of-type(2) { --jump-tone:#edbf59; }
.guide-main .guide-jumps a:nth-of-type(3) { --jump-tone:#64dce6; }
.guide-main .guide-jumps a:nth-of-type(4) { --jump-tone:#e99754; }
.guide-main .guide-jumps a:nth-of-type(5) { --jump-tone:#ef809c; }
.guide-main .guide-jumps a:nth-of-type(6) { --jump-tone:#b191f4; }
.guide-main .guide-jumps a:nth-of-type(7) { --jump-tone:#c8d3da; }
.guide-main .guide-jumps a i { flex:0 0 auto; color:var(--jump-tone); font-size:.9rem; }
.guide-main .guide-jumps a:is(:hover,:focus-visible) { border-color:var(--jump-tone); color:#fff; background:color-mix(in srgb,var(--jump-tone) 11%,#0e1720); }
@media(max-width:980px){.guide-main .guide-jumps{display:flex;flex-wrap:wrap}.guide-main .guide-jumps>span{flex-basis:100%}.guide-main .guide-jumps a{flex:1 1 145px}}
@media(max-width:560px){.guide-main .guide-jumps a{flex-basis:calc(50% - 4px);min-height:42px;font-size:.7rem}.guide-main .guide-picker button[type="submit"]{width:100%}}

/* v175 final cascade: role image colours identify lanes; borders communicate fit. */
.discord-role-picker article { --discord-role-tone:#d9e4eb; position:relative; border-top:3px solid var(--discord-role-tone); }
.discord-role-picker article.is-top { --discord-role-tone:#71d9a3; }
.discord-role-picker article.is-jungle { --discord-role-tone:#d5a653; }
.discord-role-picker article.is-middle { --discord-role-tone:#aa8bea; }
.discord-role-picker article.is-bottom { --discord-role-tone:#ed718a; }
.discord-role-picker article.is-support { --discord-role-tone:#55dce9; }
.discord-role-lane-icon { display:grid; width:58px; height:58px; margin:20px 0 13px; place-items:center; border:1px solid color-mix(in srgb,var(--discord-role-tone) 62%,#28343e); border-radius:7px; background:color-mix(in srgb,var(--discord-role-tone) 10%,#08111a); box-shadow:inset 0 0 22px color-mix(in srgb,var(--discord-role-tone) 8%,transparent); }
.discord-role-lane-icon img { display:block; width:44px; height:44px; object-fit:contain; filter:drop-shadow(0 0 7px color-mix(in srgb,var(--discord-role-tone) 28%,transparent)); }
.champion-role-map-grid article.is-recommended { --fit-color:#4fe6a6; }
.champion-role-map-grid article.is-possible { --fit-color:#e4ad48; }
.champion-role-map-grid article.is-avoid { --fit-color:#ed637d; }
.champion-role-map-heading>.champion-role-icon { border-color:color-mix(in srgb,var(--fit-color,#6f8192) 72%,#26343e); background:color-mix(in srgb,var(--fit-color,#6f8192) 9%,#071018); box-shadow:inset 0 0 18px color-mix(in srgb,var(--fit-color,#6f8192) 7%,transparent),0 8px 18px rgba(0,0,0,.18); }
.champion-role-map-heading>.champion-role-icon img { filter:drop-shadow(0 0 5px color-mix(in srgb,var(--fit-color,#6f8192) 24%,transparent)); }
.champion-role-map-grid article.is-current .champion-role-icon { border-color:var(--fit-color,#6f8192); box-shadow:0 0 0 2px color-mix(in srgb,var(--fit-color,#6f8192) 17%,transparent),0 0 20px color-mix(in srgb,var(--fit-color,#6f8192) 18%,transparent); }
.guide-main .selected-role-verdict.recommended,.guide-main .role-fit-card.recommended { --fit-status-color:#4fe6a6; }
.guide-main .selected-role-verdict.possible,.guide-main .role-fit-card.possible { --fit-status-color:#e4ad48; }
.guide-main .selected-role-verdict.avoid,.guide-main .role-fit-card.avoid { --fit-status-color:#ed637d; }
.guide-main .selected-role-verdict .guide-lane-icon,.guide-main .role-fit-card .role-fit-icon { border-color:color-mix(in srgb,var(--fit-status-color,#6f8192) 72%,#263845); background:color-mix(in srgb,var(--fit-status-color,#6f8192) 10%,#071018); box-shadow:inset 0 1px rgba(255,255,255,.04),0 7px 18px color-mix(in srgb,var(--fit-status-color,#6f8192) 11%,transparent); }
.guide-main .selected-role-verdict .guide-lane-icon img,.guide-main .role-fit-card .role-fit-icon img { filter:drop-shadow(0 0 6px color-mix(in srgb,var(--fit-status-color,#6f8192) 30%,transparent)); }

/* v108: Riot API transparency and rate-limit safeguards. */
.api-compliance-page {
  --api-cyan: #5be4ee;
  --api-green: #68e0a3;
  --api-amber: #ffc963;
  --api-red: #ff7892;
  --api-violet: #b59cf6;
  background:
    linear-gradient(180deg, rgba(255, 201, 99, .035), transparent 320px),
    #090c11;
}
.api-compliance-page main {
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 64px;
}
.api-policy-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: 28px;
  align-items: stretch;
  min-height: 470px;
  padding: 38px;
  overflow: hidden;
  border: 1px solid #3b3d45;
  border-radius: 8px;
  background: #101217;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .3);
}
.api-policy-hero::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(8, 10, 14, .99) 0%, rgba(10, 12, 17, .93) 46%, rgba(12, 10, 17, .62) 100%);
  content: "";
}
.api-policy-hero-image {
  position: absolute;
  inset: 0;
}
.api-policy-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
  filter: saturate(.72) contrast(1.08) brightness(.82);
}
.api-policy-hero-copy {
  position: relative;
  z-index: 1;
  align-self: center;
  min-width: 0;
}
.api-policy-hero h1 {
  max-width: 760px;
  margin: 5px 0 16px;
  color: #f6fbff;
  font-size: clamp(2.35rem, 5vw, 4.9rem);
  line-height: .98;
  letter-spacing: 0;
}
.api-policy-hero-copy > p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: #c4d3df;
  font-size: 1.08rem;
  line-height: 1.75;
}
.api-policy-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 24px;
}
.api-policy-state span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(104, 224, 163, .42);
  border-radius: 999px;
  color: #cffff0;
  background: rgba(22, 105, 73, .34);
  font-size: .8rem;
  font-weight: 900;
}
.api-policy-state span.is-review {
  border-color: rgba(255, 201, 99, .46);
  color: #ffe4aa;
  background: rgba(119, 79, 15, .36);
}
.api-policy-state small {
  color: #9fb2c0;
  line-height: 1.45;
}
.api-policy-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 700px);
  margin-top: 26px;
}
.api-policy-actions a {
  --action-accent: var(--api-cyan);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  min-height: 52px;
  padding: 9px 14px;
  border: 1px solid color-mix(in srgb, var(--action-accent) 48%, #263541);
  border-radius: 5px;
  color: color-mix(in srgb, var(--action-accent) 72%, #e8f5fb);
  background: color-mix(in srgb, var(--action-accent) 7%, rgba(7, 12, 18, .92));
  box-shadow: inset 0 -2px color-mix(in srgb, var(--action-accent) 10%, transparent);
  font-size: .74rem;
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
  text-decoration: none;
}
.api-policy-actions a > i {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 4px;
  color: #061419;
  background: var(--action-accent);
  font-size: .9rem;
}
.api-policy-actions a > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.api-policy-actions a:hover,
.api-policy-actions a:focus-visible {
  outline: 0;
  border-color: var(--api-cyan);
  color: #fff;
  background: color-mix(in srgb, var(--action-accent) 14%, #0b141d);
}
.api-policy-actions .api-policy-primary {
  --action-accent: var(--api-cyan);
}
.api-policy-actions .api-policy-privacy {
  --action-accent: #aa91f4;
}
.api-policy-meter {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 23px;
  border: 1px solid rgba(181, 156, 246, .3);
  border-radius: 8px;
  background: rgba(10, 11, 17, .94);
  backdrop-filter: blur(14px);
}
.api-policy-meter header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #aabac6;
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
}
.api-policy-meter header span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.api-policy-meter header .bi {
  color: var(--api-cyan);
  font-size: 1rem;
}
.api-policy-meter header strong { color: var(--api-amber); }
.api-policy-gauge {
  position: relative;
  display: grid;
  height: 30px;
  align-items: center;
  margin: 22px 0 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: #111a23;
}
.api-policy-gauge span {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--api-green), var(--api-cyan));
  box-shadow: 0 0 22px rgba(91, 228, 238, .4);
}
.api-policy-gauge b {
  position: absolute;
  right: 10px;
  color: #eaffff;
  font-size: .67rem;
  letter-spacing: 0;
}
.api-policy-meter dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.api-policy-meter .api-policy-review-record {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 20px;
  border-top: 1px solid #343440;
}
.api-policy-meter .api-policy-review-record div {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid #2c2d36;
  border-left: 0;
  background: transparent;
}
.api-policy-meter .api-policy-review-record dt { color: #9d9aa8; }
.api-policy-meter .api-policy-review-record dd {
  min-width: 0;
  margin: 0;
  color: #f4f0ff;
  overflow-wrap: anywhere;
}
.api-policy-meter dl div {
  min-width: 0;
  padding: 13px 10px;
  border-left: 2px solid rgba(91, 228, 238, .52);
  background: #101923;
}
.api-policy-meter dt {
  color: #8093a3;
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}
.api-policy-meter dd {
  margin: 4px 0 0;
  color: #f3fbff;
  font-size: .92rem;
  font-weight: 900;
}
.api-policy-meter > p {
  margin: 18px 0 0;
  color: #879aa8;
  font-size: .78rem;
  line-height: 1.6;
}
.api-policy-snapshot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
  border: 1px solid #353740;
  border-radius: 7px;
  background: #101319;
}
.api-policy-snapshot article {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 16px 18px;
  border-right: 1px solid #263744;
}
.api-policy-snapshot article:last-child { border-right: 0; }
.api-policy-snapshot .bi {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(91, 228, 238, .36);
  border-radius: 6px;
  color: var(--api-cyan);
  background: rgba(27, 111, 120, .22);
  font-size: 1.1rem;
}
.api-policy-snapshot article:nth-child(2) .bi {
  border-color: rgba(255, 201, 99, .4);
  color: var(--api-amber);
  background: rgba(120, 79, 13, .22);
}
.api-policy-snapshot article:nth-child(3) .bi {
  border-color: rgba(104, 224, 163, .4);
  color: var(--api-green);
  background: rgba(20, 108, 72, .22);
}
.api-policy-snapshot article:nth-child(4) .bi {
  border-color: rgba(168, 154, 245, .42);
  color: #c8bcff;
  background: rgba(75, 55, 145, .22);
}
.api-policy-snapshot strong,
.api-policy-snapshot span { display: block; }
.api-policy-snapshot strong {
  color: #f5fbff;
  font-size: 1.02rem;
  font-weight: 950;
}
.api-policy-snapshot span {
  margin-top: 2px;
  color: #8297a7;
  font-size: .72rem;
  font-weight: 850;
  text-transform: uppercase;
}
.api-policy-section {
  padding: 64px 0 0;
}
.api-policy-section:nth-of-type(odd) .api-policy-heading .eyebrow { color: var(--api-amber); }
.api-policy-section:nth-of-type(3n) .api-policy-heading .eyebrow { color: var(--api-violet); }
.api-policy-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .65fr);
  gap: 30px;
  align-items: end;
  margin-bottom: 24px;
}
.api-policy-heading h2 {
  margin: 4px 0 0;
  color: #f5f9fc;
  font-size: clamp(1.75rem, 3.5vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: 0;
}
.api-policy-heading > p {
  margin: 0;
  color: #91a6b5;
  line-height: 1.65;
}
.api-limit-types,
.api-boundary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.api-limit-types article,
.api-boundary-grid article {
  position: relative;
  min-width: 0;
  padding: 25px;
  overflow: hidden;
  border: 1px solid #30333c;
  border-radius: 6px;
  background: #11141a;
}
.api-limit-types article {
  border-top: 4px solid var(--api-cyan);
}
.api-limit-types article.is-method { border-top-color: var(--api-amber); }
.api-limit-types article.is-service { border-top-color: var(--api-red); }
.api-limit-types article.is-method > .bi { color: var(--api-amber); }
.api-limit-types article.is-service > .bi { color: var(--api-red); }
.api-limit-types article.is-method .api-policy-number {
  border-color: rgba(255, 201, 99, .42);
  color: var(--api-amber);
  background: rgba(120, 79, 13, .24);
}
.api-limit-types article.is-service .api-policy-number {
  border-color: rgba(255, 120, 146, .42);
  color: var(--api-red);
  background: rgba(121, 27, 47, .24);
}
.api-limit-types article::after {
  position: absolute;
  right: -35px;
  bottom: -35px;
  width: 105px;
  height: 105px;
  border: 1px solid rgba(91, 228, 238, .14);
  border-radius: 50%;
  content: "";
}
.api-limit-types article > .bi,
.api-boundary-grid article > .bi {
  display: block;
  margin: 0 0 15px;
  color: var(--api-cyan);
  font-size: 1.7rem;
}
.api-limit-types h3,
.api-policy-flow h3,
.api-boundary-grid h3 {
  margin: 0 0 9px;
  color: #f0f7fb;
  font-size: 1.05rem;
}
.api-limit-types p,
.api-policy-flow p,
.api-boundary-grid p {
  margin: 0;
  color: #92a5b4;
  line-height: 1.65;
}
.api-policy-control-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(91, 228, 238, .38);
  border-radius: 6px;
  color: var(--api-cyan);
  background: rgba(28, 102, 112, .18);
  font-size: 1.05rem;
}
.api-policy-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid #263542;
}
.api-policy-flow article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  padding: 22px 20px 22px 0;
  border-bottom: 1px solid #263542;
}
.api-policy-flow article:nth-child(3n + 2) .api-policy-control-icon {
  border-color: rgba(104, 224, 163, .42);
  color: var(--api-green);
  background: rgba(20, 108, 72, .24);
}
.api-policy-flow article:nth-child(3n) .api-policy-control-icon {
  border-color: rgba(255, 201, 99, .42);
  color: var(--api-amber);
  background: rgba(120, 79, 13, .24);
}
.api-policy-flow article:nth-child(odd) { border-right: 1px solid #263542; }
.api-policy-flow article:nth-child(even) { padding-left: 20px; }
.api-policy-table-wrap {
  overflow-x: auto;
  border: 1px solid #283746;
  border-radius: 6px;
  background: #101319;
}
.api-policy-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}
.api-policy-table th,
.api-policy-table td {
  padding: 17px 18px;
  border-bottom: 1px solid #253341;
  color: #b8c7d2;
  text-align: left;
  vertical-align: top;
}
.api-policy-table thead th {
  color: #e5f6fa;
  background: #191720;
  font-size: .72rem;
  font-weight: 950;
  text-transform: uppercase;
}
.api-policy-table tbody tr:nth-child(2) {
  background: rgba(104, 224, 163, .07);
}
.api-policy-table tbody tr:nth-child(3) strong { color: var(--api-amber); }
.api-policy-table tbody th {
  color: #f0f6fa;
  font-weight: 850;
}
.api-policy-table strong { color: var(--api-cyan); }
.api-policy-table-note {
  display: flex;
  gap: 10px;
  margin: 12px 0 0;
  color: #8fa4b1;
  font-size: .82rem;
  line-height: 1.55;
}
.api-policy-table-note .bi { color: var(--api-amber); }
.api-boundary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.api-boundary-grid article { border-top: 3px solid var(--api-green); }
.api-boundary-grid article:nth-child(2) { border-top-color: var(--api-amber); }
.api-boundary-grid article:nth-child(3) { border-top-color: var(--api-cyan); }
.api-boundary-grid article:nth-child(4n) { border-top-color: var(--api-violet); }
.api-boundary-grid article:nth-child(4n + 1) > .bi { color: var(--api-green); }
.api-boundary-grid article:nth-child(4n + 2) > .bi { color: var(--api-amber); }
.api-boundary-grid article:nth-child(4n + 3) > .bi { color: var(--api-cyan); }
.api-boundary-grid article:nth-child(4n) > .bi { color: var(--api-violet); }
.api-boundary-grid article > .bi { margin-top: 0; }
.api-source-links {
  display: grid;
  gap: 8px;
}
.api-source-links a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 17px 19px;
  border: 1px solid #32343d;
  border-radius: 6px;
  color: #eaf7fb;
  background: #11141a;
  text-decoration: none;
}
.api-source-links a:hover,
.api-source-links a:focus-visible {
  border-color: var(--source-accent, var(--api-cyan));
  background: #171921;
}
.api-source-links a > .bi:first-child {
  color: var(--source-accent, var(--api-cyan));
  font-size: 1.35rem;
}
.api-source-links span { min-width: 0; }
.api-source-links strong,
.api-source-links small { display: block; }
.api-source-links small {
  margin-top: 3px;
  color: #8fa3b0;
  line-height: 1.45;
}
.api-source-links a > .bi:last-child { color: #6f8593; }
.api-source-links a:nth-child(2) { --source-accent: var(--api-green); }
.api-source-links a:nth-child(3) { --source-accent: var(--api-amber); }
.api-source-links a:nth-child(4) { --source-accent: var(--api-violet); }
@media (max-width: 900px) {
  .api-policy-hero,
  .api-policy-heading { grid-template-columns: 1fr; }
  .api-limit-types { grid-template-columns: 1fr; }
  .api-policy-snapshot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .api-policy-snapshot article:nth-child(2) { border-right: 0; }
  .api-policy-snapshot article:nth-child(-n + 2) { border-bottom: 1px solid #263744; }
}
@media (max-width: 680px) {
  .api-compliance-page main {
    width: min(100% - 20px, 1240px);
    padding-top: 20px;
  }
  .api-policy-hero {
    min-height: 0;
    padding: 150px 18px 20px;
  }
  .api-policy-hero::after {
    background: linear-gradient(0deg, rgba(5, 12, 18, .99) 0%, rgba(5, 12, 18, .92) 58%, rgba(5, 12, 18, .24) 100%);
  }
  .api-policy-hero-image img {
    height: 190px;
    object-position: center 28%;
  }
  .api-policy-hero h1 { font-size: 2rem; }
  .api-policy-hero-copy > p:not(.eyebrow) {
    font-size: .94rem;
    line-height: 1.58;
  }
  .api-policy-state { margin-top: 17px; }
  .api-policy-state small { display: none; }
  .api-policy-actions { margin-top: 16px; }
  .api-policy-meter { display: none; }
  .api-policy-heading { gap: 12px; }
  .api-policy-flow,
  .api-boundary-grid { grid-template-columns: 1fr; }
  .api-policy-flow article,
  .api-policy-flow article:nth-child(even) {
    padding: 18px 0;
    border-right: 0;
  }
  .api-policy-actions { grid-template-columns: 1fr; width: 100%; }
  .api-policy-actions a { width: 100%; }
  .api-policy-snapshot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .api-policy-snapshot article,
  .api-policy-snapshot article:nth-child(2) {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    padding: 12px 10px;
    border-bottom: 1px solid #263744;
  }
  .api-policy-snapshot article:nth-child(odd) { border-right: 1px solid #263744; }
  .api-policy-snapshot article:nth-child(even) { border-right: 0; }
  .api-policy-snapshot article:nth-child(n + 3) { border-bottom: 0; }
  .api-policy-snapshot .bi { width: 32px; height: 32px; }
  .api-policy-snapshot strong { font-size: .78rem; }
  .api-policy-snapshot span { font-size: .57rem; }
}

/* v133: Season 3 Act 1 Battle Pass. */
.battle-pass-page {
  --pass-gold: #f0bd5d;
  --pass-red: #ff5c72;
  --pass-cyan: #55d7e7;
  background: #080b10;
  color: #edf4f7;
}
.battle-pass-page main { width: min(1420px, calc(100% - 32px)); margin: 0 auto; }
.pass-hero {
  position: relative;
  min-height: min(620px, 72vh);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
  align-items: end;
  gap: 34px;
  overflow: hidden;
  padding: clamp(34px, 6vw, 84px);
  border: 1px solid #303846;
  border-radius: 7px;
  background: #111722 var(--pass-splash) center 23% / cover no-repeat;
  box-shadow: inset 0 -240px 160px -70px #080b10, inset 420px 0 220px -180px rgba(8,11,16,.96);
}
.pass-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-top: 4px solid var(--pass-red);
  box-shadow: inset 0 0 0 1px rgba(85,215,231,.12);
}
.pass-hero-copy, .pass-hero aside { position: relative; z-index: 1; }
.pass-hero-copy { max-width: 770px; }
.pass-hero h1 {
  max-width: 760px;
  margin: 10px 0 18px;
  font-size: clamp(3rem, 7vw, 6.8rem);
  line-height: .9;
  overflow-wrap: anywhere;
}
.pass-hero-copy > p:not(.eyebrow) {
  max-width: 680px;
  margin: 0;
  color: #c6d5dc;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  line-height: 1.55;
}
.pass-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pass-actions a, .pass-prestige > a, .pass-sources a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(85,215,231,.58);
  border-radius: 999px;
  background: #10232b;
  color: #a6f5ff;
  font-weight: 900;
  text-decoration: none;
}
.pass-actions a:first-child { border-color: rgba(240,189,93,.68); background: #2a2113; color: #ffe1a0; }
.pass-hero aside {
  padding: 24px;
  border: 1px solid rgba(240,189,93,.45);
  border-radius: 7px;
  background: rgba(8,11,16,.88);
}
.pass-hero aside :is(span, strong) { display: block; }
.pass-hero aside > span { color: var(--pass-gold); font-size: .73rem; font-weight: 950; text-transform: uppercase; }
.pass-hero aside strong { margin-top: 8px; font-size: clamp(1.45rem, 2.4vw, 2.3rem); line-height: 1.05; }
.pass-hero aside p { margin: 12px 0 0; color: #a7b8c0; line-height: 1.5; }
.pass-window-label { display: flex !important; align-items: center; gap: 8px; }
.pass-window-label b { color: #7bf2a5; }
.pass-window-label em { margin-left: auto; color: var(--pass-cyan); font-size: .63rem; font-style: normal; }
.pass-window-label .pass-live-dot { width: 9px; height: 9px; }
.pass-window p b { color: #eaf5f7; font-size: .83rem; }
.pass-window p em { color: #8fa5ae; font-size: .7rem; font-style: normal; font-weight: 700; }
.pass-window p em span { color: #b8d9df; }
.pass-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #28313d;
  border-top: 0;
  background: #0d1219;
}
.pass-stats article { min-width: 0; padding: 24px; border-right: 1px solid #28313d; }
.pass-stats article:last-child { border-right: 0; }
.pass-stats b { display: block; color: var(--pass-gold); font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1; }
.pass-stats span { display: block; margin-top: 7px; color: #91a6b0; font-size: .72rem; font-weight: 850; text-transform: uppercase; }
.pass-clock {
  display: grid;
  grid-template-columns: .75fr 1.05fr 1.05fr .85fr auto;
  align-items: center;
  gap: 0;
  margin-top: 12px;
  border: 1px solid #2d3945;
  border-radius: 7px;
  background: #0d131a;
}
.pass-clock > div { min-width: 0; padding: 18px 22px; border-right: 1px solid #28333e; }
.pass-clock :is(small, strong) { display: block; }
.pass-clock small { color: #7f949e; font-size: .61rem; font-weight: 900; text-transform: uppercase; }
.pass-clock strong { margin-top: 5px; color: #dce8ec; font-size: .8rem; line-height: 1.35; overflow-wrap: anywhere; }
.pass-clock-status { display: flex; align-items: center; gap: 12px; }
.pass-live-dot {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #55e08a;
  box-shadow: 0 0 18px rgba(85,224,138,.8);
}
[data-pass-status="ended"] .pass-live-dot { background: #77848c; box-shadow: none; }
[data-pass-status="upcoming"] .pass-live-dot { background: var(--pass-gold); box-shadow: 0 0 18px rgba(240,189,93,.7); }

/* v134: separate the ranked rollover from the Battle Pass content launch. */
.pass-launch-split {
  display: grid;
  gap: 20px;
  margin: 24px 0;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid rgba(86, 219, 232, .24);
  background: linear-gradient(135deg, rgba(10, 28, 36, .96), rgba(24, 18, 39, .96));
  border-radius: 8px;
}
.pass-launch-split header { max-width: 780px; }
.pass-launch-split header h2 { margin: 4px 0 8px; }
.pass-launch-split header p:last-child { margin: 0; color: #b7cad1; }
.pass-launch-split > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
.pass-launch-split > div > i {
  align-self: center;
  color: var(--pass-gold);
  font-size: 1.6rem;
  font-style: normal;
}
.pass-launch-split article {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 3px 14px;
  align-content: center;
  min-height: 142px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(4, 10, 16, .55);
  border-radius: 7px;
}
.pass-launch-split article > span {
  grid-row: 1 / 4;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(86, 219, 232, .55);
  background: rgba(86, 219, 232, .13);
  color: var(--pass-cyan);
  font-size: 1.15rem;
  font-weight: 900;
}
.pass-launch-split article small {
  color: #8fa5ae;
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}
.pass-launch-split article strong { color: #f3f8fa; font-size: clamp(1rem, 2vw, 1.28rem); }
.pass-launch-split article p { margin: 4px 0 0; color: #aebfc6; }
.pass-launch-split article.is-pass-launch {
  border-color: rgba(240, 189, 93, .38);
  box-shadow: inset 4px 0 0 var(--pass-gold);
}
.pass-launch-split article.is-pass-launch > span {
  border-color: rgba(240, 189, 93, .65);
  background: rgba(240, 189, 93, .14);
  color: var(--pass-gold);
}
@media (max-width: 720px) {
  .pass-launch-split > div { grid-template-columns: 1fr; }
  .pass-launch-split > div > i { justify-self: center; transform: rotate(90deg); }
}

/* v135: visual reward markers and automatic pass handover. */
.pass-featured-reward {
  display: inline-grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  max-width: 520px;
  margin-top: 22px;
  padding: 10px 16px 10px 10px;
  border: 1px solid rgba(240, 189, 93, .42);
  border-radius: 7px;
  background: rgba(7, 10, 16, .78);
  box-shadow: inset 3px 0 0 var(--pass-gold);
}
.pass-featured-reward img { display: block; border-radius: 5px; }
.pass-featured-reward :is(small, strong, em) { display: block; }
.pass-featured-reward small { color: var(--pass-gold); font-size: .65rem; font-weight: 950; text-transform: uppercase; }
.pass-featured-reward strong { margin-top: 2px; color: #fff5db; font-size: .95rem; }
.pass-featured-reward em { margin-top: 3px; color: #9fb1b9; font-size: .72rem; font-style: normal; }
.pass-stats article { position: relative; padding-left: 72px; }
.pass-stats article > i {
  position: absolute;
  left: 22px;
  top: 23px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(85, 215, 231, .32);
  border-radius: 50%;
  background: rgba(85, 215, 231, .1);
  color: var(--pass-cyan);
  font-style: normal;
  font-weight: 950;
}
.pass-stats article:last-child > i { border-color: rgba(240, 189, 93, .45); background: rgba(240, 189, 93, .12); color: var(--pass-gold); }
.pass-handover {
  display: grid;
  gap: 22px;
  margin: 20px 0;
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid #303c48;
  border-radius: 7px;
  background: #0d131a;
}
.pass-handover > header { max-width: 800px; }
.pass-handover > header h2 { margin: 5px 0 8px; font-size: clamp(1.65rem, 3.2vw, 2.8rem); }
.pass-handover > header p:last-child { margin: 0; color: #a9bbc3; }
.pass-handover-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pass-handover-flow article {
  position: relative;
  min-width: 0;
  padding: 70px 18px 18px;
  border: 1px solid #303b46;
  border-radius: 7px;
  background: #101821;
}
.pass-handover-flow article > span {
  position: absolute;
  top: 16px;
  left: 18px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(85, 215, 231, .45);
  border-radius: 50%;
  color: var(--pass-cyan);
  font-weight: 950;
}
.pass-handover-flow article small { display: block; color: #8297a1; font-size: .64rem; font-weight: 950; text-transform: uppercase; }
.pass-handover-flow article strong { display: block; margin-top: 5px; color: #e9f2f5; font-size: 1.06rem; }
.pass-handover-flow article p { margin: 8px 0 0; color: #9fb1b8; line-height: 1.5; }
.pass-handover-flow article.is-complete { border-color: rgba(85, 224, 138, .35); box-shadow: inset 0 3px 0 #55e08a; }
.pass-handover-flow article.is-complete > span { border-color: rgba(85, 224, 138, .55); color: #7bf2a5; }
.pass-handover-flow article.is-waiting { border-color: rgba(240, 189, 93, .45); box-shadow: inset 0 3px 0 var(--pass-gold); }
.pass-handover-note {
  margin: 0;
  padding: 14px 16px;
  border-left: 3px solid var(--pass-gold);
  background: rgba(240, 189, 93, .08);
  color: #adbdc4;
}
.pass-handover-note b { color: #ffe1a0; }
.pass-champion-rewards {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.pass-champion-rewards > span {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid #34404b;
  background: #0d141c;
}
.pass-champion-rewards img { display: block; border-radius: 5px; }
.pass-champion-rewards em { min-width: 0; font-style: normal; }
.pass-champion-rewards :is(b, small) { display: block; overflow-wrap: anywhere; }
.pass-champion-rewards b { color: #e9f2f5; }
.pass-champion-rewards small { margin-top: 3px; color: #8ea2ac; }
.pass-reward { grid-template-columns: 46px 46px minmax(0, 1fr) !important; }
.pass-reward-art {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid rgba(85, 215, 231, .28);
  border-radius: 6px;
  background: radial-gradient(circle at 50% 35%, rgba(85, 215, 231, .2), rgba(8, 15, 23, .94) 70%);
}
.pass-reward-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pass-reward-art.is-champion img, .pass-reward-art.is-prestige-champion img { object-fit: cover; }
.pass-reward-art.is-champion { border-color: rgba(85, 224, 138, .56); box-shadow: inset 0 0 0 2px rgba(85, 224, 138, .12); }
.pass-reward-art.is-prestige-champion { border-color: #f0bd5d; box-shadow: 0 0 14px rgba(240, 189, 93, .25), inset 0 0 0 2px rgba(240, 189, 93, .24); }
.pass-reward-art.is-chest img, .pass-reward-art.is-capsule img { transform: scale(1.14); }
.pass-reward-art:is(.is-skin, .is-emote, .is-ward, .is-summoner-icon) {
  border-color: rgba(190, 121, 255, .42);
  background: radial-gradient(circle at 50% 35%, rgba(190, 121, 255, .25), rgba(16, 10, 25, .96) 72%);
}
.pass-reward-art:is(.is-skin, .is-emote, .is-ward, .is-summoner-icon) img { width: 25px; height: 25px; }
.pass-reward-art > i, .pass-legend-art::before {
  display: block;
  width: 17px;
  height: 23px;
  border: 1px solid rgba(255,255,255,.6);
  clip-path: polygon(50% 0, 100% 35%, 78% 100%, 22% 100%, 0 35%);
  background: linear-gradient(145deg, #c7f7ff 0 16%, #29c8f2 18% 52%, #1767d0 54% 100%);
  box-shadow: 0 0 12px rgba(74, 210, 255, .58);
}
.pass-reward-art.is-orange-essence > i {
  background: linear-gradient(145deg, #fff0a6 0 16%, #ff9b36 18% 52%, #b53113 54% 100%);
  box-shadow: 0 0 12px rgba(255, 140, 54, .62);
}
.pass-reward-art.is-mythic-essence > i {
  background: linear-gradient(145deg, #fff 0 16%, #d690ff 18% 52%, #7136d7 54% 100%);
  box-shadow: 0 0 14px rgba(190, 121, 255, .72);
}
.pass-reward-art.is-orb > i {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  clip-path: none;
  background: radial-gradient(circle at 36% 30%, #fff 0 7%, #8ff5ff 9% 23%, #2876d7 44%, #4f207d 72%);
}
.pass-reward-art.is-spark > i {
  width: 25px;
  height: 25px;
  clip-path: polygon(50% 0, 61% 36%, 100% 50%, 61% 64%, 50% 100%, 39% 64%, 0 50%, 39% 36%);
  background: linear-gradient(145deg, #fffbd0, #ffbf45 42%, #e64673);
  box-shadow: 0 0 14px rgba(255, 191, 69, .65);
}
.pass-reward-art.is-title > i {
  width: 26px;
  height: 18px;
  border-radius: 2px;
  clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%, 12% 50%);
  background: linear-gradient(90deg, #9f5be8, #efbd62);
}
.pass-reward-art.is-loot > i {
  width: 24px;
  height: 20px;
  border-radius: 3px;
  clip-path: none;
  background: linear-gradient(#48d9e9 0 28%, #253c4b 30% 100%);
}
.pass-legend-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  overflow: hidden;
  border-radius: 5px;
  background: #0b121a;
}
.pass-legend-art::before { width: 10px; height: 15px; content: ""; }
.pass-legend-art.is-orb::before { width: 15px; height: 15px; border-radius: 50%; clip-path: none; background: radial-gradient(circle at 36% 30%, #fff 0 8%, #8ff5ff 10% 23%, #2876d7 45%, #4f207d 72%); }
.pass-legend-art.is-champion::before { width: 15px; height: 15px; border-radius: 50%; clip-path: none; background: linear-gradient(145deg, #b8ffd2, #32c978); }
.pass-legend-art.is-summoner-icon::before { width: 15px; height: 15px; border-radius: 3px; clip-path: none; background: linear-gradient(145deg, #f5d2ff, #9851df); }
.pass-legend-art.is-prestige-champion::before { width: 15px; height: 15px; clip-path: polygon(50% 0, 63% 35%, 100% 50%, 63% 65%, 50% 100%, 37% 65%, 0 50%, 37% 35%); background: linear-gradient(145deg, #fff6bd, #f0bd5d 50%, #9e4e26); }
.pass-legend > button { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 760px) {
  .pass-handover-flow, .pass-champion-rewards { grid-template-columns: 1fr; }
  .pass-stats article { padding-left: 58px; }
  .pass-stats article > i { left: 14px; }
}
.pass-clock > a {
  margin: 12px;
  padding: 11px 15px;
  border: 1px solid rgba(85,215,231,.48);
  border-radius: 999px;
  color: #a6f5ff;
  font-size: .72rem;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}
.pass-clock-zone strong { color: var(--pass-cyan); }
.pass-calendar {
  margin: 12px 0 20px;
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid #303c48;
  border-radius: 7px;
  background: #10161e;
}
.pass-calendar > header { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.pass-calendar h2 { margin: 5px 0 0; font-size: clamp(1.7rem, 3.5vw, 3rem); line-height: 1; }
.pass-calendar > header > strong { color: #ffe1a0; font-size: clamp(1rem, 2vw, 1.5rem); }
.pass-calendar-bar {
  position: relative;
  height: 18px;
  margin-top: 28px;
  border: 1px solid #394653;
  border-radius: 999px;
  background: #080d12;
}
.pass-calendar-bar > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #55d7e7, #ad7ee8 58%, #ff5c72);
  transition: width .6s ease;
}
.pass-calendar-bar > i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 28px;
  height: 28px;
  border: 4px solid #080b10;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--pass-red), 0 0 22px rgba(255,92,114,.7);
  transform: translate(-50%, -50%);
  transition: left .6s ease;
}
.pass-calendar-dates { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 15px; }
.pass-calendar-dates span:nth-child(2) { text-align: center; }
.pass-calendar-dates span:last-child { text-align: right; }
.pass-calendar-dates :is(b, em) { display: block; }
.pass-calendar-dates b { color: #788e99; font-size: .58rem; text-transform: uppercase; }
.pass-calendar-dates em { margin-top: 3px; color: #d4e2e7; font-size: .73rem; font-style: normal; font-weight: 900; }
.pass-calendar > p { margin: 20px 0 0; color: #8499a3; font-size: .72rem; line-height: 1.5; }
.pass-jumps {
  position: sticky;
  top: 68px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0;
  padding: 10px;
  overflow-x: auto;
  border: 1px solid #2a3441;
  border-radius: 7px;
  background: rgba(8,11,16,.94);
}
.pass-jumps :is(span, a) { flex: 0 0 auto; }
.pass-jumps span { padding: 0 10px; color: #7f939e; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.pass-jumps a { padding: 9px 13px; border-radius: 999px; color: #c8d6dc; font-size: .78rem; font-weight: 850; text-decoration: none; }
.pass-jumps a:hover { background: #17212b; color: #fff; }
.pass-milestones {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 24px;
}
.pass-milestones article {
  --milestone: 85,215,231;
  min-width: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  min-height: 150px;
  padding: 20px;
  border: 1px solid rgba(var(--milestone),.38);
  border-top: 3px solid rgb(var(--milestone));
  border-radius: 7px;
  background: rgba(var(--milestone),.075);
}
.pass-milestones article.is-currency { --milestone: 240,189,93; }
.pass-milestones article.is-title { --milestone: 173,126,232; }
.pass-milestones article.is-prestige { --milestone: 255,92,114; }
.pass-milestones article > span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(var(--milestone),.65);
  border-radius: 6px;
  background: rgba(var(--milestone),.14);
  color: rgb(var(--milestone));
  font-size: 1.1rem;
  font-weight: 950;
}
.pass-milestones :is(small, strong) { display: block; }
.pass-milestones small { color: rgb(var(--milestone)); font-size: .61rem; font-weight: 900; text-transform: uppercase; }
.pass-milestones strong { margin-top: 5px; font-size: .82rem; line-height: 1.3; }
.pass-milestones p { margin: 8px 0 0; color: #91a5ae; font-size: .7rem; line-height: 1.45; }
.pass-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
  gap: clamp(30px, 5vw, 74px);
  align-items: center;
  padding: clamp(36px, 6vw, 82px) clamp(24px, 5vw, 70px);
  border-block: 1px solid #28313c;
}
.pass-intro h2, .pass-track h2, .pass-prestige h2, .pass-faq h2, .pass-sources h2 {
  margin: 8px 0 14px;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
}
.pass-intro p { max-width: 720px; color: #aebec5; font-size: 1.02rem; line-height: 1.65; }
.pass-intro ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.pass-intro li { padding: 20px; border-left: 3px solid var(--pass-cyan); background: #101821; }
.pass-intro li:nth-child(2n) { border-color: var(--pass-red); }
.pass-intro li :is(b, span) { display: block; }
.pass-intro li b { font-size: 1.8rem; }
.pass-intro li span { margin-top: 4px; color: #91a6b0; font-size: .7rem; font-weight: 850; text-transform: uppercase; }
.pass-track { padding: clamp(38px, 6vw, 76px) 0; }
.pass-personal-progress {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
  gap: 18px 34px;
  align-items: center;
  margin-bottom: clamp(38px, 6vw, 68px);
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid rgba(85, 215, 231, .38);
  border-top: 3px solid var(--pass-cyan);
  border-radius: 7px;
  background: linear-gradient(110deg, rgba(85, 215, 231, .1), transparent 42%), #0e151e;
}
.pass-personal-copy h2 { margin: 7px 0 10px; font-size: clamp(1.7rem, 3.2vw, 3rem); line-height: 1.02; }
.pass-personal-copy p:last-child { max-width: 670px; margin: 0; color: #9fb1b9; line-height: 1.55; }
.pass-level-picker {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
}
.pass-level-picker > button {
  width: 44px;
  height: 44px;
  border: 1px solid #3a4b59;
  border-radius: 50%;
  background: #111d27;
  color: #bff9ff;
  font: inherit;
  font-size: 1.35rem;
  font-weight: 950;
  cursor: pointer;
}
.pass-level-picker label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  color: #9aadb6;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
}
.pass-level-picker output { color: #fff; font-size: 1.45rem; }
.pass-level-picker input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: var(--pass-cyan);
  cursor: pointer;
}
.pass-level-meter {
  grid-column: 1 / -1;
  height: 8px;
  overflow: hidden;
  border: 1px solid #2d3b47;
  border-radius: 999px;
  background: #090e14;
}
.pass-level-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pass-cyan), var(--pass-gold)); transition: width .25s ease; }
.pass-level-picker > small { grid-column: 1 / -1; color: #80959f; text-align: right; }
.pass-next-unlock {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgba(240, 189, 93, .4);
  border-radius: 6px;
  background: rgba(240, 189, 93, .08);
}
.pass-next-unlock > span {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(240, 189, 93, .65);
  border-radius: 6px;
  background: #2b2113;
  color: #ffe2a1;
  font-size: 1.15rem;
  font-weight: 950;
}
.pass-next-unlock :is(small, strong, em) { display: block; }
.pass-next-unlock small { color: #c49b52; font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.pass-next-unlock strong { margin-top: 3px; overflow-wrap: anywhere; }
.pass-next-unlock em { margin-top: 3px; color: #93a6af; font-size: .68rem; font-style: normal; }
.pass-next-unlock button, .pass-groups-toggle {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid #3b4854;
  border-radius: 999px;
  background: #111821;
  color: #aebdc4;
  font: inherit;
  font-size: .7rem;
  font-weight: 900;
  cursor: pointer;
}
.pass-progress-insights {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.pass-progress-insights article {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid #2c3a46;
  border-radius: 6px;
  background: #0a1118;
}
.pass-progress-insights :is(i, img) {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(85,215,231,.42);
  border-radius: 5px;
  color: var(--pass-cyan);
  font-style: normal;
  object-fit: cover;
}
.pass-progress-insights article:nth-child(2) :is(i, img) { border-color: rgba(240,189,93,.5); color: var(--pass-gold); }
.pass-progress-insights article:nth-child(3) :is(i, img) { border-color: rgba(255,92,114,.5); }
.pass-progress-insights span { min-width: 0; }
.pass-progress-insights :is(small, strong) { display: block; }
.pass-progress-insights small { color: #778d98; font-size: .58rem; font-weight: 900; text-transform: uppercase; }
.pass-progress-insights strong { margin-top: 3px; font-size: .72rem; line-height: 1.35; overflow-wrap: anywhere; }
.pass-pace-planner {
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px solid #30404c;
  border-radius: 7px;
  background: #0a1118;
}
.pass-pace-planner > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.pass-pace-planner > header small { color: var(--pass-cyan); font-size: .6rem; font-weight: 900; text-transform: uppercase; }
.pass-pace-planner h3 { margin: 4px 0 0; font-size: clamp(1.1rem, 2vw, 1.55rem); }
.pass-pace-planner > header a {
  flex: 0 0 auto;
  padding: 10px 14px;
  border: 1px solid rgba(85,215,231,.46);
  border-radius: 999px;
  color: #b6f7ff;
  font-size: .7rem;
  font-weight: 900;
  text-decoration: none;
}
.pass-pace-planner > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 15px;
}
.pass-pace-planner article {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 11px;
  border: 1px solid #293743;
  border-radius: 5px;
  background: #0e1720;
}
.pass-pace-planner article > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(85,215,231,.45);
  border-radius: 5px;
  color: var(--pass-cyan);
  font-size: .65rem;
  font-weight: 950;
}
.pass-pace-planner article :is(small, strong) { display: block; }
.pass-pace-planner article small { color: #778c96; font-size: .55rem; font-weight: 900; text-transform: uppercase; }
.pass-pace-planner article strong { margin-top: 3px; font-size: .72rem; line-height: 1.3; overflow-wrap: anywhere; }
.pass-pace-planner > p { margin: 12px 0 0; color: #71858f; font-size: .68rem; line-height: 1.5; }
.pass-track > header { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 16px; }
.pass-track-tools { display: grid; justify-items: end; gap: 8px; }
.pass-reward-finder {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto auto;
  gap: 9px;
  align-items: end;
  margin: 22px 0 12px;
  padding: 14px;
  border: 1px solid #2e3a46;
  border-radius: 7px;
  background: #0d141c;
}
.pass-reward-finder > label:first-child { min-width: 0; }
.pass-reward-finder > label:first-child span {
  display: block;
  margin-bottom: 6px;
  color: #7f949e;
  font-size: .6rem;
  font-weight: 900;
  text-transform: uppercase;
}
.pass-reward-finder input[type="search"] {
  width: 100%;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid #3a4855;
  border-radius: 5px;
  outline: 0;
  background: #090f16;
  color: #edf5f7;
  font: inherit;
  font-size: .82rem;
}
.pass-reward-finder input[type="search"]:focus { border-color: var(--pass-cyan); box-shadow: 0 0 0 3px rgba(85,215,231,.12); }
.pass-unclaimed-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid #34414d;
  border-radius: 999px;
  color: #aebdc4;
  font-size: .7rem;
  font-weight: 900;
  cursor: pointer;
}
.pass-unclaimed-switch input { width: 17px; height: 17px; accent-color: var(--pass-cyan); }
.pass-reward-finder > button {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(240,189,93,.55);
  border-radius: 999px;
  background: #2a2113;
  color: #ffe1a0;
  font: inherit;
  font-size: .7rem;
  font-weight: 900;
  cursor: pointer;
}
.pass-reward-finder > strong {
  align-self: center;
  min-width: 70px;
  color: #81949e;
  font-size: .68rem;
  text-align: right;
}
.pass-empty-results {
  margin: 12px 0;
  padding: 22px;
  border: 1px dashed #45525e;
  border-radius: 6px;
  background: #0d141c;
  text-align: center;
}
.pass-empty-results :is(strong, span) { display: block; }
.pass-empty-results span { margin-top: 5px; color: #879ba4; font-size: .75rem; }
.pass-filter { display: flex; flex-wrap: wrap; gap: 7px; }
.pass-filter button {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid #34414e;
  border-radius: 999px;
  background: #10161e;
  color: #9db0ba;
  font: inherit;
  font-size: .75rem;
  font-weight: 900;
  cursor: pointer;
}
.pass-filter button.is-active { border-color: var(--pass-gold); background: #2a2113; color: #ffe1a0; }
.pass-track-note { margin: 0 0 20px; color: #91a4ae; line-height: 1.55; }
.pass-legend { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.pass-legend button {
  --legend: 85,215,231;
  padding: 7px 10px;
  border: 1px solid rgba(var(--legend),.38);
  border-radius: 999px;
  background: rgba(var(--legend),.08);
  color: rgb(var(--legend));
  font-family: inherit;
  font-size: .62rem;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}
.pass-legend button.is-active { box-shadow: 0 0 0 2px rgba(var(--legend),.2); background: rgba(var(--legend),.18); color: #fff; }
.pass-legend .is-all { --legend: 150,164,176; }
.pass-legend .is-currency { --legend: 240,189,93; }
.pass-legend .is-champion { --legend: 85,224,138; }
.pass-legend .is-cosmetic { --legend: 173,126,232; }
.pass-legend .is-prestige { --legend: 255,92,114; }
.pass-reward-group { margin-top: 10px; border: 1px solid #2a3440; border-radius: 7px; background: #0d1219; }
.pass-reward-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 22px; cursor: pointer; list-style: none; }
.pass-reward-group > summary::-webkit-details-marker { display: none; }
.pass-reward-group > summary span :is(b, small) { display: block; }
.pass-reward-group > summary b { font-size: 1.05rem; }
.pass-reward-group > summary small, .pass-reward-group > summary em { color: #81959f; font-size: .68rem; font-style: normal; font-weight: 850; text-transform: uppercase; }
.pass-reward-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0 12px 12px; }
.pass-reward {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 86px;
  padding: 13px;
  border: 1px solid #27323e;
  border-left: 3px solid var(--pass-cyan);
  border-radius: 6px;
  background: #111923;
}
.pass-reward[hidden] { display: none; }
.pass-reward.is-claimed { opacity: .62; filter: saturate(.65); }
.pass-reward.is-claimed::after {
  position: absolute;
  top: 7px;
  right: 8px;
  color: #78e8a2;
  content: "✓";
  font-size: .8rem;
  font-weight: 950;
}
.pass-reward.is-next {
  opacity: 1;
  border-color: var(--pass-gold);
  box-shadow: 0 0 0 1px rgba(240,189,93,.3), 0 0 18px rgba(240,189,93,.12);
}
.pass-reward.is-located { animation: pass-located 1.6s ease; }
@keyframes pass-located {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-3px); box-shadow: 0 0 0 3px rgba(240,189,93,.32), 0 0 28px rgba(240,189,93,.28); }
}
.pass-reward.is-paid { border-left-color: var(--pass-gold); background: #181710; }
.pass-reward.is-champion { box-shadow: inset 0 -2px 0 rgba(85,224,138,.5); }
.pass-reward.is-cosmetic { box-shadow: inset 0 -2px 0 rgba(173,126,232,.52); }
.pass-reward.is-currency { box-shadow: inset 0 -2px 0 rgba(240,189,93,.52); }
.pass-reward.is-loot { box-shadow: inset 0 -2px 0 rgba(85,215,231,.45); }
.pass-reward.is-prestige { border-color: var(--pass-red); border-left-width: 3px; background: #241219; }
.pass-level {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(85,215,231,.58);
  border-radius: 6px;
  background: #0c222a;
  color: #99f3ff;
  font-size: 1.05rem;
  font-weight: 950;
}
.pass-reward.is-paid .pass-level { border-color: rgba(240,189,93,.58); background: #2a2113; color: #ffe1a0; }
.pass-reward.is-prestige .pass-level { border-color: var(--pass-red); background: #3a1520; color: #ffb0bc; }
.pass-reward div { min-width: 0; }
.pass-reward div :is(small, strong) { display: block; }
.pass-reward small { color: #7f98a3; font-size: .6rem; font-weight: 900; text-transform: uppercase; }
.pass-reward strong { margin-top: 4px; font-size: .76rem; line-height: 1.3; overflow-wrap: anywhere; }
.pass-prestige {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid rgba(255,92,114,.48);
  border-radius: 7px;
  background: #211219;
}
.pass-prestige img { border: 2px solid var(--pass-red); border-radius: 7px; }
.pass-prestige p:not(.eyebrow) { max-width: 760px; margin: 0; color: #c9b2bb; line-height: 1.6; }
.pass-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 50px 0; }
.pass-split article { padding: clamp(24px, 4vw, 42px); border: 1px solid #2c3743; border-top: 3px solid var(--pass-red); background: #10161e; }
.pass-split article:last-child { border-top-color: var(--pass-gold); }
.pass-split small { color: #8297a1; font-weight: 900; text-transform: uppercase; }
.pass-split h3 { margin: 8px 0 20px; font-size: clamp(1.5rem, 3vw, 2.6rem); }
.pass-split strong { color: #fff; font-size: 1rem; }
.pass-split p { margin: 8px 0 0; color: #95a8b1; line-height: 1.5; }
.pass-faq { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr); gap: 34px; padding: 54px 0; border-top: 1px solid #28323e; }
.pass-faq > header { grid-row: 1 / span 4; }
.pass-faq details { border-bottom: 1px solid #293440; }
.pass-faq summary { padding: 18px 4px; color: #edf4f7; font-weight: 900; cursor: pointer; }
.pass-faq details p { margin: 0; padding: 0 4px 20px; color: #97aab3; line-height: 1.6; }
.pass-sources { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; padding: 38px; border: 1px solid #2c3743; background: #10161e; }
.pass-sources p { max-width: 760px; color: #96a9b2; line-height: 1.55; }
.pass-sources > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
@media (max-width: 1050px) {
  .pass-hero { grid-template-columns: 1fr; min-height: 680px; }
  .pass-hero aside { max-width: 430px; }
  .pass-personal-progress { grid-template-columns: 1fr; }
  .pass-progress-insights { grid-template-columns: 1fr; }
  .pass-pace-planner > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pass-reward-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pass-prestige { grid-template-columns: auto 1fr; }
  .pass-prestige > a { grid-column: 1 / -1; justify-self: start; }
  .pass-clock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pass-clock > div:nth-child(2) { border-right: 0; }
  .pass-clock > div:nth-child(-n+2) { border-bottom: 1px solid #28333e; }
  .pass-clock > a { justify-self: start; }
  .pass-milestones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .battle-pass-page main { width: min(100% - 20px, 1420px); }
  .pass-hero { min-height: 620px; padding: 26px 20px; background-position: 62% 20%; box-shadow: inset 0 -360px 180px -80px #080b10; }
  .pass-hero h1 { font-size: clamp(2.8rem, 14vw, 4.6rem); }
  .pass-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pass-stats article:nth-child(2) { border-right: 0; }
  .pass-stats article:nth-child(-n+2) { border-bottom: 1px solid #28313d; }
  .pass-jumps { top: 58px; }
  .pass-intro, .pass-faq, .pass-sources { grid-template-columns: 1fr; }
  .pass-track > header { align-items: start; flex-direction: column; }
  .pass-track-tools { justify-items: start; width: 100%; }
  .pass-reward-finder { grid-template-columns: minmax(0, 1fr) auto; }
  .pass-reward-finder > label:first-child { grid-column: 1 / -1; }
  .pass-faq > header { grid-row: auto; }
  .pass-sources > div:last-child { justify-content: flex-start; }
  .pass-clock { grid-template-columns: 1fr; }
  .pass-clock > div { border-right: 0; border-bottom: 1px solid #28333e; }
  .pass-clock > div:nth-child(2) { border-right: 0; }
  .pass-calendar > header { align-items: start; flex-direction: column; gap: 10px; }
}
@media (max-width: 520px) {
  .pass-actions a { width: 100%; }
  .pass-reward-grid, .pass-split { grid-template-columns: 1fr; }
  .pass-prestige { grid-template-columns: 1fr; }
  .pass-prestige img { width: 92px; height: 92px; }
  .pass-intro ul { grid-template-columns: 1fr; }
  .pass-milestones { grid-template-columns: 1fr; }
  .pass-reward-group > summary { padding: 16px; }
  .pass-reward-group > summary em { display: none; }
  .pass-calendar-dates b { font-size: .52rem; }
  .pass-calendar-dates em { font-size: .65rem; }
  .pass-personal-progress { padding: 20px 16px; }
  .pass-next-unlock { grid-template-columns: 46px minmax(0, 1fr); }
  .pass-next-unlock > span { width: 44px; height: 44px; }
  .pass-next-unlock button { grid-column: 1 / -1; justify-self: start; }
  .pass-pace-planner > header { align-items: start; flex-direction: column; }
  .pass-pace-planner > div { grid-template-columns: 1fr; }
  .pass-reward-finder { grid-template-columns: 1fr; align-items: stretch; }
  .pass-reward-finder > label:first-child { grid-column: auto; }
  .pass-reward-finder > strong { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .pass-reward.is-located { animation: none; }
  .pass-level-meter span { transition: none; }
}
@media (max-width: 620px) {
  .off-meta-page main {
    width: min(100% - 18px, 1240px);
  }
  .conduct-hero-copy {
    min-height: 430px;
    padding: 170px 20px 24px;
  }
  .conduct-hero h1 {
    font-size: 2.55rem;
  }
  .conduct-lead {
    font-size: 1rem;
  }
  .conduct-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .conduct-verdict {
    margin: 0 10px 10px;
  }
  .conduct-jump {
    margin-bottom: 18px;
  }
  .conduct-proof,
  .conduct-boundary,
  .conduct-response,
  .conduct-faq {
    padding: 22px 18px;
  }
  .conduct-proof > header h2,
  .conduct-boundary > header h2,
  .conduct-faq > header h2 {
    font-size: 1.85rem;
  }
  .conduct-reply small {
    display: block;
    margin: 9px 0 0;
  }
}

/* Off-meta policy reference v3 */
.conduct-source-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 21px;
}
.conduct-source-strip span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 31px;
  padding: 5px 9px;
  border: 1px solid rgba(138, 179, 202, .24);
  border-radius: 5px;
  color: #9fb2c0;
  background: rgba(6, 13, 23, .72);
  font-size: .69rem;
  font-weight: 750;
}
.conduct-source-strip strong {
  color: #eafaff;
}
.conduct-proof > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.conduct-proof article:nth-child(4) {
  border-top-color: var(--conduct-green);
}
.conduct-example,
.conduct-check {
  margin: 26px 0;
  padding: 34px;
  border: 1px solid rgba(139, 174, 196, .2);
  background: #09111b;
}
.conduct-example {
  border-top: 4px solid var(--conduct-gold);
  background:
    linear-gradient(118deg, rgba(243, 201, 95, .07), transparent 32%),
    #0c1119;
}
.conduct-example > header,
.conduct-check > header {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(280px, .4fr);
  gap: 24px;
  align-items: end;
  margin-bottom: 24px;
}
.conduct-example > header .eyebrow,
.conduct-check > header .eyebrow {
  grid-column: 1;
  margin: 0;
}
.conduct-example > header h2,
.conduct-check > header h2 {
  grid-column: 1;
  margin: 4px 0 0;
  color: #f7fbff;
  font-size: 2.35rem;
  line-height: 1.12;
  text-wrap: balance;
}
.conduct-example > header > p,
.conduct-check > header > p {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  color: #a8bac7;
  font-size: .9rem;
  line-height: 1.65;
}
.conduct-example-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}
.conduct-example-grid article {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 19px;
  align-items: center;
  min-width: 0;
  padding: 25px;
  border: 1px solid rgba(98, 224, 166, .3);
  background:
    linear-gradient(135deg, rgba(98, 224, 166, .09), transparent 48%),
    #0b1a18;
}
.conduct-example-grid article.is-disruption {
  border-color: rgba(255, 113, 136, .3);
  background:
    linear-gradient(135deg, rgba(255, 113, 136, .09), transparent 48%),
    #1a1017;
}
.conduct-example-grid img {
  width: 96px;
  height: 96px;
  border: 2px solid var(--conduct-green);
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.conduct-example-grid .is-disruption img {
  border-color: var(--conduct-red);
}
.conduct-example-grid span {
  color: var(--conduct-green);
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
}
.conduct-example-grid .is-disruption span {
  color: #ff91a3;
}
.conduct-example-grid h3 {
  margin: 5px 0 6px;
  color: #fff;
  font-size: 1.55rem;
}
.conduct-example-grid strong {
  display: block;
  color: #e5f5ee;
  font-size: .88rem;
  line-height: 1.45;
}
.conduct-example-grid .is-disruption strong {
  color: #ffe1e7;
}
.conduct-example-grid p {
  margin: 8px 0 0;
  color: #adbfba;
  font-size: .8rem;
  line-height: 1.55;
}
.conduct-example-grid .is-disruption p {
  color: #c5abb1;
}
.conduct-example-divider {
  display: grid;
  place-items: center;
  padding: 8px;
  background: linear-gradient(180deg, rgba(98, 224, 166, .12), rgba(243, 201, 95, .08), rgba(255, 113, 136, .12));
}
.conduct-example-divider span {
  color: #ffe8a3;
  font-size: .68rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}
.conduct-example > aside {
  display: grid;
  grid-template-columns: minmax(260px, auto) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-top: 13px;
  padding: 16px 19px;
  border: 1px solid rgba(243, 201, 95, .28);
  border-left: 5px solid var(--conduct-gold);
  background: #1c190f;
}
.conduct-example > aside strong {
  color: #ffedae;
  font-size: .88rem;
}
.conduct-example > aside p {
  margin: 0;
  color: #c6bea5;
  font-size: .79rem;
  line-height: 1.55;
}
.conduct-check {
  border-top: 4px solid var(--conduct-cyan);
  background:
    linear-gradient(115deg, rgba(85, 230, 239, .07), transparent 32%),
    #08131b;
}
.conduct-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}
.conduct-check-grid label {
  position: relative;
  display: block;
  min-width: 0;
  border: 1px solid rgba(120, 158, 179, .25);
  border-left: 4px solid #425a6b;
  background: #0d1822;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.conduct-check-grid label:hover {
  transform: translateY(-2px);
  border-color: rgba(85, 230, 239, .46);
}
.conduct-check-grid label:has(input:checked) {
  border-color: rgba(98, 224, 166, .5);
  border-left-color: var(--conduct-green);
  background: #0b1c19;
}
.conduct-check-grid input {
  position: absolute;
  top: 19px;
  right: 19px;
  width: 22px;
  height: 22px;
  accent-color: var(--conduct-green);
}
.conduct-check-grid label > span {
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr);
  gap: 4px 13px;
  padding: 18px 52px 18px 18px;
}
.conduct-check-grid .league-step-number {
  grid-row: 1 / span 2;
}
.conduct-check-grid strong {
  color: #eef8fc;
  font-size: .98rem;
  line-height: 1.35;
}
.conduct-check-grid small {
  color: #a8bac4;
  font-size: .78rem;
  line-height: 1.55;
}
.conduct-check-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-top: 13px;
  padding: 15px 17px;
  border: 1px solid rgba(85, 230, 239, .27);
  background: #081820;
}
.conduct-check-result strong {
  color: var(--conduct-cyan);
  font-size: .87rem;
}
.conduct-check-result span {
  color: #a9bbc5;
  font-size: .78rem;
  line-height: 1.5;
}
.conduct-reply-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 11px;
}
.conduct-reply-options article {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(185, 136, 255, .22);
  background: rgba(7, 10, 20, .4);
}
.conduct-reply-options small {
  margin: 0;
  color: #c9a9ff;
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}
.conduct-reply-options blockquote {
  flex: 1;
  margin: 9px 0 14px;
  color: #eee7ff;
  font-size: .82rem;
  line-height: 1.58;
}
.conduct-reply-options button {
  align-self: flex-start;
}
@media (max-width: 900px) {
  .conduct-example > header,
  .conduct-check > header {
    display: block;
  }
  .conduct-example > header > p,
  .conduct-check > header > p {
    margin-top: 12px;
  }
  .conduct-example-grid {
    grid-template-columns: 1fr;
  }
  .conduct-example-divider {
    min-height: 50px;
  }
  .conduct-example > aside {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .conduct-proof > div,
  .conduct-check-grid,
  .conduct-reply-options {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .conduct-example,
  .conduct-check {
    padding: 22px 18px;
  }
  .conduct-example > header h2,
  .conduct-check > header h2 {
    font-size: 1.85rem;
  }
  .conduct-example-grid article {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
  }
  .conduct-example-grid img {
    width: 72px;
    height: 72px;
  }
  .conduct-check-grid label > span {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 16px 48px 16px 15px;
  }
  .conduct-check-result {
    grid-template-columns: 1fr;
  }
  .conduct-source-strip {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* Off-meta authority and non-affiliation */
.conduct-authority {
  margin: 26px 0;
  padding: 34px;
  border: 1px solid rgba(243, 201, 95, .24);
  border-top: 4px solid var(--conduct-gold);
  background:
    linear-gradient(115deg, rgba(243, 201, 95, .08), transparent 34%),
    linear-gradient(300deg, rgba(85, 230, 239, .05), transparent 40%),
    #0d121a;
}
.conduct-authority-heading {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(280px, .4fr);
  gap: 24px;
  align-items: end;
  margin-bottom: 24px;
}
.conduct-authority-heading .eyebrow {
  grid-column: 1;
  margin: 0;
  color: var(--conduct-gold);
}
.conduct-authority-heading h2 {
  grid-column: 1;
  margin: 4px 0 0;
  color: #fff9e9;
  font-size: 2.35rem;
  line-height: 1.12;
  text-wrap: balance;
}
.conduct-authority-heading > p:last-child {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  color: #bdb9ab;
  font-size: .9rem;
  line-height: 1.65;
}
.conduct-authority-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}
.conduct-authority-grid article {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px;
  border: 1px solid rgba(85, 230, 239, .27);
  border-top: 4px solid var(--conduct-cyan);
  background:
    linear-gradient(145deg, rgba(85, 230, 239, .07), transparent 48%),
    #0b1720;
}
.conduct-authority-grid article.is-riot {
  border-color: rgba(243, 201, 95, .3);
  border-top-color: var(--conduct-gold);
  background:
    linear-gradient(145deg, rgba(243, 201, 95, .08), transparent 48%),
    #19170f;
}
.conduct-authority-grid article.is-support {
  border-color: rgba(185, 136, 255, .3);
  border-top-color: var(--conduct-purple);
  background:
    linear-gradient(145deg, rgba(185, 136, 255, .08), transparent 48%),
    #151222;
}
.conduct-authority-grid span {
  display: block;
  margin-bottom: 7px;
  color: var(--conduct-cyan);
  font-size: .69rem;
  font-weight: 900;
  text-transform: uppercase;
}
.conduct-authority-grid .is-riot span {
  color: var(--conduct-gold);
}
.conduct-authority-grid .is-support span {
  color: #c6a2ff;
}
.conduct-authority-grid strong {
  color: #f3f9fc;
  font-size: 1.08rem;
  line-height: 1.35;
}
.conduct-authority-grid p {
  margin: 10px 0 0;
  color: #acbdc7;
  font-size: .82rem;
  line-height: 1.6;
}
.conduct-authority-grid .is-riot p {
  color: #c4bea9;
}
.conduct-authority-grid .is-support p {
  color: #bbb0c9;
}
.conduct-authority-grid a {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 39px;
  margin-top: auto;
  padding: 8px 12px;
  border: 1px solid rgba(185, 136, 255, .5);
  border-radius: 5px;
  color: #eadcff;
  background: rgba(185, 136, 255, .1);
  font-size: .75rem;
  font-weight: 900;
  text-decoration: none;
}
.conduct-authority-grid .is-support p + a {
  margin-top: 17px;
}
.conduct-authority > aside {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  margin-top: 12px;
  padding: 15px 18px;
  border: 1px solid rgba(255, 113, 136, .3);
  border-left: 5px solid var(--conduct-red);
  background: #1a1016;
}
.conduct-authority > aside strong {
  color: #ff9cac;
  font-size: .8rem;
  text-transform: uppercase;
}
.conduct-authority > aside span {
  color: #c9afb5;
  font-size: .79rem;
  line-height: 1.55;
}
@media (max-width: 900px) {
  .conduct-authority-heading {
    display: block;
  }
  .conduct-authority-heading > p:last-child {
    margin-top: 12px;
  }
  .conduct-authority-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .conduct-authority {
    padding: 22px 18px;
  }
  .conduct-authority-heading h2 {
    font-size: 1.85rem;
  }
  .conduct-authority > aside {
    grid-template-columns: 1fr;
  }
}

/* Off-meta Yuumi Jungle example */
.conduct-yuumi {
  margin: 28px 0;
  padding: 34px;
  border: 1px solid rgba(185, 136, 255, .25);
  border-top: 4px solid var(--conduct-purple);
  background:
    linear-gradient(125deg, rgba(185, 136, 255, .09), transparent 34%),
    linear-gradient(310deg, rgba(85, 230, 239, .05), transparent 38%),
    #0d111a;
}
.conduct-yuumi > header {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(320px, .5fr);
  gap: 28px;
  align-items: end;
  margin-bottom: 22px;
}
.conduct-yuumi > header h2 {
  max-width: 780px;
  margin: 4px 0 0;
  color: #f7f0ff;
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  line-height: 1.06;
  text-wrap: balance;
}
.conduct-yuumi > header > p {
  margin: 0;
  color: #b8afc5;
  font-size: .84rem;
  line-height: 1.67;
}
.conduct-yuumi > header > p strong { color: #eadcff; }
.conduct-yuumi-scenarios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.conduct-yuumi-scenarios > article {
  min-width: 0;
  padding: 22px;
  border: 1px solid rgba(85, 230, 239, .24);
  border-top: 4px solid var(--conduct-cyan);
  background: #0a1820;
}
.conduct-yuumi-scenarios > article.is-sabotage {
  border-color: rgba(255, 113, 136, .28);
  border-top-color: var(--conduct-red);
  background: #1a1016;
}
.conduct-yuumi-label {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  margin-bottom: 18px;
}
.conduct-yuumi-label img {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border: 2px solid rgba(85, 230, 239, .55);
  border-radius: 7px;
  object-fit: cover;
}
.conduct-yuumi-label > span:not(.conduct-yuumi-warning) { min-width: 0; }
.conduct-yuumi-label small,
.conduct-yuumi-label strong { display: block; }
.conduct-yuumi-label small {
  color: var(--conduct-cyan);
  font-size: .67rem;
  font-weight: 900;
  text-transform: uppercase;
}
.is-sabotage .conduct-yuumi-label small { color: #ff9cac; }
.conduct-yuumi-label strong {
  margin-top: 4px;
  color: #f2f8fa;
  font-size: 1.05rem;
  line-height: 1.3;
}
.conduct-yuumi-warning {
  display: grid;
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  place-items: center;
  border: 2px solid rgba(255, 113, 136, .62);
  border-radius: 7px;
  color: #ff9cac;
  background: rgba(255, 113, 136, .09);
  font-size: 2.2rem;
  font-weight: 950;
}
.conduct-yuumi ol,
.conduct-yuumi ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.conduct-yuumi ol li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(85, 230, 239, .14);
  background: rgba(5, 13, 18, .48);
}
.conduct-yuumi ol li strong,
.conduct-yuumi ol li small { display: block; }
.conduct-yuumi ol li strong { color: #eaf7f8; font-size: .82rem; }
.conduct-yuumi ol li small {
  margin-top: 4px;
  color: #96abb3;
  font-size: .72rem;
  line-height: 1.5;
}
.conduct-yuumi ul li {
  position: relative;
  padding: 12px 12px 12px 36px;
  border: 1px solid rgba(255, 113, 136, .14);
  color: #c5aeb5;
  background: rgba(11, 5, 8, .42);
  font-size: .75rem;
  line-height: 1.55;
}
.conduct-yuumi ul li::before {
  position: absolute;
  top: 12px;
  left: 13px;
  color: var(--conduct-red);
  content: "x";
  font-weight: 950;
}
.conduct-attach-rule {
  display: grid;
  grid-template-columns: minmax(220px, .36fr) repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
  margin-top: 12px;
  padding: 20px;
  border: 1px solid rgba(85, 230, 239, .3);
  border-left: 5px solid var(--conduct-cyan);
  background:
    linear-gradient(110deg, rgba(85, 230, 239, .09), transparent 40%),
    #0a151d;
}
.conduct-attach-rule span,
.conduct-attach-rule strong { display: block; }
.conduct-attach-rule span {
  color: var(--conduct-cyan);
  font-size: .67rem;
  font-weight: 950;
  text-transform: uppercase;
}
.conduct-attach-rule strong {
  margin-top: 5px;
  color: #eafcff;
  font-size: 1rem;
  line-height: 1.35;
}
.conduct-attach-rule p {
  margin: 0;
  color: #a9bec5;
  font-size: .76rem;
  line-height: 1.65;
}
.conduct-attach-rule p strong {
  display: inline;
  margin: 0;
  color: #dff8fa;
  font-size: inherit;
}
.conduct-evidence-gate {
  display: grid;
  grid-template-columns: minmax(210px, .34fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  margin-top: 12px;
  padding: 18px 20px;
  border: 1px solid rgba(243, 201, 95, .25);
  border-left: 5px solid var(--conduct-gold);
  background: #17160f;
}
.conduct-evidence-gate span,
.conduct-evidence-gate strong { display: block; }
.conduct-evidence-gate span {
  color: var(--conduct-gold);
  font-size: .67rem;
  font-weight: 950;
  text-transform: uppercase;
}
.conduct-evidence-gate strong {
  margin-top: 5px;
  color: #fff5d8;
  font-size: .92rem;
  line-height: 1.3;
}
.conduct-evidence-gate p {
  margin: 0;
  color: #bab49f;
  font-size: .76rem;
  line-height: 1.6;
}
.conduct-yuumi > footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  margin-top: 12px;
  padding: 15px 18px;
  border: 1px solid rgba(185, 136, 255, .24);
  border-left: 5px solid var(--conduct-purple);
  color: #bcb2ca;
  background: #151221;
  font-size: .79rem;
  line-height: 1.55;
}
.conduct-yuumi > footer strong {
  color: #dfc9ff;
  text-transform: uppercase;
}
.conduct-blitz {
  border-color: rgba(57, 200, 212, .32);
  background:
    linear-gradient(145deg, rgba(57, 200, 212, .07), transparent 45%),
    #0a1119;
}
.conduct-blitz > header > p strong,
.conduct-blitz .conduct-yuumi-label small { color: #76e8f0; }
.conduct-blitz .conduct-attach-rule {
  border-color: rgba(214, 169, 63, .28);
  background: rgba(214, 169, 63, .055);
}
@media (max-width: 900px) {
  .conduct-yuumi > header,
  .conduct-yuumi-scenarios,
  .conduct-attach-rule,
  .conduct-evidence-gate { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .conduct-yuumi { padding: 22px 18px; }
  .conduct-yuumi > header h2 { font-size: 1.9rem; }
  .conduct-yuumi-scenarios > article { padding: 17px; }
  .conduct-yuumi-label img,
  .conduct-yuumi-warning {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
  }
  .conduct-yuumi > footer { grid-template-columns: 1fr; }
}

.counter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.counter-card {
  display: grid;
  grid-template-columns: auto 72px minmax(0, 1fr);
  gap: 12px;
  align-content: start;
  padding: 16px;
  border: 1px solid rgba(151, 171, 212, .18);
  background: #0b111b;
}
.counter-rank { display: grid; align-content: start; justify-items: center; gap: 4px; }
.counter-rank span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #061117; background: var(--cyan); font-weight: 950; }
.counter-rank small { color: #8291a7; font-size: .62rem; writing-mode: vertical-rl; }
.counter-rank.unranked { align-content: start; justify-items: start; min-width: 52px; padding-top: 2px; }
.counter-rank.unranked strong { color: #b8c7d1; font-size: .67rem; text-transform: uppercase; }
.counter-rank.unranked small { color: #6f8393; font-size: .6rem; writing-mode: horizontal-tb; }
.counter-timing { display: grid; gap: 7px; margin-top: 12px; padding: 11px 12px 12px; border: 1px solid rgba(151, 171, 212, .14); border-left: 3px solid rgba(57, 200, 212, .55); background: linear-gradient(110deg, rgba(57, 200, 212, .055), transparent 58%), #070c13; }
.counter-timing-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.counter-timing-heading span,
.counter-timing-heading strong { display: block; }
.counter-timing-heading span { color: #718499; font-size: .57rem; font-weight: 900; text-transform: uppercase; }
.counter-timing-heading strong { color: #e9f1f5; font-size: .72rem; }
.counter-timing-track { position: relative; height: 7px; overflow: hidden; border: 1px solid rgba(151, 171, 212, .12); border-radius: 999px; background: #111b25; }
.counter-timing-track > span { position: absolute; inset-block: 0; left: 0; border-radius: inherit; box-shadow: 0 0 12px rgba(57, 200, 212, .34); }
.counter-timing-track > i { position: absolute; inset-block: 0; left: 33.333%; width: 1px; background: rgba(7, 12, 19, .75); }
.counter-timing-track > i:last-child { left: 66.666%; }
.counter-timing[data-window="early-mid"] .counter-timing-track > span { width: 72%; background: linear-gradient(90deg, #e2ac49 0%, #39c8d4 72%, rgba(57, 200, 212, 0) 100%); }
.counter-timing[data-window="mid"] .counter-timing-track > span { left: 28%; width: 44%; background: linear-gradient(90deg, transparent, #39c8d4 25%, #39c8d4 75%, transparent); }
.counter-timing[data-window="mid-late"] .counter-timing-track > span { left: 28%; width: 72%; background: linear-gradient(90deg, transparent, #39c8d4 22%, #4fe6a6 100%); }
.counter-timing[data-window="late"] .counter-timing-track > span { left: 62%; width: 38%; background: linear-gradient(90deg, transparent, #4fe6a6 28%); }
.counter-timing[data-window="all"] .counter-timing-track > span { width: 100%; background: linear-gradient(90deg, #e2ac49, #39c8d4 50%, #4fe6a6); }
.counter-timing ol { display: grid; grid-template-columns: repeat(3, 1fr); margin: -2px 0 0; padding: 0; list-style: none; }
.counter-timing li { color: #526577; font-size: .57rem; font-weight: 850; text-align: center; transition: color .2s ease; }
.counter-timing li:first-child { text-align: left; }
.counter-timing li:last-child { text-align: right; }
.counter-timing[data-window="early-mid"] li.early,
.counter-timing[data-window="early-mid"] li.mid,
.counter-timing[data-window="mid"] li.mid,
.counter-timing[data-window="mid-late"] li.mid,
.counter-timing[data-window="mid-late"] li.late,
.counter-timing[data-window="late"] li.late,
.counter-timing[data-window="all"] li { color: #bff8fc; }
.counter-timing > p { margin: 1px 0 0; color: #8fa0af; font-size: .65rem; line-height: 1.45; }
.counter-card > img { width: 72px; height: 72px; border: 1px solid rgba(255, 255, 255, .16); }
.counter-card-copy { grid-column: 3; }
.counter-evidence { display: inline-flex; width: fit-content; margin: 0 0 7px; padding: 4px 8px; border: 1px solid rgba(151, 171, 212, .2); border-radius: 999px; color: #9facbf; background: rgba(151, 171, 212, .07); font-size: .61rem; font-weight: 900; text-transform: uppercase; }
.counter-evidence.reviewed { border-color: rgba(79, 230, 166, .3); color: #78efb9; background: rgba(79, 230, 166, .08); }
.counter-evidence.general { border-color: rgba(216, 154, 61, .3); color: #f1d495; background: rgba(216, 154, 61, .08); }
.counter-card h3 { margin: 0; color: #f3f7fd; font-size: 1.18rem; }
.counter-card-copy > strong { display: block; margin-top: 4px; color: #4fe6a6; font-size: .78rem; }
.counter-card-copy p { margin: 7px 0 0; color: #aebbd0; font-size: .79rem; line-height: 1.5; }
.counter-reciprocal { margin-top: 11px; padding: 10px 11px; border-left: 3px solid #d89a3d; background: rgba(216, 154, 61, .07); }
.counter-reciprocal > strong { display: block; color: #f1d495; font-size: .64rem; text-transform: uppercase; }
.counter-reciprocal > p { margin-top: 4px; color: #b7c3ce; font-size: .68rem; line-height: 1.45; }
.counter-build { grid-column: 1/-1; display: grid; grid-template-columns: 1fr; gap: 6px; padding: 10px; border: 1px solid rgba(151, 171, 212, .13); background: #080d14; }
.counter-build > span { color: #8291a7; font-size: .66rem; font-weight: 850; text-transform: uppercase; }
.counter-build > div { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; }
.counter-build img { width: 34px; height: 34px; }
.counter-build small { color: #c6d3e5; font-size: .74rem; }
.counter-build p { margin: 3px 0 0; color: #8291a7; font-size: .7rem; line-height: 1.4; }
.counter-guide-link { grid-column: 1/-1; justify-self: start; min-height: 38px; padding: 7px 13px; }
.counter-empty { padding: 24px; border: 1px solid rgba(151, 171, 212, .18); background: #0b111b; }
.counter-empty strong { color: #f1f5fb; }
.counter-empty p { color: #aebbd0; line-height: 1.5; }
@media (max-width: 900px) {
  .counter-grid { grid-template-columns: 1fr; }
  .counter-card { grid-template-columns: auto 72px minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .build-opening-checklist { grid-template-columns: 1fr; }
  .build-opening-set-title { grid-template-columns: 1fr; }
  .build-opening-set-title p { grid-column: 1; }
  .support-quest-path ol { grid-template-columns: 1fr; }
  .support-quest-arrow { top: auto; right: 50%; bottom: -12px; transform: translateX(50%) rotate(90deg); }
  .duo-lane-fields { grid-template-columns: 1fr; }
  .duo-lane-versus { height: auto; align-self: center; }
  .duo-target-plan { grid-template-columns: 1fr; }
}

/* Team composition builder */
.teams-main { width: min(1260px, calc(100% - 32px)); }
.teams-hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr); gap: 28px; align-items: end; min-height: 270px; padding: 42px; border-bottom: 3px solid var(--gold); background: linear-gradient(105deg, rgba(8, 14, 22, .97), rgba(12, 27, 31, .88)), url('/league/champion/orianna/splash.jpg') center 34%/cover; }
.teams-hero h1 { max-width: 760px; margin: 0; font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: .98; }
.teams-hero > div:first-child > p:last-child { max-width: 700px; margin: 15px 0 0; color: #d4dee4; font-size: 1rem; line-height: 1.55; }
.teams-hero-note { padding: 17px; border: 1px solid rgba(216, 169, 63, .3); background: rgba(3, 8, 12, .82); }
.teams-hero-note strong,
.teams-hero-note span { display: block; }
.teams-hero-note strong { color: #f2d68c; font-size: .82rem; }
.teams-hero-note p { margin: 6px 0 12px; color: #aebbc7; font-size: .76rem; line-height: 1.45; }
.teams-hero-note span { color: var(--cyan); font-size: .68rem; font-weight: 850; text-transform: uppercase; }
.team-presets,
.team-builder { padding: 28px 0; border-bottom: 1px solid var(--line); }
.team-presets .section-heading,
.team-builder .section-heading { align-items: end; }
.team-presets .section-heading h2,
.team-builder .section-heading h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.35rem); }
.team-presets .section-heading > span { color: #8ea1b1; font-size: .75rem; font-weight: 800; }
.team-builder .section-heading p { margin: 6px 0 0; color: var(--muted); }
.team-preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.team-preset-card { display: grid; gap: 14px; padding: 17px; border: 1px solid rgba(151, 171, 212, .18); background: #0c131c; }
.team-preset-card.featured { border-color: rgba(57, 200, 212, .48); box-shadow: inset 4px 0 var(--cyan); background: #0d1b22; }
.team-preset-card.is-loaded { border-color: rgba(69, 196, 134, .64); box-shadow: inset 4px 0 var(--green), 0 0 0 1px rgba(69, 196, 134, .08); }
.team-preset-card.is-loaded.featured { box-shadow: inset 4px 0 var(--green), 0 0 26px rgba(69, 196, 134, .08); }
.team-preset-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.team-preset-copy span { color: #f4f8fc; font-size: 1rem; font-weight: 900; }
.team-preset-copy .team-preset-badge { padding: 4px 8px; border: 1px solid rgba(57, 200, 212, .42); border-radius: 999px; color: #8cebf0; background: rgba(57, 200, 212, .09); font-size: .62rem; text-transform: uppercase; }
.team-preset-copy p { flex-basis: 100%; margin: 5px 0 0; color: #9facbc; font-size: .78rem; line-height: 1.5; }
.team-five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.team-five > div { display: grid; justify-items: center; gap: 5px; min-width: 0; padding: 8px 4px; border: 1px solid rgba(151, 171, 212, .13); background: #070c13; text-align: center; }
.team-five small { color: #72859a; font-size: .58rem; font-weight: 900; text-transform: uppercase; }
.team-five img { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .16); }
.team-five strong { max-width: 100%; overflow: hidden; color: #e9f1f7; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.team-five em { max-width: 100%; overflow: hidden; color: #77dfe7; font-size: .58rem; font-style: normal; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.team-strengths { display: flex; flex-wrap: wrap; gap: 6px; }
.team-strengths span { padding: 5px 8px; border: 1px solid rgba(69, 196, 134, .24); border-radius: 999px; color: #79dbaa; background: rgba(69, 196, 134, .06); font-size: .64rem; font-weight: 800; }
.team-watch { margin: 0; padding: 10px; border-left: 3px solid #d6a93f; color: #aeb9c7; background: rgba(214, 169, 63, .045); font-size: .72rem; line-height: 1.45; }
.team-watch b { color: #e9d49f; }
.team-use-preset,
.team-reset { justify-self: start; min-height: 38px; padding: 8px 13px; border: 1px solid var(--cyan); border-radius: 999px; color: #061117; background: var(--cyan); font: inherit; font-size: .7rem; font-weight: 900; cursor: pointer; }
.team-reset { justify-self: end; border-color: rgba(151, 171, 212, .3); color: #dce8ef; background: #111a24; }
.team-role-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin-top: 18px; }
.team-role-field { display: grid; min-width: 0; gap: 7px; padding: 12px; border: 1px solid rgba(151, 171, 212, .18); background: #0b121a; }
.team-role-field > label { margin-bottom: 0; color: var(--cyan); }
.team-role-field .champion-input-shell { width: 100%; background: #070c12; }
.team-role-field .champion-menu { top: calc(100% - 26px); }
.team-role-field > small { min-height: 1.2em; overflow: hidden; color: #778a9c; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.team-analysis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.team-analysis article { padding: 13px; border: 1px solid rgba(151, 171, 212, .17); border-top: 3px solid #526478; background: #080e15; }
.team-analysis article.good { border-top-color: var(--green); }
.team-analysis article.warn { border-top-color: #e4ad48; }
.team-analysis span,
.team-analysis strong { display: block; }
.team-analysis span { color: #7f91a3; font-size: .61rem; font-weight: 900; text-transform: uppercase; }
.team-analysis strong { margin-top: 5px; color: #edf5f8; font-size: .82rem; }
.team-analysis p { margin: 5px 0 0; color: #8fa0b0; font-size: .68rem; line-height: 1.4; }
.team-plan-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .65fr); gap: 14px; margin-top: 12px; padding: 16px; border: 1px solid rgba(57, 200, 212, .22); background: rgba(57, 200, 212, .045); }
.team-plan-summary span,
.team-plan-summary strong { display: block; }
.team-plan-summary span { color: var(--cyan); font-size: .63rem; font-weight: 900; text-transform: uppercase; }
.team-plan-summary strong { margin-top: 4px; font-size: 1rem; }
.team-plan-summary p { margin: 5px 0 0; color: #9babb9; font-size: .74rem; line-height: 1.45; }
.team-guide-links { display: flex; flex-wrap: wrap; gap: 6px; align-content: center; justify-content: flex-end; }
.team-guide-links a { padding: 6px 9px; border: 1px solid rgba(151, 171, 212, .25); border-radius: 999px; color: #dbe7ed; background: #0b121a; font-size: .65rem; font-weight: 800; text-decoration: none; }
.team-guide-links a:hover { border-color: var(--cyan); color: #fff; }
@media (max-width: 900px) {
  .teams-hero { grid-template-columns: 1fr; min-height: 0; padding: 30px 24px; }
  .team-preset-grid { grid-template-columns: 1fr; }
  .team-role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-analysis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-plan-summary { grid-template-columns: 1fr; }
  .team-guide-links { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .counter-scope { grid-template-columns: 1fr; }
  .counter-lane-warning { align-items: stretch; flex-direction: column; }
  .counter-lane-warning > div:last-child { justify-content: flex-start; }
  .teams-main { width: min(100% - 20px, 1260px); }
  .teams-hero { padding: 24px 16px; }
  .team-role-grid,
  .team-analysis { grid-template-columns: 1fr; }
  .team-preset-card { padding: 12px; }
  .team-five { gap: 3px; }
  .team-five > div { padding: 6px 2px; }
  .team-five img { width: 38px; height: 38px; }
  .team-five strong { font-size: .58rem; }
}
@media (max-width: 900px) {
  .build-overview { grid-template-columns: 1fr; }
  .build-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alternative-grid { grid-template-columns: 1fr; }
  .build-guidance { grid-template-columns: 1fr; }
  .matchup-build-view { grid-template-columns: 1fr; }
  .role-fit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .matchup-fields {
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
  }
  .matchup-fields button {
    grid-column: 1/-1;
  }
  .lookup-shell {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .lookup-form {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr) minmax(0, 1fr);
  }
  .lookup-actions {
    grid-column: 1/-1;
  }
  .lookup-actions button {
    flex: 1;
  }
  .lookup-form button {
    grid-column: 1/-1;
  }
  .status {
    grid-column: 1;
  }
  .match-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 720px) and (min-width: 621px) {
  .lookup-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, .7fr);
  }
  .lookup-form label:nth-child(3) {
    grid-column: 1/-1;
  }
}
@media (max-width: 620px) {
  .champion-playbook { padding: 17px; }
  .playbook-header { grid-template-columns: 1fr; gap: 12px; align-items: start; }
  .playbook-review-badge { justify-self: start; }
  .playbook-state { padding: 12px; }
  .playbook-state-heading { align-items: flex-start; flex-direction: column; }
  .playbook-state-switch { width: 100%; }
  .playbook-grid { grid-template-columns: 1fr; }
  .playbook-phases { grid-template-columns: 1fr; }
  .combo-guide { padding: 17px; }
  .ability-key-map { grid-template-columns: 1fr; }
  .ability-key-map > div { grid-template-columns: 30px 34px minmax(0, 1fr); padding: 9px; }
  .combo-grid { grid-template-columns: 1fr; }
  .combo-title { align-items: flex-start; flex-direction: column; }
  .picker-feedback { align-items: flex-start; flex-direction: column; }
  .starter-build { padding: 17px; }
  .build-intro { grid-template-columns: 1fr; }
  .build-confidence { justify-self: start; }
  .build-items { grid-template-columns: 1fr; }
  .build-mode-switch { display: grid; width: 100%; }
  .build-mode-switch button { min-width: 0; }
  .build-sequence { grid-template-columns: 1fr; margin-right: 0; }
  .build-tracker { grid-template-columns: 1fr; }
  .build-tracker-actions { justify-content: space-between; }
  .build-progress-bar { grid-column: 1; }
  .build-problem-heading { grid-template-columns: 1fr; }
  .build-counter-tray { grid-template-columns: 1fr; }
  .build-counter-step { grid-template-columns: auto 42px minmax(0, 1fr) auto; }
  .counter-main { width: min(100% - 20px, 1180px); margin-top: 10px; }
  .counter-hero { min-height: 390px; }
  .counter-hero > img { object-position: center top; }
  .counter-hero .hero-shade { background: linear-gradient(0deg, rgba(5, 9, 15, .995) 0%, rgba(5, 9, 15, .95) 31%, rgba(5, 9, 15, .48) 58%, rgba(5, 9, 15, .06) 78%); }
  .counter-hero .hero-copy { padding: 18px 18px 34px; }
  .counter-hero h1 { font-size: clamp(2rem, 10vw, 2.7rem); }
  .counter-picker { grid-template-columns: 1fr; margin: -18px 10px 0; }
  .counter-picker-status { grid-column: 1; }
  .counter-card { grid-template-columns: auto 58px minmax(0, 1fr); padding: 13px; }
  .counter-card > img { width: 58px; height: 58px; }
  .build-problem-buttons { display: grid; grid-template-columns: 1fr 1fr; }
  .build-subheading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .role-fit .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .role-fit .section-heading > span {
    line-height: 1.4;
  }
  .topbar { height: 58px; padding-inline: 14px; }
  .brand { font-size: 18px; }
  .topbar nav { gap: 11px; }
  .topbar nav a { font-size: 12px; }
  .nav-wide { display: none; }
  .nav-short { display: inline; }
  .guide-jumps {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 12px;
    scrollbar-width: thin;
  }
  .guide-jumps span,
  .guide-jumps a { flex: 0 0 auto; }
  .picker-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  main {
    width: min(100% - 24px, 1180px);
    padding-top: 12px;
  }
  .league-hero {
    height: 220px;
    margin: 0 -12px;
  }
  .guide-main {
    padding-top: 12px;
  }
  .guide-hero {
    height: 240px;
    margin: 0 -12px;
  }
  .champion-pair,
  .guide-tips,
  .ability-compare {
    grid-template-columns: 1fr;
  }
  .win-rate-note {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .role-fit-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ability-compare > .section-heading {
    grid-column: auto;
  }
  .matchup-fields {
    grid-template-columns: 1fr;
  }
  .matchup-attack-types { grid-template-columns: 1fr; }
  .matchup-attack-types > span { display: none; }
  .champion-field > label small { font-size: 11px; }
  .champion-menu { max-height: 290px; }
  .versus-mark {
    display: none;
  }
  .matchup-fields button {
    grid-column: auto;
    width: 100%;
  }
  .selected-role-verdict {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .wrong-role-build {
    align-items: stretch;
    flex-direction: column;
  }
  .off-meta-trigger { width: 100%; }
  .role-warning-dialog form { padding: 22px 18px; }
  .role-warning-actions { flex-direction: column-reverse; }
  .role-warning-actions button { width: 100%; }
  .champion-summary {
    align-items: flex-start;
  }
  .champion-summary img {
    width: 72px;
    height: 72px;
  }
  .hero-copy {
    padding: 20px 24px;
  }
  .hero-shade {
    background: linear-gradient(
      90deg,
      rgba(4, 9, 13, 0.9),
      rgba(4, 9, 13, 0.28)
    );
  }
  .lookup-shell {
    padding-top: 24px;
  }
  .lookup-form,
  .result-grid {
    grid-template-columns: 1fr;
  }
  .lookup-actions {
    grid-column: auto;
  }
  .lookup-actions button {
    min-width: 0;
    padding-inline: 10px;
  }
  .lookup-form button {
    grid-column: auto;
  }
  .match-list {
    grid-template-columns: 1fr;
  }
  .next-work {
    align-items: stretch;
    flex-direction: column;
  }
  .next-work a {
    width: 100%;
  }
  .next-work-actions { justify-content: stretch; }
  .profile-band h2 {
    font-size: 23px;
  }
  .stack article {
    grid-template-columns: 1fr auto;
  }
  .stack article small {
    grid-column: 1/-1;
  }
  .legal-page {
    padding-top: 24px;
  }
  .legal-page h1 {
    font-size: 34px;
  }
}

/* v39: beginner glossary */
.glossary-main {
  width: min(1180px, calc(100% - 32px));
  margin: 26px auto 64px;
}

.glossary-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
  min-height: 300px;
  padding: clamp(28px, 5vw, 64px);
  overflow: hidden;
  border: 1px solid rgba(151, 171, 212, .22);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(5, 10, 18, .97), rgba(5, 10, 18, .78)),
    url('/league/assets/vex-social-20260718.jpg') center 34% / cover;
}

.glossary-hero h1 {
  max-width: 760px;
  margin: 4px 0 12px;
  color: #fff;
  font-size: clamp(2.35rem, 6vw, 5rem);
  line-height: .96;
  letter-spacing: 0;
  text-wrap: balance;
}

.glossary-hero > div > p:last-child {
  max-width: 650px;
  margin: 0;
  color: #c1ceda;
  font-size: 1.05rem;
}

.glossary-hero aside {
  display: grid;
  min-width: 180px;
  padding: 20px;
  border: 1px solid rgba(57, 200, 212, .28);
  border-radius: 7px;
  background: rgba(5, 12, 20, .86);
}

.glossary-hero aside strong { color: var(--cyan); font-size: 2rem; }
.glossary-hero aside span { color: #aebdca; font-size: .78rem; font-weight: 800; }
.glossary-hero aside a {
  margin-top: 16px;
  color: #071217;
  font-size: .76rem;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  padding: 9px 13px;
  border-radius: 999px;
  background: var(--cyan);
}

.glossary-tools {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 20px;
  border: 1px solid rgba(151, 171, 212, .2);
  border-radius: 8px;
  background: #09111b;
}

.glossary-tools label { display: grid; gap: 8px; }
.glossary-tools label span { color: #f4f8fb; font-size: .82rem; font-weight: 900; }
.glossary-tools input {
  width: 100%;
  min-height: 48px;
  padding: 0 15px;
  border: 1px solid rgba(151, 171, 212, .3);
  border-radius: 6px;
  color: #fff;
  background: #030810;
  font: inherit;
}
.glossary-tools input:focus { outline: 2px solid rgba(57, 200, 212, .55); border-color: var(--cyan); }
.glossary-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.glossary-filters button {
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid rgba(151, 171, 212, .28);
  border-radius: 999px;
  color: #cbd7e0;
  background: #101b25;
  font: 800 .75rem/1 system-ui, sans-serif;
  cursor: pointer;
}
.glossary-filters button:is(:hover, :focus-visible) { border-color: var(--cyan); color: #fff; }
.glossary-filters button.active { border-color: var(--cyan); color: #061117; background: var(--cyan); }
.glossary-tools > p { margin: 0; color: #8fa2b2; font-size: .78rem; }

.glossary-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-top: 24px;
}

.glossary-quick {
  position: sticky;
  top: 82px;
  display: grid;
  gap: 5px;
  padding: 16px;
  border-left: 3px solid var(--gold);
  background: #09111b;
}
.glossary-quick strong { margin-bottom: 7px; color: #fff; font-size: .78rem; text-transform: uppercase; }
.glossary-quick a { padding: 6px 0; color: #aebdca; font-size: .82rem; font-weight: 750; text-decoration: none; }
.glossary-quick a:is(:hover, :focus-visible) { color: var(--cyan); }
.glossary-groups { display: grid; gap: 30px; min-width: 0; }
.glossary-group { scroll-margin-top: 80px; }
.glossary-group .section-heading { margin-bottom: 12px; }
.glossary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.glossary-grid article {
  scroll-margin-top: 90px;
  padding: 18px;
  border: 1px solid rgba(151, 171, 212, .18);
  border-left: 3px solid rgba(57, 200, 212, .48);
  border-radius: 6px;
  background: #09111b;
}
.glossary-grid article.linked-term,
.glossary-grid article:target { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(214, 169, 63, .25); }
.glossary-grid article > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.glossary-grid h3 { margin: 0; color: #fff; font-size: 1.02rem; }
.glossary-grid article > div a { color: #617486; text-decoration: none; }
.glossary-grid article > div a:hover { color: var(--cyan); }
.glossary-grid p { margin: 9px 0 13px; color: #becbd5; font-size: .88rem; line-height: 1.55; }
.glossary-grid small { color: #74899b; font-size: .72rem; }
.glossary-empty { padding: 30px; border: 1px dashed #405164; color: #aebdca; text-align: center; }

@media (max-width: 760px) {
  .topbar {
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 8px 10px 7px;
  }
  .brand { padding-left: 6px; }
  .topbar nav {
    width: 100%;
    min-width: 0;
    justify-content: space-between;
    gap: 2px;
    overflow: visible;
  }
  .topbar nav > a,
  .league-nav-more > summary {
    min-height: 32px;
    padding: 0 7px;
    font-size: 11px;
  }
  .league-nav-more > summary::after { margin-left: 4px; }
  .league-nav-more > div { right: 0; z-index: 60; }
  .glossary-main { width: min(100% - 20px, 1180px); margin-top: 12px; }
  .glossary-hero { grid-template-columns: 1fr; min-height: 360px; padding: 24px; }
  .glossary-hero aside { min-width: 0; }
  .glossary-layout { grid-template-columns: 1fr; }
  .glossary-quick { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 0; border-top: 3px solid var(--gold); }
  .glossary-quick strong { grid-column: 1 / -1; }
  .glossary-grid { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .topbar nav > a,
  .league-nav-more > summary { padding-inline: 5px; font-size: 10px; }
}

@media (max-width: 440px) {
  .glossary-hero h1 { font-size: 2.4rem; }
  .glossary-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glossary-tools, .glossary-grid article { padding: 15px; }
}

/* Fast two-sided champion-select board. */
.draft-main { width: min(1320px, calc(100% - 32px)); }
.draft-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); gap: 24px; align-items: end; min-height: 190px; padding: 28px 34px; border-bottom: 3px solid #42dbe9; background: linear-gradient(105deg, rgba(5, 11, 18, .97), rgba(10, 30, 38, .88)), url('/league/champion/vex/splash.jpg') center 35%/cover; }
.draft-hero h1 { max-width: 820px; margin: 5px 0 9px; color: #f7fbff; font-size: clamp(2.15rem, 4vw, 3.55rem); line-height: 1.03; }
.draft-hero > div > p:last-child { max-width: 760px; margin: 0; color: #b7c6d5; line-height: 1.65; }
.draft-hero aside { padding: 17px; border: 1px solid rgba(70, 220, 234, .32); border-radius: 7px; background: rgba(5, 12, 20, .9); }
.draft-hero aside strong,.draft-hero aside span { display: block; }
.draft-hero aside strong { color: #81edf5; }
.draft-hero aside p { margin: 7px 0 12px; color: #94a7b9; font-size: .72rem; line-height: 1.55; }
.draft-hero aside span { color: #d9e7f1; font-size: .64rem; font-weight: 900; text-transform: uppercase; }
.draft-workspace { display: grid; gap: 12px; margin: 16px 0 42px; }
.draft-toolbar { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 13px 16px; border: 1px solid rgba(145,167,194,.18); border-radius: 7px; background: #09121c; }
.draft-toolbar strong,.draft-toolbar span { display: block; }
.draft-toolbar strong { color: #eef7fc; }
.draft-toolbar span { margin-top: 3px; color: #8295a8; font-size: .65rem; }
.draft-toolbar-actions { display: flex; gap: 14px; align-items: end; }
.draft-toolbar-group > span { margin: 0 0 5px 4px; color: #6f8498; font-size: .55rem; font-weight: 900; text-transform: uppercase; }
.draft-toolbar-group > div { display: flex; gap: 5px; }
.draft-view-switch { display: flex; gap: 2px; padding: 2px; border: 1px solid rgba(145,167,194,.19); border-radius: 999px; background: #050b12; }
.draft-view-switch button { min-height: 30px; border-color: transparent; background: transparent; }
.draft-view-switch button[aria-pressed="true"] { border-color: rgba(72,219,233,.43); color: #e5fdff; background: rgba(72,219,233,.16); }
.draft-toolbar button,.draft-inference-control > button,.draft-recommend-grid button { min-height: 36px; padding: 7px 12px; border: 1px solid rgba(72,219,233,.43); border-radius: 999px; color: #dffcff; background: rgba(72,219,233,.11); font: inherit; font-size: .66rem; font-weight: 900; cursor: pointer; }
.draft-toolbar button.is-secondary { border-color: rgba(145,167,194,.28); color: #b8c6d4; background: rgba(145,167,194,.06); }
.draft-toolbar button:is(:hover,:focus-visible),.draft-inference-control > button:is(:hover,:focus-visible),.draft-recommend-grid button:is(:hover,:focus-visible) { outline: 0; border-color: #76edf5; background: rgba(72,219,233,.2); }
.draft-inference { display: grid; grid-template-columns: minmax(240px,.62fr) minmax(520px,1.38fr); gap: 18px 22px; align-items: end; padding: 18px; border: 1px solid rgba(229,177,71,.28); border-left: 4px solid #e5b147; border-radius: 7px; background: linear-gradient(100deg,rgba(229,177,71,.06),#09121c 46%); }
.draft-inference h2 { margin: 4px 0 7px; color: #f1f7fc; }
.draft-inference p { margin: 0; color: #91a4b7; font-size: .72rem; line-height: 1.55; }
.draft-inference-control { position: relative; display: grid; grid-template-columns: 112px minmax(150px,1fr) 116px auto; gap: 7px; align-items: end; }
.draft-inference-control label span { display: block; margin-bottom: 6px; color: #b9c7d4; font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.draft-inference-control input,.draft-inference-control select,.draft-recommendations select { box-sizing: border-box; width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid rgba(145,167,194,.3); border-radius: 6px; color: #eef7fc; background: #050b12; font: inherit; }
.draft-inference-menu { position: absolute; z-index: 20; top: calc(100% + 5px); right: 0; left: 0; max-height: 330px; overflow: auto; padding: 5px; border: 1px solid rgba(145,167,194,.3); border-radius: 6px; background: #080f18; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.draft-inference-menu button,.draft-picker-menu button { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 9px; align-items: center; width: 100%; padding: 7px; border: 0; border-radius: 5px; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.draft-inference-menu button:hover,.draft-picker-menu button:hover { background: rgba(72,219,233,.1); }
.draft-inference-menu img,.draft-picker-menu img { width: 38px; height: 38px; border-radius: 5px; }
.draft-inference-menu strong,.draft-inference-menu small,.draft-picker-menu strong,.draft-picker-menu small { display: block; }
.draft-inference-menu strong,.draft-picker-menu strong { color: #eef7fc; font-size: .72rem; }
.draft-inference-menu small,.draft-picker-menu small { margin-top: 2px; color: #8295a8; font-size: .58rem; }
.draft-inference output { grid-column: 1/-1; display: flex; gap: 10px; align-items: center; min-height: 42px; padding: 9px 11px; border: 1px solid rgba(229,177,71,.19); border-radius: 6px; color: #aebdca; background: rgba(0,0,0,.16); font-size: .67rem; }
.draft-inference output img { width: 38px; height: 38px; border-radius: 5px; }
.draft-inference output strong,.draft-inference output small { display: block; }
.draft-inference output strong { color: #f7deb0; font-size: .74rem; }
.draft-inference output small { margin-top: 3px; color: #9eacb9; }
.draft-next-locks { grid-column: 1/-1; display: grid; grid-template-columns: minmax(170px,.4fr) minmax(0,1fr); gap: 12px; align-items: center; padding-top: 2px; }
.draft-next-locks > div:first-child span,.draft-next-locks > div:first-child small { display: block; }
.draft-next-locks > div:first-child span { color: #f1f7fc; font-size: .69rem; font-weight: 900; text-transform: uppercase; }
.draft-next-locks > div:first-child small { margin-top: 3px; color: #7f92a5; font-size: .58rem; line-height: 1.4; }
.draft-next-locks [data-next-locks] { display: flex; gap: 7px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.draft-next-locks button { display: grid; grid-template-columns: 34px minmax(76px,1fr); gap: 7px; align-items: center; min-width: 132px; padding: 6px 9px; border: 1px solid rgba(72,219,233,.25); border-radius: 6px; color: inherit; background: rgba(72,219,233,.07); text-align: left; cursor: pointer; }
.draft-next-locks button:is(:hover,:focus-visible) { outline: 0; border-color: #61e7f2; background: rgba(72,219,233,.15); }
.draft-next-locks img { width: 34px; height: 34px; border-radius: 5px; }
.draft-next-locks strong,.draft-next-locks small { display: block; white-space: nowrap; }
.draft-next-locks strong { color: #eef8fc; font-size: .66rem; }.draft-next-locks button small { margin-top: 2px; color: #8297aa; font-size: .55rem; }
.draft-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.draft-side { min-width: 0; overflow: visible; border: 1px solid rgba(145,167,194,.19); border-radius: 7px; background: #08111b; }
.draft-side.is-ally { border-top: 3px solid #37cfe0; }
.draft-side.is-enemy { border-top: 3px solid #ed5877; }
.draft-side > header { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 15px 17px; border-bottom: 1px solid rgba(145,167,194,.14); }
.draft-side > header span { color: #8094a8; font-size: .59rem; font-weight: 900; text-transform: uppercase; }
.draft-side > header h2 { margin: 3px 0 2px; color: #f1f7fc; font-size: 1.08rem; }
.draft-side > header p { margin: 0; color: #8699ac; font-size: .64rem; }
.draft-side > header b { display: grid; place-items: center; min-width: 50px; height: 34px; border-radius: 999px; color: #dffbff; background: rgba(55,207,224,.12); font-size: .68rem; }
.draft-side.is-enemy > header b { color: #ffdfe6; background: rgba(237,88,119,.12); }
.draft-role-list { display: grid; gap: 1px; }
.draft-role-pick { position: relative; display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 10px; align-items: center; min-width: 0; padding: 10px 12px; border-bottom: 1px solid rgba(145,167,194,.1); }
.draft-role-pick:last-child { border-bottom: 0; }
.draft-role-label { display: grid; place-items: center; min-height: 34px; border: 1px dashed transparent; border-radius: 5px; color: #9aabba; font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.draft-role-pick.has-pick .draft-role-label { border-color: rgba(72,219,233,.3); color: #bff8fc; background: rgba(72,219,233,.06); cursor: grab; }
.draft-side.is-enemy .draft-role-pick.has-pick .draft-role-label { border-color: rgba(237,88,119,.3); color: #ffd7df; background: rgba(237,88,119,.06); }
.draft-pick-input { display: grid; grid-template-columns: 46px minmax(0,1fr) 32px; align-items: center; overflow: hidden; border: 1px solid rgba(145,167,194,.22); border-radius: 6px; background: #050b12; }
.draft-role-pick.has-pick .draft-pick-input { border-color: rgba(72,219,233,.38); }
.draft-side.is-enemy .draft-role-pick.has-pick .draft-pick-input { border-color: rgba(237,88,119,.4); }
.draft-role-pick.is-wrong-role { background: rgba(229,177,71,.055); box-shadow: inset 3px 0 #e5b147; }
.draft-role-pick.is-wrong-role .draft-pick-input,.draft-side.is-enemy .draft-role-pick.is-wrong-role .draft-pick-input { border-color: rgba(229,177,71,.7); }
.draft-role-pick.is-wrong-role > small { color: #f0c967; font-weight: 800; }
.draft-pick-input img { width: 46px; height: 46px; object-fit: cover; }
.draft-pick-input input { min-width: 0; height: 46px; padding: 0 10px; border: 0; outline: 0; color: #eff7fc; background: transparent; font: inherit; font-size: .75rem; font-weight: 800; }
.draft-pick-input button { width: 28px; height: 28px; border: 0; border-radius: 50%; color: #8194a7; background: transparent; cursor: pointer; }
.draft-pick-input button:hover { color: #fff; background: rgba(145,167,194,.12); }
.draft-role-pick > small { grid-column: 2; overflow: hidden; color: #7f92a6; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.draft-picker-menu { position: absolute; z-index: 15; top: 61px; right: 12px; left: 78px; max-height: 300px; overflow: auto; padding: 5px; border: 1px solid rgba(145,167,194,.3); border-radius: 6px; background: #080f18; box-shadow: 0 16px 45px rgba(0,0,0,.55); }
.draft-picker-menu button:disabled { opacity: .35; cursor: not-allowed; }
.draft-overview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.draft-overview article { padding: 15px; border: 1px solid rgba(145,167,194,.17); border-left: 4px solid #718497; border-radius: 6px; background: #08111b; }
.draft-overview article[data-tone="good"] { border-left-color: #43dca2; }.draft-overview article[data-tone="watch"] { border-left-color: #e5b147; }.draft-overview article[data-tone="danger"] { border-left-color: #ed5877; }
.draft-overview span,.draft-overview strong { display: block; }.draft-overview span { color: #8094a8; font-size: .59rem; font-weight: 900; text-transform: uppercase; }.draft-overview strong { margin-top: 5px; color: #edf6fc; }.draft-overview p { margin: 6px 0 0; color: #8da0b3; font-size: .67rem; line-height: 1.48; }
.draft-recommendations,.draft-lane-reads { padding: 20px; border: 1px solid rgba(145,167,194,.18); border-radius: 7px; background: #09121c; }
.draft-recommendations > header,.draft-lane-reads > header { display: flex; justify-content: space-between; gap: 24px; align-items: end; padding-bottom: 15px; border-bottom: 1px solid rgba(145,167,194,.14); }
.draft-recommendations h2,.draft-lane-reads h2 { margin: 4px 0 5px; color: #f0f7fc; }.draft-recommendations header p,.draft-lane-reads header p { margin: 0; color: #899caf; font-size: .68rem; }.draft-recommendations label { min-width: 180px; }.draft-recommendations label span { display: block; margin-bottom: 5px; color: #96a8b9; font-size: .6rem; font-weight: 900; text-transform: uppercase; }
.draft-recommend-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.draft-recommend-grid article { position: relative; display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 10px; min-width: 0; padding: 13px; border: 1px solid rgba(67,220,233,.2); border-top: 3px solid #43dca2; border-radius: 6px; background: #070f18; }
.draft-rank { position: absolute; top: 7px; left: 7px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #06110d; background: #53e1aa; font-size: .62rem; font-weight: 950; }.draft-recommend-grid img { width: 54px; height: 54px; border-radius: 6px; }.draft-recommend-grid small { color: #6edfac; font-size: .56rem; font-weight: 900; text-transform: uppercase; }.draft-recommend-grid h3 { margin: 2px 0; color: #eff8fc; font-size: .86rem; }.draft-recommend-grid article strong { color: #c9f7df; font-size: .65rem; }.draft-recommend-grid p { grid-column: 1/-1; margin: 2px 0 0; color: #8da0b3; font-size: .64rem; line-height: 1.45; }.draft-recommend-grid button { grid-column: 1/-1; justify-self: start; }
.draft-risk-list { display: grid; grid-template-columns: minmax(210px,.8fr) repeat(3,1fr); gap: 7px; align-items: stretch; margin-top: 9px; }.draft-risk-list > div { padding: 10px 12px; border-left: 3px solid #e5b147; background: rgba(229,177,71,.06); }.draft-risk-list > div span,.draft-risk-list > div strong { display: block; }.draft-risk-list > div span { color: #e8bd69; font-size: .59rem; font-weight: 900; text-transform: uppercase; }.draft-risk-list > div strong { margin-top: 4px; color: #e5edf4; font-size: .7rem; }.draft-risk-list > a { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 8px; align-items: center; padding: 8px; border: 1px solid rgba(229,177,71,.18); border-radius: 6px; color: inherit; background: #070f18; text-decoration: none; }.draft-risk-list img { width: 34px; height: 34px; border-radius: 5px; }.draft-risk-list a strong,.draft-risk-list a small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.draft-risk-list a strong { color: #edf5fa; font-size: .68rem; }.draft-risk-list a small { margin-top: 3px; color: #8b9daf; font-size: .55rem; }
.draft-lane-reads > div { display: grid; gap: 7px; margin-top: 14px; }.draft-lane-reads article { display: grid; grid-template-columns: 60px minmax(280px,.7fr) minmax(240px,1fr) auto; gap: 13px; align-items: center; padding: 10px 12px; border: 1px solid rgba(145,167,194,.15); border-left: 3px solid #718497; border-radius: 6px; background: #070f18; }.draft-lane-reads article[data-state="ready"] { border-left-color: #43dca2; }.draft-lane-reads article[data-state="partial"] { border-left-color: #e5b147; }.draft-lane-reads article > span { color: #94a8b9; font-size: .63rem; font-weight: 900; text-transform: uppercase; }.draft-lane-pair { display: grid; grid-template-columns: 32px minmax(0,1fr) auto 32px minmax(0,1fr); gap: 7px; align-items: center; }.draft-lane-pair img { width: 32px; height: 32px; border-radius: 5px; }.draft-lane-pair strong { overflow: hidden; color: #eaf3f9; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }.draft-lane-pair b { color: #718497; font-size: .58rem; text-transform: uppercase; }.draft-lane-pair em { color: #74879b; font-size: .64rem; font-style: normal; }.draft-lane-reads article p { margin: 0; color: #899caf; font-size: .65rem; line-height: 1.45; }.draft-lane-reads article a { padding: 7px 10px; border: 1px solid rgba(72,219,233,.38); border-radius: 999px; color: #c9faff; font-size: .61rem; font-weight: 900; text-decoration: none; white-space: nowrap; }
.draft-bans { padding: 18px; border: 1px solid rgba(145,167,194,.18); border-radius: 7px; background: #09121c; }
.draft-bans > summary { display: flex; justify-content: space-between; gap: 20px; align-items: center; cursor: pointer; list-style: none; }
.draft-bans > summary::-webkit-details-marker { display: none; }
.draft-bans > summary > span { padding: 7px 11px; border: 1px solid rgba(229,177,71,.32); border-radius: 999px; color: #f4d68e; background: rgba(229,177,71,.08); font-size: .62rem; font-weight: 900; }
.draft-bans[open] > summary { padding-bottom: 13px; border-bottom: 1px solid rgba(145,167,194,.14); }
.draft-bans[open] > summary > span::before { content: 'Close '; }.draft-bans[open] > summary > span { font-size: 0; }.draft-bans[open] > summary > span::before { font-size: .62rem; }
.draft-bans h2 { margin: 4px 0 0; color: #f1f7fc; font-size: 1.12rem; }
.draft-ban-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 13px; }
.draft-ban-side { min-width: 0; padding: 12px; border: 1px solid rgba(145,167,194,.16); border-left: 3px solid #42dbe9; border-radius: 6px; background: #060d15; }
.draft-ban-side.is-enemy { border-left-color: #ed5877; }
.draft-ban-side > strong { display: block; margin-bottom: 8px; color: #cbd8e3; font-size: .62rem; text-transform: uppercase; }
.draft-ban-add { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.draft-ban-add input { min-width: 0; height: 38px; padding: 0 10px; border: 1px solid rgba(145,167,194,.25); border-radius: 5px; color: #eef7fc; background: #03080d; font: inherit; font-size: .7rem; }
.draft-ban-add > button { padding: 0 12px; border: 1px solid rgba(237,88,119,.35); border-radius: 999px; color: #ffdfe6; background: rgba(237,88,119,.1); font: inherit; font-size: .62rem; font-weight: 900; cursor: pointer; }
.draft-ban-menu { position: absolute; z-index: 25; top: 43px; right: 0; left: 0; max-height: 280px; overflow: auto; padding: 5px; border: 1px solid rgba(145,167,194,.3); border-radius: 6px; background: #080f18; box-shadow: 0 16px 45px rgba(0,0,0,.55); }
.draft-ban-menu button { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 8px; align-items: center; width: 100%; padding: 6px; border: 0; border-radius: 5px; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.draft-ban-menu button:hover { background: rgba(237,88,119,.1); }.draft-ban-menu img { width: 36px; height: 36px; border-radius: 5px; }.draft-ban-menu strong,.draft-ban-menu small { display: block; }.draft-ban-menu strong { color: #eef7fc; font-size: .68rem; }.draft-ban-menu small { color: #8295a8; font-size: .56rem; }
.draft-ban-list { display: flex; gap: 6px; min-height: 40px; margin-top: 9px; overflow-x: auto; }
.draft-ban-list > span { align-self: center; color: #718497; font-size: .62rem; }
.draft-ban-list button { display: grid; grid-template-columns: 28px auto 16px; gap: 6px; align-items: center; flex: 0 0 auto; padding: 5px 7px 5px 5px; border: 1px solid rgba(237,88,119,.2); border-radius: 999px; color: #e9f2f8; background: rgba(237,88,119,.07); font: inherit; font-size: .61rem; cursor: pointer; }.draft-ban-list img { width: 28px; height: 28px; border-radius: 50%; filter: grayscale(.7); }.draft-ban-list b { color: #ed7890; }
.draft-role-pick { grid-template-columns: 56px minmax(0,1fr) auto; }
.draft-role-pick > small { grid-column: 2; }
.draft-move-control { grid-column: 3; grid-row: 1 / span 2; display: flex; gap: 6px; align-items: center; }
.draft-move-control label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.draft-move-control select { width: 88px; height: 32px; padding: 0 6px; border: 1px solid rgba(145,167,194,.22); border-radius: 5px; color: #aebdca; background: #050b12; font: inherit; font-size: .58rem; }
.draft-move-control select:disabled { opacity: .35; }
.draft-role-pick.is-dragging { opacity: .45; }.draft-role-pick.is-drop-target { background: rgba(72,219,233,.1); box-shadow: inset 0 0 0 2px rgba(72,219,233,.55); }
.draft-role-pick.has-pick .draft-pick-input img { cursor: grab; }.draft-role-pick.has-pick .draft-pick-input:active img { cursor: grabbing; }
.draft-role-pick:not(.has-pick) .draft-move-control { visibility: hidden; }
.draft-workspace[data-view="simple"] .draft-risk-list,.draft-workspace[data-view="simple"] .draft-lane-reads { display: none; }
.draft-workspace[data-view="simple"] .draft-recommend-grid article:nth-child(n+4) { display: none; }
.draft-workspace[data-view="simple"] .draft-recommend-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
@media(max-width:1050px){.draft-recommend-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.draft-risk-list{grid-template-columns:1fr 1fr}.draft-lane-reads article{grid-template-columns:60px minmax(0,1fr) auto}.draft-lane-reads article p{grid-column:2/-1}}
@media(max-width:900px){.draft-inference{grid-template-columns:1fr}.draft-inference-control{grid-template-columns:110px minmax(150px,1fr) 116px auto}}
@media(max-width:760px){.draft-main{width:min(100%,calc(100% - 20px))}.draft-hero,.draft-inference,.draft-sides,.draft-ban-sides{grid-template-columns:1fr}.draft-hero{min-height:0;padding:20px}.draft-hero>div>p:last-child,.draft-hero aside{display:none}.draft-inference-control{grid-template-columns:1fr 1fr}.draft-quick-champion{grid-column:1/-1;grid-row:1}.draft-inference-control>button{width:100%}.draft-next-locks{grid-template-columns:1fr}.draft-bans>summary{align-items:center}.draft-bans>summary>span{white-space:nowrap}.draft-overview{grid-template-columns:1fr}.draft-recommendations>header,.draft-lane-reads>header{align-items:flex-start;flex-direction:column}.draft-recommendations label{width:100%}.draft-recommend-grid{grid-template-columns:1fr 1fr}.draft-lane-reads article{grid-template-columns:1fr}.draft-lane-reads article p{grid-column:auto}.draft-lane-pair{grid-template-columns:32px minmax(0,1fr) auto 32px minmax(0,1fr)}}
@media(max-width:460px){.draft-toolbar{align-items:flex-start;flex-direction:column}.draft-toolbar-actions{width:100%;align-items:stretch;flex-direction:column}.draft-toolbar-group>div{width:100%}.draft-view-switch{width:100%}.draft-toolbar button{flex:1}.draft-role-pick{grid-template-columns:48px minmax(0,1fr) 78px;padding:9px 8px}.draft-picker-menu{left:56px;right:8px}.draft-move-control select{width:76px}.draft-recommendations,.draft-lane-reads{padding:15px}.draft-recommend-grid,.draft-risk-list,.draft-workspace[data-view="simple"] .draft-recommend-grid{grid-template-columns:1fr}.draft-lane-pair{grid-template-columns:28px minmax(0,1fr) auto 28px minmax(0,1fr)}.draft-lane-pair img{width:28px;height:28px}}

/* v38: visual core path and role-specific target planners. */
.guide-main .jungle-target-planner {
  --section-accent: #f0a34f;
  position: relative;
  margin-top: 30px;
  padding: 24px;
  border: 1px solid rgba(151, 171, 212, .22);
  border-top: 4px solid var(--section-accent);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(240, 163, 79, .07), #0b131c 150px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .025);
}

.jungle-target-intro {
  max-width: 820px;
  margin: 0 0 16px;
  color: #aebdca;
  line-height: 1.55;
}

.jungle-target-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.jungle-target-grid article {
  padding: 16px;
  border: 1px solid rgba(151, 171, 212, .2);
  border-left: 4px solid #71869a;
  border-radius: 6px;
  background: #101b26;
}

.jungle-target-grid .jungle-target-first { border-left-color: #65dda2; }
.jungle-target-grid .jungle-target-abort { border-left-color: #ff7582; }
.jungle-target-grid span,
.jungle-target-grid strong { display: block; }
.jungle-target-grid span { color: #f0b970; font-size: .67rem; font-weight: 900; text-transform: uppercase; }
.jungle-target-grid strong { margin-top: 5px; color: #f5f9fc; }
.jungle-target-grid p { margin: 7px 0 0; color: #a8b8c6; font-size: .8rem; line-height: 1.5; }
.jungle-target-rule { margin: 10px 0 0; padding: 12px 14px; border-left: 4px solid #f0a34f; border-radius: 5px; color: #c5d1da; background: rgba(240, 163, 79, .07); line-height: 1.5; }
.jungle-target-rule b { color: #f4c889; }

.guide-main .duo-target-primary,
.guide-main .duo-target-backup {
  min-height: 126px;
  align-items: center;
}

.guide-main .duo-target-primary { border-left: 4px solid #65dda2; }
.guide-main .duo-target-backup {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  border-left: 4px solid #bd87ff;
}

.guide-main .duo-target-backup > span { grid-column: 1/-1; }
.guide-main .duo-target-backup img { width: 44px; height: 44px; border: 1px solid rgba(189, 135, 255, .4); border-radius: 6px; background: #050a10; }
.guide-main .duo-target-backup img:not([src]) { visibility: hidden; }

.duo-target-checks {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.duo-target-checks article {
  padding: 13px;
  border: 1px solid rgba(151, 171, 212, .18);
  border-top: 3px solid #71869a;
  border-radius: 6px;
  background: #0c1620;
}

.duo-target-checks article:nth-child(1) { border-top-color: #65dda2; }
.duo-target-checks article:nth-child(2) { border-top-color: #57cfe0; }
.duo-target-checks article:nth-child(3) { border-top-color: #bd87ff; }
.duo-target-checks span,
.duo-target-checks strong { display: block; }
.duo-target-checks span { color: #a1b1c1; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.duo-target-checks strong { margin-top: 5px; color: #eef6fb; font-size: .94rem; }
.duo-target-checks p { margin: 5px 0 0; color: #adbbc8; font-size: .82rem; line-height: 1.5; }

.matchup-core h3 { margin: 5px 0 6px; color: #f5f9fc; font-size: 1.08rem; }
.matchup-core-path {
  display: grid;
  gap: 7px;
  margin: 14px 0;
  padding: 0;
  list-style: none;
}

.matchup-core-path li {
  display: grid;
  grid-template-columns: 38px 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(214, 169, 63, .2);
  border-radius: 6px;
  background: #08111a;
}

.matchup-core-path li > b {
  display: grid;
  place-items: center;
  min-height: 30px;
  padding: 5px;
  border-radius: 999px;
  color: #151003;
  background: var(--gold);
  font-size: .64rem;
  text-transform: uppercase;
}

.matchup-core-path img { width: 44px; height: 44px; border: 1px solid rgba(214, 169, 63, .36); border-radius: 6px; }
.matchup-core-path small,
.matchup-core-path strong,
.matchup-core-path em { display: block; }
.matchup-core-path small { color: #8193a4; font-size: .61rem; font-weight: 850; text-transform: uppercase; }
.matchup-core-path strong { margin-top: 2px; color: #f0f5f9; font-size: .82rem; }
.matchup-core-path em { margin-top: 2px; color: #e3bd61; font-size: .68rem; font-style: normal; font-weight: 750; }
.matchup-core-rule { margin: 0 !important; padding: 10px 12px; border-left: 3px solid var(--gold); border-radius: 4px; background: rgba(214, 169, 63, .06); }
.matchup-core-rule b { color: #f0d58c; }

.guide-main .build-more > summary {
  width: max-content;
  max-width: calc(100% - 20px);
  margin: 10px;
  padding: 9px 14px;
  border: 1px solid rgba(151, 171, 212, .3);
  border-radius: 999px;
  color: #dce8ef;
  background: #101b25;
  list-style-position: inside;
}

.guide-main .build-more > summary:is(:hover, :focus-visible) { outline: 0; border-color: var(--gold); color: #fff; background: #202118; }
.guide-main .build-more[open] > summary { border-bottom: 1px solid var(--gold); }

@media (max-width: 720px) {
  .guide-main .jungle-target-planner { margin-top: 26px; padding: 16px; }
  .jungle-target-grid,
  .duo-target-checks { grid-template-columns: 1fr; }
  .guide-main .duo-target-primary,
  .guide-main .duo-target-backup { min-height: 0; }
}

/* v37: Riot-review presentation pass. Distinct, labelled sections without client imitation. */
.guide-main .guide-hero {
  border: 0;
  border-bottom: 3px solid var(--gold);
  border-radius: 0;
  box-shadow: none;
}

.guide-main .guide-hero .hero-copy {
  padding: 30px;
}

.guide-main .guide-hero .eyebrow {
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--cyan);
  background: transparent;
}

.guide-main [data-section-label]::after {
  content: attr(data-section-label);
  position: absolute;
  z-index: 2;
  top: -13px;
  left: 18px;
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border: 1px solid color-mix(in srgb, var(--section-accent, var(--cyan)) 60%, #22303c);
  border-radius: 999px;
  color: color-mix(in srgb, var(--section-accent, var(--cyan)) 76%, white);
  background: #081019;
  box-shadow: 0 0 0 4px #081016;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
}

.guide-main .guide-picker,
.guide-main .role-fit,
.guide-main .duo-lane-planner,
.guide-main .starter-build,
.guide-main .champion-playbook,
.guide-main .combo-guide,
.guide-main .ability-compare {
  margin-top: 30px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--section-accent, var(--cyan)) 7%, #0b131c) 0, #0b131c 150px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .025);
}

.guide-main .guide-source {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: start;
  gap: 8px;
  margin-top: 16px;
  padding: 0;
}

.guide-main .guide-source strong,
.guide-main .guide-source span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border: 1px solid rgba(151, 171, 212, .22);
  border-radius: 999px;
  color: #b9c8d3;
  background: #0d1720;
  font-size: .7rem;
  font-weight: 800;
}

.guide-main .guide-source strong {
  border-color: rgba(214, 169, 63, .4);
  color: #f0d58c;
  background: rgba(214, 169, 63, .075);
}

.guide-main .guide-source span::before {
  width: 6px;
  height: 6px;
  margin: 0 8px 0 0;
  border-radius: 50%;
  background: var(--green);
  content: "";
}

.guide-main .guide-source span:last-child::before { background: var(--cyan); }

.guide-main .guide-jumps {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid rgba(151, 171, 212, .18);
  border-radius: 8px;
  background: rgba(7, 15, 23, .76);
}

.guide-main .guide-jumps > span {
  padding-left: 4px;
  color: #8194a3;
}

.guide-main .topbar nav a,
.topbar nav a {
  padding: 7px 10px;
  border-radius: 999px;
}

.topbar nav a:hover,
.topbar nav a[aria-current] {
  color: #f5fbff;
  background: rgba(57, 200, 212, .09);
}

.guide-main .champion-input-shell {
  border-color: rgba(151, 171, 212, .3);
  border-radius: 7px;
  background: #0c1721;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.guide-main .champion-input-shell:hover { border-color: rgba(57, 200, 212, .48); }
.guide-main .champion-input-shell:focus-within { background: #10202b; }

.guide-main .selected-role-verdict {
  border: 1px solid rgba(116, 230, 178, .22);
  border-left: 5px solid #74e6b2;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.guide-main .role-fit-card {
  position: relative;
  min-height: 150px;
  overflow: hidden;
  transition: border-color .12s ease, background-color .12s ease;
}

.guide-main .role-fit-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: #ff6f7f;
  opacity: .7;
}

.guide-main .role-fit-card.possible::after { background: var(--gold); }
.guide-main .role-fit-card.likely::after,
.guide-main .role-fit-card.selected::after { background: #74e6b2; }
.guide-main .role-fit-card:is(:hover, :focus-visible) { outline: 0; border-color: rgba(57, 200, 212, .6); background: #152330; }

.guide-main .build-confidence,
.guide-main .playbook-review-badge,
.guide-main .section-heading > span,
.guide-main .combo-guide .section-heading > span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--section-accent, var(--cyan)) 38%, #24323e);
  border-radius: 999px;
  color: color-mix(in srgb, var(--section-accent, var(--cyan)) 68%, white);
  background: color-mix(in srgb, var(--section-accent, var(--cyan)) 8%, #0c151e);
  font-size: .67rem;
  font-weight: 850;
}

.guide-main .build-items li {
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.guide-main .build-items li.build-opening-step {
  border-color: rgba(79, 230, 166, .42);
  background: linear-gradient(160deg, rgba(79, 230, 166, .1), #101b26 52%);
}

.guide-main .build-items li.build-quest-step {
  border-color: rgba(214, 169, 63, .42);
  background: linear-gradient(160deg, rgba(214, 169, 63, .1), #101b26 52%);
}

.guide-main .champion-summary {
  min-height: 142px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--gold) 7%, #0b131c), #0b131c 58%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}

.guide-main .champion-summary:nth-child(2) {
  background: linear-gradient(145deg, color-mix(in srgb, var(--cyan) 7%, #0b131c), #0b131c 58%);
}

.guide-main .champion-summary img {
  border: 2px solid color-mix(in srgb, var(--gold) 54%, #263642);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
}

.guide-main .champion-summary:nth-child(2) img { border-color: color-mix(in srgb, var(--cyan) 54%, #263642); }

.guide-main .guide-tips article {
  box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
}

.guide-main .playbook-grid article,
.guide-main .combo-grid article,
.guide-main .ability-row {
  box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 7px 18px rgba(0, 0, 0, .1);
}

.guide-main .playbook-state-switch button {
  min-width: 82px;
}

.guide-main .playbook-state-panel[data-playbook-state-panel="even"] .playbook-phases article { border-left-color: #8e9cff; }
.guide-main .playbook-state-panel[data-playbook-state-panel="ahead"] .playbook-phases article { border-left-color: #68dfa8; }
.guide-main .playbook-state-panel[data-playbook-state-panel="behind"] .playbook-phases article { border-left-color: #ff9b69; }

.guide-main .ability-column > h3 {
  width: max-content;
  margin: 0 0 12px;
  padding: 7px 12px;
  border: 1px solid rgba(57, 200, 212, .32);
  border-radius: 999px;
  color: #dbf8fb;
  background: rgba(57, 200, 212, .075);
  font-size: .86rem;
}

.guide-main .ability-column:first-of-type > h3 {
  border-color: rgba(214, 169, 63, .38);
  color: #f1d99c;
  background: rgba(214, 169, 63, .07);
}

.guide-main .ability-row img,
.guide-main .ability-key-map img {
  border: 1px solid rgba(57, 200, 212, .3);
  border-radius: 6px;
  background: #050a10;
}

@media (max-width: 620px) {
  .guide-main .guide-hero { border-radius: 0; }
  .guide-main .guide-hero .hero-copy { padding: 20px 24px; }
  .guide-main [data-section-label]::after { left: 13px; }
  .guide-main .guide-picker,
  .guide-main .role-fit,
  .guide-main .duo-lane-planner,
  .guide-main .starter-build,
  .guide-main .champion-playbook,
  .guide-main .combo-guide,
  .guide-main .ability-compare { margin-top: 26px; }
  .guide-main .guide-source { grid-template-columns: 1fr; }
  .guide-main .guide-source strong,
  .guide-main .guide-source span { width: max-content; max-width: 100%; }
  .guide-main .role-fit-card { min-height: 0; }
  .guide-main .section-heading > span { align-self: flex-start; }
  .guide-main .playbook-state-switch button { min-width: 0; }
}

/* v36: stronger guide section hierarchy and Events-style action pills. */
.guide-main {
  --guide-shell: #0b131c;
  --guide-card: #101b26;
  --guide-card-deep: #071019;
}

.guide-main .guide-picker,
.guide-main .role-fit,
.guide-main .duo-lane-planner,
.guide-main .starter-build,
.guide-main .champion-playbook,
.guide-main .combo-guide,
.guide-main .ability-compare {
  position: relative;
  margin-top: 18px;
  padding: 24px;
  overflow: visible;
  border: 1px solid rgba(151, 171, 212, .22);
  border-top: 4px solid var(--section-accent, var(--cyan));
  border-radius: 8px;
  background: var(--guide-shell);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}

.guide-main .guide-picker { --section-accent: var(--cyan); }
.guide-main .role-fit { --section-accent: #72e4b0; padding-bottom: 20px; }
.guide-main .duo-lane-planner { --section-accent: #bd87ff; }
.guide-main .starter-build { --section-accent: var(--gold); }
.guide-main .champion-playbook { --section-accent: #8e9cff; }
.guide-main .combo-guide { --section-accent: #c486ff; }
.guide-main .ability-compare { --section-accent: #4fd2e1; }

.guide-main .section-heading,
.guide-main .playbook-header,
.guide-main .picker-heading {
  position: relative;
  min-height: 52px;
  margin-bottom: 18px;
  padding: 0 0 17px 16px;
  border-bottom: 1px solid rgba(151, 171, 212, .18);
}

.guide-main .section-heading::before,
.guide-main .playbook-header::before,
.guide-main .picker-heading::before {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 17px;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: var(--section-accent, var(--cyan));
}

.guide-main .section-heading h2,
.guide-main .playbook-header h2,
.guide-main .picker-heading h2 {
  color: #f7fbff;
  text-wrap: balance;
}

.guide-main .eyebrow {
  color: var(--section-accent, var(--cyan));
  letter-spacing: .04em;
}

.guide-main .selected-role-verdict,
.guide-main .win-rate-note,
.guide-main .build-start-callout,
.guide-main .support-quest-path,
.guide-main .build-tracker,
.guide-main .build-more,
.guide-main .playbook-state,
.guide-main .playbook-note,
.guide-main .combo-note {
  border-radius: 6px;
}

.guide-main .role-fit-card,
.guide-main .duo-target-primary,
.guide-main .duo-target-backup,
.guide-main .build-overview article,
.guide-main .build-items li,
.guide-main .build-guidance article,
.guide-main .build-unavailable,
.guide-main .alternative-grid article,
.guide-main .matchup-core,
.guide-main .matchup-swap,
.guide-main .guide-tips article,
.guide-main .playbook-grid article,
.guide-main .playbook-phases article,
.guide-main .ability-key-map > div,
.guide-main .combo-grid article,
.guide-main .ability-row {
  border-radius: 6px;
  background: var(--guide-card);
}

.guide-main .role-fit-card,
.guide-main .build-items li,
.guide-main .alternative-grid article,
.guide-main .playbook-phases article,
.guide-main .ability-key-map > div,
.guide-main .ability-row {
  border-left: 3px solid rgba(151, 171, 212, .34);
}

.guide-main .role-fit-card.selected { border-left-color: var(--cyan); }
.guide-main .role-fit-card.avoid { border-left-color: rgba(255, 111, 127, .6); }
.guide-main .build-items li { border-left-color: rgba(214, 169, 63, .62); }
.guide-main .playbook-phases article { border-left-color: rgba(142, 156, 255, .7); }
.guide-main .ability-key-map > div,
.guide-main .ability-row { border-left-color: rgba(57, 200, 212, .55); }

/* Matchup role selector: share the champion library's lane language. */
.guide-main .role-fit {
  --selected-role-color: #55dce9;
}
.guide-main .role-fit.is-role-top { --selected-role-color: #71d9a3; }
.guide-main .role-fit.is-role-jungle { --selected-role-color: #d5a653; }
.guide-main .role-fit.is-role-middle { --selected-role-color: #aa8bea; }
.guide-main .role-fit.is-role-bottom { --selected-role-color: #ed718a; }
.guide-main .role-fit.is-role-support { --selected-role-color: #55dce9; }
.guide-main .selected-role-verdict {
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.55fr);
  min-height: 108px;
  padding: 18px 20px;
  border-color: color-mix(in srgb, var(--selected-role-color) 32%, #293845);
  border-left-color: var(--selected-role-color);
  background: linear-gradient(110deg, color-mix(in srgb, var(--selected-role-color) 12%, #0d1821) 0 32%, #0d1821 64%);
}
.guide-main .role-verdict-title {
  grid-template-columns: 58px minmax(0, 1fr);
  column-gap: 12px;
}
.guide-main .role-verdict-title .guide-lane-icon,
.guide-main .role-fit-icon {
  --role-color: #55dce9;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--role-color) 68%, #263845);
  border-radius: 7px;
  background: color-mix(in srgb, var(--role-color) 11%, #071018);
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 7px 18px color-mix(in srgb, var(--role-color) 10%, transparent);
}
.guide-main :is(.guide-lane-icon,.role-fit-icon).is-top,
.guide-main :is(.guide-role-kicker,.auto-role-badge).is-top { --role-color: #71d9a3; }
.guide-main :is(.guide-lane-icon,.role-fit-icon).is-jungle,
.guide-main :is(.guide-role-kicker,.auto-role-badge).is-jungle { --role-color: #d5a653; }
.guide-main :is(.guide-lane-icon,.role-fit-icon).is-middle,
.guide-main :is(.guide-role-kicker,.auto-role-badge).is-middle { --role-color: #aa8bea; }
.guide-main :is(.guide-lane-icon,.role-fit-icon).is-bottom,
.guide-main :is(.guide-role-kicker,.auto-role-badge).is-bottom { --role-color: #ed718a; }
.guide-main :is(.guide-lane-icon,.role-fit-icon).is-support,
.guide-main :is(.guide-role-kicker,.auto-role-badge).is-support { --role-color: #55dce9; }
.guide-main .role-verdict-title .guide-lane-icon {
  grid-row: 1 / 3;
  width: 54px;
  height: 54px;
  padding: 9px;
}
.guide-main .guide-lane-icon img,
.guide-main .role-fit-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--role-color) 38%, transparent));
}
.guide-main .role-verdict-title strong {
  color: color-mix(in srgb, var(--selected-role-color) 74%, white);
  font-size: clamp(1.05rem, 2vw, 1.32rem);
  line-height: 1.15;
}
.guide-main .role-verdict-copy p {
  color: #c8d4dd;
  font-size: .82rem;
  line-height: 1.62;
}
.guide-main .role-fit-grid {
  gap: 11px;
  margin-top: 12px;
}
.guide-main .role-fit-card {
  --role-color: #55dce9;
  min-height: 176px;
  padding: 14px;
  border-top: 3px solid color-mix(in srgb, var(--role-color) 68%, #435260);
  border-left: 1px solid rgba(151,171,212,.2);
  background: linear-gradient(155deg, color-mix(in srgb, var(--role-color) 7%, #101b26), #101b26 52%);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.guide-main .role-fit-card.is-top { --role-color: #71d9a3; }
.guide-main .role-fit-card.is-jungle { --role-color: #d5a653; }
.guide-main .role-fit-card.is-middle { --role-color: #aa8bea; }
.guide-main .role-fit-card.is-bottom { --role-color: #ed718a; }
.guide-main .role-fit-card.is-support { --role-color: #55dce9; }
.guide-main .role-fit-card::after {
  background: var(--role-color);
  opacity: .78;
}
.guide-main .role-fit-card.selected {
  border-color: color-mix(in srgb, var(--role-color) 72%, #344653);
  border-top-color: var(--role-color);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--role-color) 58%, transparent), 0 10px 26px color-mix(in srgb, var(--role-color) 9%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--role-color) 15%, #101c26), #101c26 62%);
}
.guide-main .role-fit-card .role-fit-card-heading {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
}
.guide-main .role-fit-card .role-fit-icon {
  width: 42px;
  height: 42px;
  padding: 7px;
}
.guide-main .role-fit-card .role-fit-name {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
}
.guide-main .role-fit-card .role-fit-name b {
  color: #edf5f9;
  font-size: .76rem;
  font-weight: 950;
}
.guide-main .role-fit-card .role-fit-name em {
  color: color-mix(in srgb, var(--role-color) 76%, white);
  font-size: .56rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.guide-main .role-fit-card > strong {
  margin-top: 13px;
  color: #dce8ee;
  font-size: .76rem;
  line-height: 1.3;
}
.guide-main .role-fit-card > small {
  margin-top: 7px;
  color: #91a4b4;
  font-size: .68rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.guide-main .role-fit-card.avoid > strong { color: #ff9aaa; }
.guide-main .role-fit-card.possible > strong { color: #eacb7c; }
.guide-main .guide-role-kicker,
.guide-main .auto-role-badge { --role-color: #55dce9; }
.guide-main .guide-role-kicker > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--role-color) 55%, #263845);
  border-radius: 6px;
  background: color-mix(in srgb, var(--role-color) 12%, #071018);
}
.guide-main .guide-role-kicker img {
  width: 24px;
  height: 24px;
  padding: 3px;
  border: 0;
  background: transparent;
}
.guide-main .auto-role-badge {
  border-color: color-mix(in srgb, var(--role-color) 40%, #293844);
  color: color-mix(in srgb, var(--role-color) 72%, white);
  background: color-mix(in srgb, var(--role-color) 9%, #0b151e);
}
.guide-main .auto-role-badge img {
  border-color: color-mix(in srgb, var(--role-color) 42%, #293844);
}

@media (max-width: 620px) {
  .guide-main { overflow-x: clip; }
  .guide-main .selected-role-verdict {
    grid-template-columns: 1fr;
    gap: 13px;
    min-height: 0;
    padding: 16px;
  }
  .guide-main .role-fit-grid { grid-template-columns: 1fr; }
  .guide-main .role-fit-card {
    min-height: 0;
    padding: 13px;
  }
  .guide-main .role-fit-card > strong { margin-top: 10px; }
}

.guide-main .champion-pair {
  gap: 14px;
  margin-top: 18px;
}

.guide-main .champion-summary {
  padding: 18px;
  border: 1px solid rgba(151, 171, 212, .22);
  border-top: 4px solid var(--gold);
  border-radius: 8px;
  background: var(--guide-shell);
}

.guide-main .champion-summary:nth-child(2) { border-top-color: var(--cyan); }

.guide-main .guide-tips {
  gap: 14px;
  margin-top: 14px;
}

.guide-main .guide-tips article:first-child { border-top: 3px solid #72e4b0; }
.guide-main .guide-tips article:last-child { border-top: 3px solid #ff838f; }

.guide-main .duo-target-plan,
.guide-main .playbook-grid,
.guide-main .playbook-phases,
.guide-main .combo-grid,
.guide-main .ability-key-map {
  gap: 12px;
}

.guide-main .playbook-state {
  border-color: rgba(142, 156, 255, .25);
  background: #080f19;
}

.guide-main .playbook-state-summary {
  border: 1px solid rgba(214, 169, 63, .18);
  border-left: 4px solid var(--gold);
  border-radius: 5px;
  background: rgba(214, 169, 63, .075);
}

.guide-main .playbook-do { border-color: rgba(53, 214, 159, .3); }
.guide-main .playbook-avoid { border-color: rgba(255, 111, 125, .3); }
.guide-main .combo-grid article { border-left: 4px solid #c486ff; }

/* Text actions use the compact OLED pills established by Events. */
.guide-main :is(
  .guide-jumps a,
  .role-switches a,
  .guide-picker button[type="submit"],
  .duo-lane-toggle,
  .off-meta-trigger,
  .role-warning-actions button,
  .build-mode-switch button,
  .build-tracker-toggle button,
  .build-reset,
  .build-problem-buttons button,
  .add-counter-item,
  .playbook-state-switch button
) {
  min-height: 36px;
  height: auto;
  padding: 8px 14px;
  border: 1px solid rgba(151, 171, 212, .3);
  border-radius: 999px;
  color: #dce8ef;
  background: #101b25;
  box-shadow: none;
  font-size: .76rem;
  font-weight: 850;
  line-height: 1.15;
  text-decoration: none;
  transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}

.guide-main :is(
  .guide-jumps a,
  .role-switches a,
  .guide-picker button[type="submit"],
  .duo-lane-toggle,
  .off-meta-trigger,
  .role-warning-actions button,
  .build-mode-switch button,
  .build-tracker-toggle button,
  .build-reset,
  .build-problem-buttons button,
  .add-counter-item,
  .playbook-state-switch button
):is(:hover, :focus-visible) {
  outline: 0;
  border-color: var(--cyan);
  color: #fff;
  background: #172936;
}

.guide-main .guide-picker button[type="submit"],
.guide-main .duo-lane-toggle,
.guide-main .add-counter-item {
  border-color: rgba(57, 200, 212, .7);
  color: #061117;
  background: var(--cyan);
}

.guide-main .guide-picker button[type="submit"]:is(:hover, :focus-visible),
.guide-main .duo-lane-toggle:is(:hover, :focus-visible),
.guide-main .add-counter-item:is(:hover, :focus-visible) {
  color: #041013;
  background: #71e2eb;
}

.guide-main .off-meta-trigger,
.guide-main .role-warning-actions [data-confirm-off-meta],
.guide-main .build-reset {
  border-color: rgba(255, 111, 127, .55);
  color: #ffdce0;
  background: rgba(255, 79, 101, .13);
}

.guide-main .build-mode-switch,
.guide-main .build-tracker-toggle,
.guide-main .playbook-state-switch {
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: #050b12;
}

.guide-main .build-mode-switch button[aria-selected="true"],
.guide-main .build-tracker-toggle button[aria-pressed="true"],
.guide-main .playbook-state-switch button[aria-selected="true"] {
  border-color: transparent;
  color: #061117;
  background: var(--cyan);
}

.guide-main .build-tracker [data-build-next-purchase] {
  display: block;
  margin-top: 5px;
  color: #8fa4b8;
  font-size: .68rem;
  font-weight: 750;
  line-height: 1.35;
}
.guide-main .build-sequence.is-tracking > li.is-next {
  border-color: rgba(79, 230, 166, .58);
  border-top-color: #4fe6a6;
  box-shadow: 0 0 0 2px rgba(79, 230, 166, .08), 0 12px 28px rgba(0, 0, 0, .2);
}
.guide-main .build-sequence.is-tracking > li.is-next > .build-step-number {
  border-color: rgba(79, 230, 166, .72);
  color: #e9fff5;
  background: #123c2d;
}

.guide-main .playbook-state-switch button[data-playbook-state-button="ahead"][aria-selected="true"] { background: #68dfa8; }
.guide-main .playbook-state-switch button[data-playbook-state-button="behind"][aria-selected="true"] { background: #ff9b69; }
.guide-main .build-problem-buttons button[aria-pressed="true"] {
  border-color: var(--gold);
  color: #181102;
  background: var(--gold);
}

.guide-main .guide-jumps {
  gap: 7px;
  padding: 14px 0 16px;
}

.guide-main .guide-jumps a { min-height: 32px; padding: 7px 12px; }

@media (max-width: 620px) {
  .guide-main .guide-picker,
  .guide-main .role-fit,
  .guide-main .duo-lane-planner,
  .guide-main .starter-build,
  .guide-main .champion-playbook,
  .guide-main .combo-guide,
  .guide-main .ability-compare {
    margin-top: 12px;
    padding: 16px;
  }

  .guide-main .section-heading,
  .guide-main .playbook-header,
  .guide-main .picker-heading { padding-left: 13px; }

  .guide-main .guide-picker button[type="submit"] { width: 100%; }
  .guide-main .playbook-state-switch button { min-width: 0; padding-inline: 8px; }
  .guide-main .combo-title { grid-template-columns: 1fr; }
  .guide-main .combo-buttons { justify-content: flex-start; }
}

/* Shared command controls: compact and distinct from content cards. */
.lookup-actions button,
.next-work a,
.counter-picker > button[type="submit"],
.team-use-preset,
.team-reset,
.glossary-filters button {
  align-self: start;
  width: auto;
  height: auto;
  min-height: 38px;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 850;
  line-height: 1.15;
  transition: border-color .14s ease, background-color .14s ease, color .14s ease, transform .14s ease;
}
.lookup-actions button:is(:hover, :focus-visible),
.next-work a:is(:hover, :focus-visible),
.counter-picker > button[type="submit"]:is(:hover, :focus-visible),
.team-use-preset:is(:hover, :focus-visible),
.team-reset:is(:hover, :focus-visible),
.glossary-filters button:is(:hover, :focus-visible) {
  outline: 0;
  transform: translateY(-1px);
}
.lookup-actions button:focus-visible,
.next-work a:focus-visible,
.counter-picker > button[type="submit"]:focus-visible,
.team-use-preset:focus-visible,
.team-reset:focus-visible,
.glossary-filters button:focus-visible {
  box-shadow: 0 0 0 3px rgba(57, 200, 212, .2);
}
.lookup-actions button:disabled {
  cursor: wait;
  opacity: .62;
  transform: none;
}
.team-use-preset[aria-pressed="true"] {
  border-color: rgba(69, 196, 134, .65);
  color: #d9ffeb;
  background: rgba(69, 196, 134, .16);
}

.guide-main .guide-jumps,
.league-page-jumps {
  position: sticky;
  top: 72px;
  z-index: 4;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.league-page-jumps {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(151, 171, 212, .18);
  border-radius: 8px;
  background: rgba(7, 15, 23, .92);
}
.league-page-jumps span {
  flex: 0 0 auto;
  padding: 0 5px;
  color: #8194a3;
  font-size: .72rem;
  font-weight: 850;
  text-transform: uppercase;
}
.league-page-jumps a {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 7px 12px;
  border: 1px solid rgba(151, 171, 212, .3);
  border-radius: 999px;
  color: #dce8ef;
  background: #101b25;
  font-size: .74rem;
  font-weight: 850;
  line-height: 1.15;
  text-decoration: none;
}
.league-page-jumps a:is(:hover, :focus-visible) {
  outline: 0;
  border-color: var(--cyan);
  color: #fff;
  background: #172936;
}
#team-builder-title,
#team-presets-title,
.team-preset-card[id] { scroll-margin-top: 138px; }

@media (max-width: 560px) {
  .lookup-actions button { flex: 1 1 140px; }
  .next-work a { width: 100%; }
  .guide-main .guide-jumps,
  .league-page-jumps { top: 64px; }
  .league-page-jumps { overflow-x: auto; scrollbar-width: none; }
  .league-page-jumps::-webkit-scrollbar { display: none; }
}

/* Purchase order must remain visually distinct from general guide cards. */
.guide-main .build-sequence li.build-opening-step {
  border: 1px solid rgba(79, 230, 166, .5);
  border-top: 3px solid #4fe6a6;
  background: linear-gradient(155deg, rgba(79, 230, 166, .13), #0d1821 52%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}
.guide-main .build-sequence li.build-completed-step {
  border: 1px solid rgba(62, 210, 229, .3);
  border-top: 3px solid rgba(62, 210, 229, .76);
  background: linear-gradient(155deg, rgba(62, 210, 229, .09), #0d1722 48%, #0b131d);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16), inset 0 1px rgba(255, 255, 255, .025);
}
.guide-main .build-sequence li.build-completed-step .build-step-number {
  border: 1px solid rgba(78, 225, 238, .72);
  color: #d8fcff;
  background: #092a36;
  box-shadow: 0 0 0 3px rgba(62, 210, 229, .08), 0 6px 16px rgba(0, 0, 0, .26);
  text-shadow: 0 0 12px rgba(111, 238, 247, .42);
}
.guide-main .build-sequence li.build-opening-step .build-step-number {
  border-color: rgba(112, 244, 184, .7);
  color: #eafff4;
  background: #123c2d;
  box-shadow: 0 0 0 3px rgba(79, 230, 166, .08), 0 6px 16px rgba(0, 0, 0, .24);
}
.guide-main .build-sequence .build-item-copy em {
  width: max-content;
  max-width: 100%;
  margin-top: 6px;
  padding: 4px 7px;
  border: 1px solid rgba(216, 169, 63, .26);
  border-radius: 999px;
  color: #ffe2a3;
  background: rgba(216, 169, 63, .09);
  line-height: 1.2;
}
.guide-main .build-sequence img {
  border-radius: 6px;
  box-shadow: 0 7px 16px rgba(0, 0, 0, .28);
}
@media (min-width: 1100px) {
  .guide-main .build-sequence li:not(:last-child)::after {
    content: '\203A';
    position: absolute;
    z-index: 2;
    top: 50%;
    right: -13px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 24px;
    border: 1px solid rgba(62, 210, 229, .28);
    border-radius: 999px;
    color: #8cebf2;
    background: #07111a;
    font-size: 1.1rem;
    font-weight: 900;
    transform: translateY(-50%);
  }
}

/* Bot lane board: locked picks, partner searches and target call. */
.guide-main .duo-lane-planner {
  border-color: rgba(189, 135, 255, .28);
  background: linear-gradient(150deg, rgba(189, 135, 255, .055), #08111a 34%, #091119);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}
.guide-main .duo-lane-toggle {
  border-color: rgba(189, 135, 255, .72);
  color: #f7edff;
  background: #392052;
  box-shadow: 0 0 0 3px rgba(189, 135, 255, .08);
}
.guide-main .duo-lane-toggle:is(:hover, :focus-visible) {
  outline: 0;
  border-color: #d8aaff;
  background: #4a2869;
}
.guide-main .duo-lane-fields {
  grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
.duo-lane-side {
  position: relative;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(151, 171, 212, .2);
  border-radius: 8px;
  background: #0a131d;
}
.duo-lane-allies {
  border-color: rgba(79, 230, 166, .34);
  border-top: 3px solid #4fe6a6;
  background: linear-gradient(155deg, rgba(79, 230, 166, .085), #0a141d 46%);
}
.duo-lane-enemies {
  border-color: rgba(255, 117, 130, .32);
  border-top: 3px solid #ff7582;
  background: linear-gradient(155deg, rgba(255, 117, 130, .075), #141018 46%);
}
.duo-side-heading span,
.duo-side-heading strong { display: block; }
.duo-side-heading span {
  font-size: .75rem;
  font-weight: 950;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.duo-lane-allies .duo-side-heading span { color: #77efba; }
.duo-lane-enemies .duo-side-heading span { color: #ff9ba5; }
.duo-side-heading strong { margin-top: 4px; color: #f3f8fc; font-size: 1.02rem; }
.duo-locked-pick {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid rgba(151, 171, 212, .16);
  border-radius: 7px;
  background: rgba(4, 10, 16, .72);
}
.duo-locked-pick img { width: 54px; height: 54px; border: 2px solid rgba(255, 255, 255, .14); border-radius: 7px; box-shadow: 0 8px 18px rgba(0, 0, 0, .3); }
.duo-lane-allies .duo-locked-pick img { border-color: rgba(79, 230, 166, .5); }
.duo-lane-enemies .duo-locked-pick img { border-color: rgba(255, 117, 130, .46); }
.duo-locked-pick small,
.duo-locked-pick strong,
.duo-locked-pick span { display: block; }
.duo-locked-pick small { color: #9aabc0; font-size: .72rem; font-weight: 850; text-transform: uppercase; }
.duo-locked-pick strong { margin-top: 2px; color: #f4f8fc; font-size: 1.12rem; }
.duo-locked-pick span { margin-top: 3px; color: #b0bdcd; font-size: .78rem; line-height: 1.45; }
.duo-lane-side > .champion-field { margin-top: 13px; }
.duo-lane-allies .champion-input-shell { border-color: rgba(79, 230, 166, .36); }
.duo-lane-enemies .champion-input-shell { border-color: rgba(255, 117, 130, .34); }
.guide-main .duo-lane-versus { align-self: center; height: auto; }
.duo-lane-versus span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(216, 169, 63, .5);
  border-radius: 50%;
  color: #ffe19a;
  background: #241a0c;
  box-shadow: 0 0 0 5px rgba(216, 169, 63, .055), 0 10px 22px rgba(0, 0, 0, .25);
  font-size: .78rem;
  font-weight: 950;
}
.duo-plan-heading {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 12px;
  align-items: baseline;
  margin-top: 5px;
  padding: 13px 15px;
  border-left: 4px solid #bd87ff;
  border-radius: 6px;
  background: rgba(189, 135, 255, .07);
}
.duo-plan-heading span { color: #d5aaff; font-size: .74rem; font-weight: 950; text-transform: uppercase; }
.duo-plan-heading strong { color: #f7f2ff; font-size: 1.08rem; }
.duo-plan-heading p { grid-column: 1/-1; margin: 0; color: #afbdd0; font-size: .82rem; line-height: 1.45; }
.guide-main .duo-target-primary {
  border-color: rgba(79, 230, 166, .3);
  background: linear-gradient(145deg, rgba(79, 230, 166, .08), #08131a 55%);
}
.guide-main .duo-target-backup {
  border-color: rgba(189, 135, 255, .28);
  background: linear-gradient(145deg, rgba(189, 135, 255, .075), #100d18 55%);
}
@media (max-width: 640px) {
  .guide-main .duo-lane-fields { grid-template-columns: 1fr; gap: 10px; }
  .guide-main .duo-lane-versus { padding: 2px 0; }
  .duo-lane-versus span { width: 42px; height: 42px; }
  .duo-lane-side { padding: 13px; }
  .duo-plan-heading { grid-template-columns: 1fr; }
  .duo-plan-heading p { grid-column: 1; }
}

.queue-opening-guide {
  display: grid;
  grid-template-columns: minmax(230px, .62fr) minmax(0, 1.38fr);
  gap: 14px;
  margin-bottom: 12px;
  padding: 15px;
  border: 1px solid rgba(151, 171, 212, .2);
  border-radius: 8px;
  background: #09121b;
}
.queue-opening-heading span,
.queue-opening-heading strong { display: block; }
.queue-opening-heading span { color: #8ea0b5; font-size: .64rem; font-weight: 950; text-transform: uppercase; }
.queue-opening-heading strong { margin-top: 4px; color: #f3f8fc; font-size: 1rem; }
.queue-opening-heading p { margin: 7px 0 0; color: #9eacbf; font-size: .73rem; line-height: 1.5; }
.queue-opening-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.queue-opening-options button { display: block; box-sizing: border-box; width: 100%; height: auto; min-width: 0; overflow: hidden; padding: 12px; border: 1px solid rgba(151, 171, 212, .18); border-top: 3px solid #d8a93f; border-radius: 7px; color: inherit; background: #0b131d; font: inherit; text-align: left; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, transform .16s ease; }
.queue-opening-options button:is(:hover, :focus-visible) { outline: 0; border-color: rgba(109, 223, 243, .5); background: #0d1924; transform: translateY(-1px); }
.queue-opening-options button.is-current { border-color: rgba(79, 230, 166, .5); border-top-color: #4fe6a6; box-shadow: inset 0 0 0 1px rgba(79, 230, 166, .08); background: rgba(79, 230, 166, .07); }
.queue-opening-options button > span,
.queue-opening-options button > strong { display: block; }
.queue-opening-options button > span { color: #8899ad; font-size: .59rem; font-weight: 950; text-transform: uppercase; }
.queue-opening-options button.is-current > span { color: #70ecb3; }
.queue-opening-options button > strong { margin-top: 3px; color: #f1f6fb; font-size: .88rem; }
.queue-opening-options button > div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.queue-opening-options button b { padding: 4px 7px; border: 1px solid rgba(151, 171, 212, .2); border-radius: 999px; color: #d9e5ef; background: rgba(151, 171, 212, .07); font-size: .63rem; }
.queue-opening-options button p { margin: 8px 0 0; color: #9aaabd; font-size: .69rem; line-height: 1.45; }
.queue-opening-options button p strong { color: #f3dc9a; }
.queue-opening-options button em { display: inline-flex; margin-top: 9px; color: #76deef; font-size: .62rem; font-style: normal; font-weight: 900; }
.queue-opening-options button.is-current em { color: #72efb6; }
.guardian-starter-panel { grid-column: 1/-1; padding-top: 14px; border-top: 1px solid rgba(151, 171, 212, .16); }
.guardian-starter-heading { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; }
.guardian-starter-heading span { color: #6ddff3; font-size: .62rem; font-weight: 950; text-transform: uppercase; }
.guardian-starter-heading strong { color: #f4f8fc; font-size: .9rem; }
.guardian-starter-heading p { grid-column: 1/-1; margin: 5px 0 0; color: #94a6ba; font-size: .7rem; line-height: 1.45; }
.guardian-starter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 11px 0 0; padding: 0; list-style: none; }
.guardian-starter-grid li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 9px; min-width: 0; padding: 10px; border: 1px solid rgba(151, 171, 212, .18); border-radius: 7px; background: #0b141e; }
.guardian-starter-grid li.is-recommended { border-color: rgba(79, 230, 166, .48); box-shadow: inset 0 3px 0 #4fe6a6; background: rgba(79, 230, 166, .065); }
.guardian-starter-grid img { width: 48px; height: 48px; border-radius: 5px; background: #101a26; }
.guardian-starter-grid div { min-width: 0; }
.guardian-starter-grid span,
.guardian-starter-grid strong,
.guardian-starter-grid b { display: block; }
.guardian-starter-grid span { overflow: hidden; color: #7fdff0; font-size: .56rem; font-weight: 950; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.guardian-starter-grid li.is-recommended span { color: #72efb6; }
.guardian-starter-grid strong { margin-top: 2px; overflow: hidden; color: #f4f7fb; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.guardian-starter-grid b { margin-top: 3px; color: #f2c968; font-size: .64rem; }
.guardian-starter-grid p { grid-column: 1/-1; margin: 6px 0 0; color: #8fa1b5; font-size: .63rem; line-height: 1.4; }
.guardian-starter-note { margin: 9px 0 0; padding: 9px 11px; border-left: 3px solid #d8a93f; color: #9cacbe; background: rgba(216, 169, 63, .055); font-size: .68rem; line-height: 1.45; }
.guardian-starter-note strong { color: #f3d994; }
.guardian-rules-link { display: inline-flex; margin-top: 9px; color: #f1cd7b; font-size: .67rem; font-weight: 900; text-decoration: none; }
.guardian-rules-link:is(:hover, :focus-visible) { outline: 0; color: #fff0c9; text-decoration: underline; }
.guardian-mode-opening { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; margin-bottom: 12px; padding: 14px; border: 1px solid rgba(79, 230, 166, .34); border-left: 4px solid #4fe6a6; border-radius: 7px; background: rgba(79, 230, 166, .055); }
.guardian-mode-opening-copy { grid-template-columns: minmax(0, 1fr); }
.guardian-mode-opening > div { min-width: 0; }
.guardian-mode-opening[hidden] { display: none; }
.guardian-mode-opening img { width: 56px; height: 56px; border-radius: 6px; }
.guardian-mode-opening span,
.guardian-mode-opening strong { display: block; }
.guardian-mode-opening span { color: #72efb6; font-size: .62rem; font-weight: 950; text-transform: uppercase; }
.guardian-mode-opening strong { margin-top: 3px; color: #f4f9fc; font-size: .94rem; line-height: 1.3; overflow-wrap: anywhere; }
.guardian-mode-opening p { max-width: 880px; margin: 6px 0 0; color: #a3b2c2; font-size: .72rem; line-height: 1.5; overflow-wrap: anywhere; }
.build-view.is-guardian-opening .build-opening-step { display: none; }
@media (max-width: 760px) {
  .queue-opening-guide { grid-template-columns: 1fr; padding: 13px; }
  .queue-opening-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guardian-starter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .queue-opening-options { grid-template-columns: 1fr; }
  .guardian-starter-heading { grid-template-columns: 1fr; }
  .guardian-starter-grid { grid-template-columns: 1fr; }
}

/* A completed build is a purchase timeline, not a gallery of equal-height cards. */
.guide-main .build-sequence {
  grid-template-columns: 1fr;
  gap: 9px;
}
.guide-main .build-sequence > li {
  grid-template-columns: 58px minmax(190px, .62fr) minmax(0, 1.38fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "head head recipe"
    "art copy recipe";
  gap: 8px 14px;
  align-items: start;
  min-height: 0;
  padding: 14px;
}
.guide-main .build-sequence > li > .build-step-head {
  grid-area: head;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.guide-main .build-sequence > li > img {
  grid-area: art;
  width: 56px;
  height: 56px;
  align-self: start;
}
.guide-main .build-sequence > li > .build-item-copy {
  grid-area: copy;
  align-self: start;
}
.guide-main .build-sequence > li > .build-step-head > .build-check {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  min-width: 118px;
  height: 34px;
  padding: 6px 11px;
  border: 1px solid rgba(151, 171, 212, .38);
  border-radius: 999px;
  color: #b9c8d8;
  background: rgba(151, 171, 212, .07);
  font: inherit;
  font-size: .63rem;
  font-weight: 900;
  white-space: nowrap;
}
.guide-main .build-sequence > li > .build-step-head > .build-check[hidden] { display: none; }
.guide-main .build-sequence > li > .build-step-head > .build-check:is(:hover, :focus-visible) {
  outline: 0;
  border-color: rgba(79, 230, 166, .7);
  color: #e5fff1;
  background: rgba(79, 230, 166, .1);
}
.guide-main .build-sequence > li > .build-step-head > .build-check[aria-pressed="true"] {
  border-color: rgba(79, 230, 166, .75);
  color: #e9fff4;
  background: #123c2d;
}
.guide-main .build-check-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 5px;
  font-size: .72rem;
  line-height: 1;
}
.guide-main .build-sequence > li > .build-recipe {
  grid-area: recipe;
  align-self: stretch;
  margin: 0;
  padding: 1px 0 1px 16px;
  border-top: 0;
  border-left: 1px solid rgba(62, 210, 229, .18);
}
.guide-main .build-sequence > li.build-opening-step {
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-areas:
    "head head"
    "art copy";
}
.guide-main .build-recipe-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.guide-main .build-recipe-heading > div { min-width: 0; }
.guide-main .build-recipe-heading strong {
  display: block;
  margin-top: 3px;
  color: #91a2b8;
  font-size: .67rem;
  line-height: 1.35;
}
.guide-main .build-recipe-heading button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid rgba(62, 210, 229, .32);
  border-radius: 999px;
  color: #d9f8fb;
  background: #0b202b;
  font: inherit;
  font-size: .64rem;
  font-weight: 900;
  cursor: pointer;
}
.guide-main .build-recipe-heading button:is(:hover, :focus-visible) {
  outline: 0;
  border-color: #62dce7;
  background: #12303d;
}
.guide-main .build-recipe-heading button small {
  display: inline-grid;
  place-items: center;
  min-width: 72px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  color: #9eeaf0;
  background: rgba(62, 210, 229, .12);
  font-size: .56rem;
}
.guide-main .build-recipe.is-open .build-recipe-heading button {
  border-color: rgba(79, 230, 166, .48);
  color: #dfffee;
  background: rgba(79, 230, 166, .1);
}
.guide-main .build-recipe-parts[hidden] { display: none; }
.guide-main .build-recipe-parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 7px;
  align-items: start;
}
.guide-main .build-recipe-parts > i {
  display: none;
}
.guide-main .build-component {
  position: relative;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 7px 9px;
  min-height: 62px;
  padding: 20px 9px 8px;
  border-color: rgba(117, 181, 201, .24);
  border-radius: 6px;
  background: rgba(6, 15, 24, .88);
}
.guide-main .build-component-order {
  position: absolute;
  top: 5px;
  left: 8px;
  margin: 0;
  color: #68ddec;
  font-size: .5rem;
  font-weight: 950;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.recipe-check {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid rgba(151, 171, 212, .62);
  border-radius: 5px;
  background: #07111a;
  cursor: pointer;
}
.recipe-check:checked {
  border-color: #4fe6a6;
  background-color: #4fe6a6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23071311' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='m3 8 3 3 7-7'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}
.recipe-check:focus-visible {
  outline: 2px solid rgba(111, 238, 247, .85);
  outline-offset: 2px;
}
.recipe-check:disabled { cursor: default; opacity: .72; }
.recipe-check[hidden] { display: none; }
.guide-main .build-component > .recipe-check,
.guide-main .build-combine-cost > .recipe-check {
  position: absolute;
  top: 7px;
  right: 7px;
}
.guide-main .build-component-finish {
  grid-column: 1 / -1;
  width: max-content;
  margin: 0;
  padding: 3px 6px;
  border-radius: 999px;
  color: #f2cf83;
  background: rgba(216, 169, 63, .09);
  font-size: .52rem;
  font-weight: 850;
}
.guide-main .build-sequence.is-tracking [data-recipe-entry].is-purchased {
  border-color: rgba(79, 230, 166, .48);
  background: rgba(79, 230, 166, .08);
}
.guide-main .build-sequence.is-tracking [data-recipe-entry].is-purchased b,
.guide-main .build-sequence.is-tracking [data-recipe-entry].is-purchased strong { color: #b9f9d9; }
.guide-main .build-sequence.is-tracking [data-recipe-entry].is-purchased img { opacity: .68; }
.guide-main .build-sequence.is-tracking > li.is-complete {
  opacity: 1;
  border-color: rgba(79, 230, 166, .42);
  background: linear-gradient(100deg, rgba(79, 230, 166, .08), rgba(8, 15, 24, .96) 44%);
}
.guide-main .build-sequence.is-tracking > li.is-complete > img,
.guide-main .build-sequence.is-tracking > li.is-complete > .build-item-copy { opacity: .7; }
.guide-main .build-items .build-component > img {
  width: 38px;
  height: 38px;
}
.guide-main .build-component b {
  max-width: none;
  overflow: visible;
  font-size: .69rem;
  text-overflow: clip;
  white-space: normal;
}
.guide-main .build-component > span:not(.build-component-subparts) small {
  color: #f0ca77;
  font-size: .61rem;
  font-weight: 850;
}
.guide-main .build-component-subparts {
  gap: 5px;
  padding-top: 7px;
}
.guide-main .build-subpart {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  min-width: 0;
  width: 100%;
  flex: 1 1 100%;
  padding: 4px;
  border: 1px solid rgba(151, 171, 212, .11);
  border-radius: 4px;
  background: rgba(151, 171, 212, .045);
}
.guide-main .build-items .build-subpart > img {
  grid-column: 1;
  grid-row: 1;
  width: 22px;
  height: 22px;
}
.guide-main .build-sequence.is-tracking .build-subpart {
  grid-template-columns: 18px 22px minmax(0, 1fr);
}
.guide-main .build-sequence.is-tracking .build-subpart > .recipe-check {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}
.guide-main .build-sequence.is-tracking .build-subpart > img { grid-column: 2; }
.guide-main .build-sequence.is-tracking .build-subpart > small { grid-column: 3; }
.guide-main .build-subpart small {
  grid-column: 2;
  grid-row: 1;
  display: block;
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.guide-main .build-subpart b,
.guide-main .build-subpart em {
  display: block;
  overflow-wrap: anywhere;
}
.guide-main .build-subpart b {
  color: #c8d5e4;
  font-size: .52rem;
}
.guide-main .build-subpart em {
  margin-top: 1px;
  color: #8e9eb2;
  font-size: .48rem;
  font-style: normal;
}
.guide-main .build-combine-cost {
  position: relative;
  display: grid;
  min-height: 62px;
  align-self: start;
  place-content: center;
  border-radius: 6px;
}

.custom-build-editor {
  margin: 0 0 12px;
  border: 1px solid rgba(151, 171, 212, .2);
  border-radius: 8px;
  background: #09121b;
}
.custom-build-editor > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 10px;
  align-items: center;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
}
.custom-build-editor > summary::-webkit-details-marker { display: none; }
.custom-build-editor > summary::after {
  content: '+';
  grid-column: 3;
  grid-row: 1 / 3;
  color: #73e6f1;
  font-size: 1.2rem;
  font-weight: 900;
}
.custom-build-editor[open] > summary::after { content: '\2212'; }
.custom-build-editor > summary span { color: #69dfed; font-size: .63rem; font-weight: 950; text-transform: uppercase; }
.custom-build-editor > summary strong { color: #f1f6fb; font-size: .88rem; }
.custom-build-editor > summary small { grid-column: 2; color: #8fa0b4; font-size: .66rem; }
.custom-build-editor-body {
  display: grid;
  grid-template-columns: minmax(160px, .55fr) minmax(220px, 1fr) auto auto;
  gap: 9px;
  align-items: end;
  padding: 14px 15px 15px;
  border-top: 1px solid rgba(151, 171, 212, .15);
}
.custom-build-editor-body label span { display: block; margin-bottom: 5px; color: #9aabc0; font-size: .62rem; font-weight: 850; }
.custom-build-editor-body :is(select, input) {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid rgba(151, 171, 212, .3);
  border-radius: 6px;
  color: #edf5fb;
  background: #070e16;
  font: inherit;
}
.custom-build-editor-body button {
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid rgba(62, 210, 229, .4);
  border-radius: 999px;
  color: #dffbff;
  background: rgba(62, 210, 229, .1);
  font: inherit;
  font-size: .7rem;
  font-weight: 900;
  cursor: pointer;
}
.custom-build-editor-body button:is(:hover, :focus-visible) { outline: 0; border-color: #6ce6f0; background: rgba(62, 210, 229, .18); }
.custom-build-editor-body .custom-build-restore { border-color: rgba(151, 171, 212, .3); color: #b8c5d5; background: rgba(151, 171, 212, .06); }
.custom-build-status { grid-column: 1 / -1; margin: 2px 0 0; color: #91a3b8; font-size: .68rem; }
.custom-build-overrides { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.custom-build-overrides[hidden] { display: none; }
.custom-build-overrides span { display: inline-flex; gap: 6px; padding: 5px 8px; border: 1px solid rgba(79, 230, 166, .25); border-radius: 999px; color: #c9f7df; background: rgba(79, 230, 166, .07); font-size: .64rem; }
.custom-build-overrides b { color: #6febb1; }
@media (max-width: 900px) {
  .custom-build-editor-body { grid-template-columns: 1fr 1fr; }
  .custom-build-editor-body button { width: 100%; }
}
@media (max-width: 560px) {
  .custom-build-editor > summary { grid-template-columns: 1fr auto; }
  .custom-build-editor > summary span,
  .custom-build-editor > summary strong,
  .custom-build-editor > summary small { grid-column: 1; }
  .custom-build-editor > summary::after { grid-column: 2; grid-row: 1 / 4; }
  .custom-build-editor-body { grid-template-columns: 1fr; }
}
@media (min-width: 1100px) {
  .guide-main .build-sequence li:not(:last-child)::after { display: none; }
}
@media (max-width: 780px) {
  .guide-main .build-sequence > li,
  .guide-main .build-sequence > li.build-opening-step {
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "art copy"
      "recipe recipe";
    gap: 8px 11px;
    padding: 12px;
  }
  .guide-main .build-sequence > li > img {
    width: 50px;
    height: 50px;
  }
  .guide-main .build-sequence > li > .build-recipe {
    margin-top: 4px;
    padding: 11px 0 0;
    border-top: 1px solid rgba(62, 210, 229, .18);
    border-left: 0;
  }
  .guide-main .build-recipe-parts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .guide-main .build-recipe-heading { align-items: flex-start; }
  .guide-main .build-sequence > li > .build-step-head > .build-check {
    min-width: 108px;
    padding-inline: 9px;
  }
}

/* Honor guide */
.honor-page main { width: min(1180px, calc(100% - 32px)); margin: 24px auto 70px; }
.honor-hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(250px, .55fr); gap: 28px; align-items: end; min-height: 330px; padding: 42px; border: 1px solid rgba(88, 223, 233, .22); border-radius: 8px; background: linear-gradient(104deg, rgba(4, 11, 19, .97), rgba(7, 26, 34, .91)), url('/league/champion/shen/splash.jpg') center 32%/cover; }
.honor-hero h1 { max-width: 760px; margin: 6px 0 12px; font-size: clamp(2.2rem, 5vw, 4.5rem); line-height: .98; }
.honor-hero p { max-width: 700px; color: #bdcad4; font-size: 1.05rem; }
.honor-hero aside { padding: 20px; border: 1px solid rgba(224, 169, 63, .42); border-left: 4px solid #d9ad52; border-radius: 7px; background: rgba(12, 13, 18, .9); }
.honor-hero-status { display: grid; grid-template-columns: 142px minmax(0, 1fr); gap: 4px 12px; align-items: center; overflow: hidden; }
.honor-hero-status img { width: 150px; max-width: none; margin: -14px 0 -14px -18px; filter: drop-shadow(0 12px 20px rgba(220, 163, 54, .24)); }
.honor-hero-status > div { min-width: 0; }.honor-hero aside strong { display: block; color: #fff2cc; font-size: 1.75rem; }.honor-hero aside span { color: #dfbd72; font-weight: 900; }.honor-hero-status > p { grid-column: 1 / -1; margin: 7px 0 0; padding-top: 12px; border-top: 1px solid rgba(224,169,63,.2); color: #c6d0d7; font-size: .82rem; line-height: 1.5; }
.honor-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }.honor-hero-actions a, .honor-jumps a, .honor-sources a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid rgba(78, 222, 235, .48); border-radius: 999px; color: #e4fbff; background: #092832; font-weight: 850; text-decoration: none; }
.honor-jumps { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 18px 0 26px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 7px; background: #0c141d; }.honor-jumps > span { margin-right: 5px; color: #8095a5; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.honor-levels, .honor-progress, .honor-rewards, .honor-recovery, .honor-sources { margin: 26px 0; padding: 30px; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; background: #0b121a; }
.honor-levels > header, .honor-rewards > header, .honor-sources { display: flex; justify-content: space-between; align-items: end; gap: 24px; }.honor-levels > header > p, .honor-rewards > header > p { max-width: 520px; color: #99adbb; }
.honor-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.honor-track article { position: relative; display: grid; grid-template-rows: 150px auto; align-content: start; min-width: 0; overflow: hidden; padding: 14px; border: 1px solid rgba(255,255,255,.09); border-top: 3px solid #877042; border-radius: 7px; background: linear-gradient(180deg, rgba(37, 28, 16, .74), #101923 36%); }
.honor-track article.is-level-1, .honor-track article.is-level-2 { border-top-color: #b96862; background: linear-gradient(180deg, rgba(65, 24, 24, .55), #101923 36%); }
.honor-track article.is-level-3 { border-top-color: #d3a944; }
.honor-track article.is-level-4 { border-top-color: #e6bb50; box-shadow: inset 0 1px rgba(255, 223, 138, .12); }
.honor-track article.is-level-5 { border-top-color: #ffcb57; background: linear-gradient(180deg, rgba(89, 48, 8, .68), #171a22 40%); box-shadow: 0 12px 34px rgba(207, 116, 20, .1); }
.honor-emblem { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 142px; }
.honor-emblem img { width: 146px; height: 146px; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0,0,0,.4)); }
.honor-emblem b { position: absolute; right: 4px; bottom: 7px; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(244, 202, 112, .6); border-radius: 50%; color: #fff4d4; background: #2d2111; font-size: .8rem; }
.honor-level-copy small { color: #6edbe6; font-weight: 900; text-transform: uppercase; }.honor-level-copy h3 { margin: 3px 0 6px; }.honor-level-copy p { margin: 0; color: #acbdc9; }.honor-level-copy > div { display: grid; grid-template-columns: 180px 1fr; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); }.honor-level-copy > div strong { color: #e3c98e; }.honor-level-copy > div span { color: #c5d1da; }
.honor-track .honor-level-copy > div { grid-template-columns: 1fr; gap: 5px; }
.honor-progress > header { max-width: 850px; }.honor-progress > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 20px 0; }.honor-progress article { position: relative; padding: 21px; border: 1px solid rgba(74,220,232,.16); border-radius: 7px; background: #101a24; }.honor-progress article > span { color: #4de0eb; font-size: 2rem; font-weight: 950; }.honor-progress article p { color: #aabac6; }.honor-progress aside { padding: 18px 20px; border-left: 4px solid #e0a651; background: #20180d; }.honor-progress aside p { margin-bottom: 0; color: #d6c6aa; }
.honor-reward-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 22px 0; }.honor-reward-grid article { display: grid; gap: 12px; align-content: start; padding: 16px; border: 1px solid rgba(177,151,255,.2); border-radius: 7px; background: linear-gradient(145deg,#111927,#17142a); }.honor-reward-grid img { border-radius: 7px; }.honor-reward-grid small { display: block; color: #8cdeea; }.honor-reward-grid strong { color: #f0eaff; }
.honor-reward-notes { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.honor-reward-notes article { padding: 16px; border-top: 2px solid #54dfe9; background: #101923; }.honor-reward-notes p { color: #a7bac7; }
.honor-recovery { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 28px; }.honor-recovery ol { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }.honor-recovery li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 14px; background: #111a24; }.honor-recovery li b { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #d76d76; border-radius: 50%; color: #ffdfe2; }.honor-recovery li span { color: #aabac6; }.honor-recovery li strong { display: block; color: #edf5f8; }
.honor-sources > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
@media (max-width: 1000px) { .honor-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }.honor-track article:last-child { grid-column: 1 / -1; grid-template-columns: 160px minmax(0, 1fr); grid-template-rows: auto; align-items: center; } }
@media (max-width: 840px) { .honor-hero, .honor-recovery { grid-template-columns: 1fr; }.honor-levels > header, .honor-rewards > header, .honor-sources { align-items: flex-start; flex-direction: column; }.honor-progress > div, .honor-reward-notes { grid-template-columns: 1fr; }.honor-reward-grid { grid-template-columns: repeat(2,1fr); }.honor-sources > div:last-child { justify-content: flex-start; } }
@media (max-width: 520px) { .honor-page main { width: min(100% - 20px,1180px); }.honor-hero, .honor-levels, .honor-progress, .honor-rewards, .honor-recovery, .honor-sources { padding: 20px 16px; }.honor-hero-status { grid-template-columns: 116px minmax(0, 1fr); }.honor-hero-status img { width: 124px; }.honor-track { grid-template-columns: 1fr; }.honor-track article, .honor-track article:last-child { grid-column: auto; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto; align-items: center; }.honor-emblem { height: 112px; }.honor-emblem img { width: 120px; height: 120px; }.honor-level-copy > div { grid-template-columns: 1fr; }.honor-reward-grid { grid-template-columns: 1fr; } }

@media (max-width: 520px) {
  .honor-page main,
  .honor-hero,
  .honor-hero > div,
  .honor-hero-status,
  .honor-levels,
  .honor-progress,
  .honor-rewards,
  .honor-recovery,
  .honor-sources { min-width: 0; max-width: 100%; }
  .honor-hero h1 { max-width: 100%; font-size: 2rem; line-height: 1.03; overflow-wrap: anywhere; }
  .honor-hero > div > p { max-width: 100%; font-size: .94rem; overflow-wrap: anywhere; }
  .honor-hero-status { grid-template-columns: 92px minmax(0, 1fr); }
  .honor-hero-status img { width: 100px; margin-left: -12px; }
  .honor-hero-status > p { font-size: .78rem; }
}

@media (max-width: 760px) {
  .topbar .league-nav { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); width: 100%; gap: 2px; }
  .topbar .league-nav > a,
  .topbar .league-nav-more > summary,
  .topbar .league-language > summary { justify-content: center; width: 100%; min-width: 0; padding: 0 4px; font-size: 10px; }
  .topbar .league-nav-more,
  .topbar .league-language { min-width: 0; }
  .topbar .league-language > summary { gap: 3px; }
  .topbar .league-language .language-current-name,
  .topbar .league-language .language-chevron { display: none; }
  .topbar .league-language .language-current-code { display: inline; }
  .topbar .league-language .language-globe { width: 14px; height: 14px; }
  .topbar .league-language > div { position: fixed; top: 58px; right: 10px; left: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; max-height: calc(100vh - 74px); overflow-y: auto; }
}

@media (max-width: 520px) {
  .guide-main .guide-hero .hero-copy { min-width: 0; padding: 20px 24px; }
  .guide-main .guide-hero .hero-copy h1 {
    max-width: 100%;
    font-size: 32px;
    overflow-wrap: anywhere;
  }
}

/* Decisive mid-game item swaps */
.build-problem-result { grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: 20px; align-items: stretch; padding: 18px; border-color: rgba(86, 224, 235, .28); background: linear-gradient(130deg, rgba(6, 18, 28, .97), rgba(18, 18, 35, .95)); }
.build-swap-visual { display: grid; grid-template-columns: 1fr 34px 1fr; gap: 10px; align-items: center; padding: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 7px; background: rgba(2,8,15,.62); }
.build-swap-visual > b { color: #66dfe9; font-size: 1.6rem; text-align: center; }
.build-swap-visual > div { display: grid; justify-items: center; gap: 6px; min-width: 0; text-align: center; }
.build-swap-visual > div small { color: #8296a7; font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.build-swap-visual > div strong { color: #edf6fa; font-size: .78rem; overflow-wrap: anywhere; }
.build-swap-visual > div span { padding: 4px 7px; border-radius: 999px; font-size: .62rem; font-weight: 850; }
.build-swap-visual .is-out img { filter: saturate(.55); opacity: .76; }.build-swap-visual .is-out span { color: #ffc5c8; background: rgba(211,82,92,.13); }.build-swap-visual .is-in img { border: 2px solid #4fe6a6; box-shadow: 0 0 18px rgba(79,230,166,.16); }.build-swap-visual .is-in span { color: #bff8dc; background: rgba(79,230,166,.13); }
.build-swap-copy { display: grid; align-content: start; }.build-swap-copy > span { color: #7edce6; font-size: .72rem; }.build-swap-copy h4 { margin: 4px 0 7px; color: #fff; font-size: 1.15rem; }.build-swap-copy > p { margin: 0 0 12px; color: #bdc9d3; }
.build-sell-rules { padding: 13px 15px; border-left: 3px solid #e5ac53; background: #21190e; }.build-sell-rules > strong { color: #ffe1a9; }.build-sell-rules ul { display: grid; gap: 6px; margin: 8px 0 0; padding-left: 18px; color: #d4c6ad; font-size: .76rem; }.build-sell-rules li b { color: #f3e3c6; }
.build-problem-result .add-counter-item { display: inline-grid; justify-items: start; width: max-content; min-height: 48px; margin-top: 13px; padding: 8px 17px; border: 1px solid rgba(79,230,166,.55); border-radius: 999px; color: #e2fff0; background: #123a2b; cursor: pointer; }.build-problem-result .add-counter-item span { color: inherit; font-size: .78rem; font-weight: 950; }.build-problem-result .add-counter-item small { color: #9bd9bb; font-size: .62rem; }.build-problem-result .add-counter-item:disabled { cursor: default; opacity: .72; }
.guide-main .win-rate-note.is-pending { grid-template-columns: minmax(180px, .34fr) minmax(0, .66fr); gap: 18px; padding: 18px; border: 1px solid rgba(218,169,63,.28); border-left: 4px solid var(--gold); border-radius: 7px; background: linear-gradient(135deg,rgba(43,31,12,.72),#101923 48%); }
.matchup-stat-state { display: grid; align-content: center; min-height: 116px; padding: 15px; border: 1px solid rgba(218,169,63,.22); border-radius: 6px; background: rgba(7,12,18,.58); }
.matchup-stat-state small, .matchup-stat-state strong, .matchup-stat-state span { display: block; }
.matchup-stat-state small { color: #d9bc78; font-size: .64rem; font-weight: 900; text-transform: uppercase; }
.matchup-stat-state strong { margin: 4px 0; color: #fff4d5; font-size: 1.3rem; }
.matchup-stat-state span { color: #a9b8c3; font-size: .72rem; line-height: 1.4; }
.matchup-stat-copy > strong { display: block; color: #f1f6f8; font-size: .95rem; }
.matchup-stat-copy > p { margin: 6px 0 0; color: #aebdc8; line-height: 1.55; }
.matchup-stat-requirements { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }.matchup-stat-requirements span { padding: 5px 9px; border: 1px solid rgba(89,220,233,.25); border-radius: 999px; color: #acdce2; background: rgba(49,190,207,.07); font-size: .65rem; font-weight: 850; }
@media (max-width: 760px) { .build-problem-result { grid-template-columns: 1fr; }.build-swap-visual { grid-template-columns: 1fr 28px 1fr; }.build-problem-result .add-counter-item { width: 100%; justify-items: center; } }
@media (max-width: 620px) { .guide-main .win-rate-note.is-pending { grid-template-columns: 1fr; }.matchup-stat-state { min-height: 0; } }

.matchup-evidence.is-published { border-color: rgba(75, 223, 163, .38); background: linear-gradient(110deg, rgba(15, 78, 57, .22), rgba(5, 15, 24, .86)); }
.matchup-evidence.is-published .matchup-stat-state { border-color: rgba(75, 223, 163, .34); background: rgba(7, 43, 32, .72); }
.matchup-evidence.is-published .matchup-stat-state small { color: #7be9bc; }
.matchup-evidence.is-published .matchup-stat-state strong { color: #d8ffef; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; }
.matchup-sample-meter { overflow: hidden; height: 6px; margin-top: 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.matchup-sample-meter i { display: block; min-width: 2px; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d6a93f, #43dbe8); }
.matchup-role-caution { padding: 10px 12px; border-left: 3px solid #ef9d4d; background: rgba(239, 157, 77, .07); }
.matchup-role-caution b { color: #ffd19c; }
.matchup-method-note { display: block; margin-top: 10px; color: #73889a; font-size: .64rem; line-height: 1.5; }
@media (max-width: 480px) {
  .guide-main .build-recipe-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .guide-main .build-recipe-heading button { padding: 6px 8px; }
  .guide-main .build-recipe-heading button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .guide-main .build-check-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .guide-main .build-sequence > li > .build-step-head > .build-check { min-width: 36px; width: 36px; padding: 0; }
}
@media (max-width: 340px) {
  .guide-main .build-recipe-parts { grid-template-columns: 1fr; }
  .guide-main .build-component { min-height: 0; }
  .guide-main .build-combine-cost { min-height: 54px; }
}

/* Champion library and independently written champion references. */
.champion-page main { width: min(1240px, calc(100% - 32px)); }
.champion-directory-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 32px;
  align-items: end;
  min-height: 270px;
  padding: 42px;
  border-bottom: 3px solid #38d9e9;
  background: linear-gradient(105deg, rgba(5, 11, 18, .96), rgba(9, 31, 37, .88)), url('/league/champion/jinx/splash.jpg') center 28%/cover;
}
.champion-directory-hero h1,
.champion-detail-hero h1 { margin: 5px 0 10px; color: #f8fbff; font-size: clamp(2.25rem, 5vw, 4.6rem); line-height: .98; }
.champion-directory-hero p { max-width: 760px; margin: 0; color: #bdcbd9; line-height: 1.65; }
.champion-directory-hero label { display: block; padding: 16px; border: 1px solid rgba(75, 223, 237, .32); border-radius: 7px; background: rgba(5, 12, 20, .9); }
.champion-directory-hero label span { display: block; margin-bottom: 7px; color: #82eef5; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.champion-directory-hero input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid rgba(145, 167, 194, .35); border-radius: 5px; color: #f4f8fd; background: #070e16; font: inherit; }
.champion-directory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; padding: 20px 0 40px; }
.champion-directory > a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 11px; align-items: center; min-width: 0; padding: 11px; border: 1px solid rgba(145, 167, 194, .18); border-radius: 7px; color: inherit; background: #0a121d; text-decoration: none; }
.champion-directory > a:is(:hover, :focus-visible) { outline: 0; border-color: rgba(70, 220, 234, .65); background: #0d1b27; transform: translateY(-1px); }
.champion-directory > a[hidden] { display: none; }
.champion-directory img { width: 56px; height: 56px; border-radius: 5px; }
.champion-directory span { min-width: 0; }
.champion-directory strong,
.champion-directory small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.champion-directory strong { color: #eef6ff; font-size: .85rem; }
.champion-directory small { margin-top: 4px; color: #8799ae; font-size: .65rem; }
.champion-directory b { padding: 5px 8px; border-radius: 999px; color: #91edf3; background: rgba(56, 217, 233, .08); font-size: .58rem; text-transform: uppercase; }
.champion-detail-hero { position: relative; min-height: 390px; overflow: hidden; border-bottom: 3px solid #38d9e9; background: linear-gradient(90deg, rgba(5, 9, 15, .98) 0%, rgba(5, 9, 15, .87) 48%, rgba(5, 9, 15, .24) 100%), var(--champion-splash) center 23%/cover; }
.champion-detail-copy { display: grid; grid-template-columns: 86px minmax(0, 700px); gap: 20px; align-items: start; padding: 76px 50px 52px; }
.champion-detail-copy > img { width: 86px; height: 86px; border: 2px solid rgba(77, 229, 240, .7); border-radius: 7px; box-shadow: 0 14px 35px rgba(0, 0, 0, .42); }
.champion-detail-copy h1 + p { margin: 0; color: #c4d2df; font-size: 1rem; line-height: 1.65; }
.champion-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.champion-hero-actions a,
.champion-next a,
.champion-error a { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 13px; border: 1px solid rgba(67, 220, 233, .45); border-radius: 999px; color: #dffbff; background: rgba(40, 187, 202, .12); font-size: .72rem; font-weight: 900; text-decoration: none; }
.champion-hero-actions a:is(:hover, :focus-visible),
.champion-next a:is(:hover, :focus-visible) { outline: 0; border-color: #68e9f3; background: rgba(40, 187, 202, .22); }
.champion-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid rgba(145, 167, 194, .18); background: #080f18; }
.champion-facts > div { padding: 17px 20px; border-right: 1px solid rgba(145, 167, 194, .14); }
.champion-facts > div:last-child { border-right: 0; }
.champion-facts span,
.champion-facts strong { display: block; }
.champion-facts span { color: #8093a9; font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.champion-facts strong { margin-top: 5px; color: #edf5fb; font-size: .83rem; }
.champion-facts small { display: block; margin-top: 5px; color: #8fa5b9; font-size: .64rem; line-height: 1.4; }
.champion-attack-fact { box-shadow: inset 0 3px #42d7e5; background: #091824; }
.matchup-attack-types { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: stretch; margin: 12px 0 18px; }
.matchup-attack-types > article { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 11px; align-items: center; min-width: 0; padding: 12px 14px; border: 1px solid rgba(70, 220, 234, .3); border-left: 4px solid #42d7e5; border-radius: 7px; background: #091722; }
.matchup-attack-types > article.is-enemy { border-color: rgba(238, 100, 143, .3); border-left-color: #e8648e; background: #1b1018; }
.matchup-attack-types img { width: 44px; height: 44px; border-radius: 5px; }
.matchup-attack-types small, .matchup-attack-types strong, .matchup-attack-types p { display: block; min-width: 0; }
.matchup-attack-types small { color: #8194a8; font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.matchup-attack-types strong { margin-top: 2px; color: #effaff; font-size: .84rem; }
.matchup-attack-types p { margin: 3px 0 0; color: #98aabc; font-size: .67rem; line-height: 1.4; }
.matchup-attack-types > span { align-self: center; color: #8292a4; font-size: .65rem; font-weight: 950; }
.jinx-game-plan,
.champion-abilities,
.jinx-rocket,
.champion-next { margin-top: 18px; border: 1px solid rgba(145, 167, 194, .18); border-radius: 7px; background: #09111b; }
.jinx-game-plan,
.champion-abilities,
.jinx-rocket { padding: 24px; }
.jinx-game-plan h2,
.champion-abilities h2,
.jinx-rocket h2,
.champion-next h2 { margin: 3px 0 0; color: #f1f7fc; }
.jinx-game-plan > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 18px; }
.jinx-game-plan article { position: relative; min-height: 128px; padding: 17px 17px 17px 56px; border: 1px solid rgba(77, 229, 240, .2); border-radius: 6px; background: #071722; }
.jinx-game-plan article > span { position: absolute; top: 16px; left: 16px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #4adbea; border-radius: 50%; color: #dffcff; font-weight: 950; }
.jinx-game-plan strong { color: #eaf8ff; }
.jinx-game-plan article p { margin: 7px 0 0; color: #91a5b8; font-size: .75rem; line-height: 1.55; }
.champion-abilities > header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .65fr); gap: 25px; align-items: end; padding-bottom: 18px; border-bottom: 1px solid rgba(145, 167, 194, .16); }
.champion-abilities > header > p { margin: 0; color: #8fa2b6; font-size: .74rem; line-height: 1.55; }
.champion-ability-list { display: grid; gap: 8px; margin-top: 16px; }
.champion-ability-list > article { display: grid; grid-template-columns: 42px 58px minmax(0, 1fr); gap: 13px; align-items: start; padding: 14px; border: 1px solid rgba(145, 167, 194, .16); border-radius: 6px; background: #070f18; }
.champion-ability-list > article.is-ultimate { border-color: rgba(232, 78, 117, .4); background: linear-gradient(100deg, rgba(232, 78, 117, .08), #070f18 42%); }
.champion-ability-key { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(76, 222, 235, .55); border-radius: 6px; color: #d9fbff; background: #0b2833; font-weight: 950; }
.champion-ability-list img { width: 58px; height: 58px; border-radius: 5px; }
.champion-ability-copy { min-width: 0; }
.champion-ability-copy > span { color: #61dce8; font-size: .6rem; font-weight: 900; text-transform: uppercase; }
.champion-ability-copy h3 { margin: 3px 0 5px; color: #f2f7fc; font-size: 1rem; }
.champion-ability-copy > p { max-width: 900px; margin: 0; color: #aab9c8; font-size: .76rem; line-height: 1.55; }
.champion-ability-values { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.champion-ability-values span { display: inline-flex; gap: 5px; align-items: baseline; padding: 5px 8px; border: 1px solid rgba(145, 167, 194, .16); border-radius: 999px; background: rgba(145, 167, 194, .055); }
.champion-ability-values small { color: #8295aa; font-size: .54rem; text-transform: uppercase; }
.champion-ability-values b { color: #dce9f4; font-size: .62rem; }
.jinx-rocket { border-color: rgba(232, 78, 117, .35); background: linear-gradient(130deg, rgba(232, 78, 117, .08), #09111b 48%); }
.jinx-rocket > header { max-width: 880px; }
.jinx-rocket > header > p:last-child { color: #a8b7c7; line-height: 1.6; }
.rocket-range { display: grid; grid-template-columns: auto minmax(50px, 1fr) auto minmax(100px, 2.4fr) auto; gap: 11px; align-items: center; margin: 22px 0; padding: 15px; border: 1px solid rgba(238, 86, 127, .3); border-radius: 6px; background: #080e17; color: #dce9f5; font-size: .7rem; font-weight: 900; }
.rocket-range i { height: 3px; background: linear-gradient(90deg, #f34e7b, #ffbd5c); box-shadow: 0 0 12px rgba(243, 78, 123, .55); }
.rocket-range strong { color: #ffd67e; }
.rocket-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rocket-facts article { padding: 14px; border: 1px solid rgba(145, 167, 194, .17); border-radius: 6px; background: #070f18; }
.rocket-facts span,
.rocket-facts strong { display: block; }
.rocket-facts span { color: #ef7598; font-size: .6rem; font-weight: 900; text-transform: uppercase; }
.rocket-facts strong { margin-top: 5px; color: #f5f8fc; font-size: .84rem; }
.rocket-facts p,
.rocket-decisions p { margin: 7px 0 0; color: #91a3b5; font-size: .7rem; line-height: 1.5; }
.rocket-decisions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.rocket-decisions article { padding: 14px; border: 1px solid; border-radius: 6px; }
.rocket-decisions .good { border-color: rgba(67, 225, 155, .3); background: rgba(67, 225, 155, .06); }
.rocket-decisions .bad { border-color: rgba(255, 123, 123, .3); background: rgba(255, 123, 123, .055); }
.rocket-decisions strong { color: #f0f7fc; }
.champion-source-note { margin: 15px 0 0; color: #74879b; font-size: .63rem; }
.champion-build-summary { margin-top: 18px; padding: 24px; scroll-margin-top: 82px; border: 1px solid rgba(72, 219, 233, .28); border-radius: 7px; background: linear-gradient(135deg, rgba(72, 219, 233, .07), #09111b 38%, rgba(235, 180, 80, .045)); }
.champion-mode-switcher { margin: 22px 0 10px; padding: 17px; scroll-margin-top: 82px; border: 1px solid rgba(151, 171, 212, .18); border-radius: 7px; background: linear-gradient(100deg, rgba(239, 185, 73, .075), #080f17 34%, rgba(151, 80, 237, .055)); }
.champion-mode-switcher > header { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.champion-mode-switcher > header h2 { margin: 2px 0 0; color: #f2f7fb; font-size: 1.15rem; }
.champion-mode-switcher > header > p { max-width: 560px; margin: 0; color: #93a4b4; font-size: .69rem; line-height: 1.45; text-align: right; }
.champion-build-queues { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 0 0 18px; }
.champion-mode-switcher .champion-build-queues { margin-bottom: 0; }
.champion-build-queues a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center; min-width: 0; min-height: 52px; padding: 9px 12px; border: 1px solid rgba(145, 167, 194, .2); border-radius: 6px; color: #d8e6ef; background: #09131e; text-decoration: none; }
.champion-build-queues a span { min-width: 0; font-size: .72rem; font-weight: 950; line-height: 1.15; }
.champion-build-queues a small { padding: 4px 7px; border: 1px solid rgba(145, 167, 194, .16); border-radius: 999px; color: #8297a9; font-size: .53rem; font-weight: 850; white-space: nowrap; }
.champion-build-queues a:is(:hover, :focus-visible) { outline: 0; border-color: rgba(72, 219, 233, .65); background: rgba(72, 219, 233, .09); }
.champion-build-queues a.is-current { border-color: #4bdde8; color: #efffff; background: linear-gradient(135deg, rgba(72, 219, 233, .18), rgba(151, 80, 237, .08)); box-shadow: inset 0 -3px #4bdde8; }
.champion-build-queues a.is-current small { border-color: rgba(72, 219, 233, .42); color: #aef6f7; background: rgba(72, 219, 233, .08); }
.champion-build-summary > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding-bottom: 17px; border-bottom: 1px solid rgba(145, 167, 194, .16); }
.champion-build-summary h2 { margin: 3px 0 7px; color: #f2f8fd; }
.champion-build-summary header p { max-width: 780px; margin: 0; color: #95a8ba; font-size: .74rem; line-height: 1.55; }
.champion-build-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.champion-build-actions a { display: inline-flex; min-height: 36px; align-items: center; padding: 7px 12px; border: 1px solid rgba(72, 219, 233, .38); border-radius: 999px; color: #c7f9fc; background: rgba(72, 219, 233, .09); font-size: .64rem; font-weight: 900; text-decoration: none; }
.champion-build-actions a:last-child { border-color: rgba(235, 180, 80, .32); color: #ffe1a2; background: rgba(235, 180, 80, .07); }
.champion-build-actions a:is(:hover, :focus-visible) { outline: 0; border-color: #78ecf3; background: rgba(72, 219, 233, .16); }
.champion-build-opening { display: grid; grid-template-columns: auto 58px minmax(0, 1fr); gap: 13px; align-items: center; margin-top: 16px; padding: 14px 16px; border: 1px solid rgba(67, 225, 155, .3); border-left: 4px solid #43df9d; border-radius: 6px; background: rgba(17, 45, 40, .46); }
.champion-build-opening > span { align-self: start; padding: 5px 8px; border-radius: 999px; color: #07271d; background: #72e7b5; font-size: .57rem; font-weight: 950; text-transform: uppercase; }
.champion-build-opening img,
.champion-build-path img { border-radius: 6px; background: #080d14; object-fit: cover; }
.champion-build-opening strong,
.champion-build-opening small { display: block; }
.champion-build-opening strong { color: #f1f9fc; font-size: .9rem; }
.champion-build-opening small { margin-top: 3px; color: #8fdfbd; font-size: .61rem; font-weight: 800; }
.champion-build-opening p { margin: 5px 0 0; color: #a8b9c7; font-size: .69rem; line-height: 1.45; }
.champion-build-mode-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 13px; align-items: center; margin-top: 16px; padding: 14px 16px; border: 1px solid rgba(177, 116, 255, .34); border-left: 4px solid #a771ff; border-radius: 6px; background: rgba(37, 24, 59, .46); }
.champion-build-mode-note strong { color: #f0e8ff; font-size: .72rem; white-space: nowrap; }
.champion-build-mode-note span { color: #aa9fbe; font-size: .66rem; line-height: 1.5; }
.champion-build-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.champion-build-path li { position: relative; display: grid; grid-template-columns: 58px 52px minmax(0, 1fr); gap: 10px; align-items: start; min-height: 126px; padding: 13px; border: 1px solid rgba(145, 167, 194, .17); border-radius: 6px; background: #070f18; }
.champion-build-path li.is-quest { border-color: rgba(177, 116, 255, .34); background: linear-gradient(135deg, rgba(151, 80, 237, .1), #070f18 58%); }
.champion-build-step { display: inline-flex; width: 42px; min-width: 42px; min-height: 42px; align-items: center; justify-content: center; padding: 6px 10px; border: 1px solid rgba(78, 225, 238, .72); border-radius: 8px; color: #d8fcff; background: #092a36; box-shadow: 0 0 0 3px rgba(62, 210, 229, .08), 0 6px 16px rgba(0, 0, 0, .26); font-size: 1rem; font-weight: 950; line-height: 1; white-space: nowrap; }
.champion-build-path .is-quest .champion-build-step { width: max-content; min-width: 58px; border-color: rgba(226, 170, 84, .72); color: #fff1d2; background: #5a3b12; box-shadow: 0 0 0 3px rgba(226, 170, 84, .08), 0 6px 16px rgba(0, 0, 0, .26); font-size: .62rem; letter-spacing: .02em; text-transform: uppercase; }
.champion-build-path small,
.champion-build-path strong,
.champion-build-path b { display: block; }
.champion-build-path small { color: #7fdce5; font-size: .55rem; font-weight: 900; text-transform: uppercase; }
.champion-build-path strong { margin-top: 3px; color: #f2f7fc; font-size: .78rem; }
.champion-build-path b { margin-top: 3px; color: #f5c978; font-size: .6rem; }
.champion-build-path p { margin: 6px 0 0; color: #8fa2b5; font-size: .64rem; line-height: 1.45; }
.champion-build-summary > footer { display: flex; flex-wrap: wrap; gap: 7px 12px; align-items: center; margin-top: 10px; padding: 12px 14px; border: 1px solid rgba(145, 167, 194, .14); border-radius: 6px; background: rgba(4, 10, 16, .56); }
.champion-build-summary > footer strong { color: #eef7fc; font-size: .68rem; }
.champion-build-summary > footer span { padding: 4px 7px; border-radius: 999px; color: #b8f5f8; background: rgba(72, 219, 233, .11); font-size: .55rem; font-weight: 900; text-transform: uppercase; }
.champion-build-summary > footer p { flex: 1 1 520px; margin: 0; color: #7f92a5; font-size: .62rem; line-height: 1.45; }
.champion-matchups,
.champion-state-guide,
.champion-kit-profile { margin-top: 18px; padding: 24px; border: 1px solid rgba(145, 167, 194, .18); border-radius: 7px; background: #09111b; }
.champion-matchups > header,
.champion-state-guide > header,
.champion-kit-profile > header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .65fr); gap: 24px; align-items: end; padding-bottom: 17px; border-bottom: 1px solid rgba(145, 167, 194, .16); }
.champion-matchups h2,
.champion-state-guide h2,
.champion-kit-profile h2 { margin: 3px 0 0; color: #f2f8fd; }
.champion-matchups > header > p,
.champion-state-guide > header > p,
.champion-kit-profile > header > p { margin: 0; color: #8fa2b6; font-size: .74rem; line-height: 1.55; }
.champion-kit-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.champion-kit-columns > div { overflow: hidden; border: 1px solid rgba(145, 167, 194, .18); border-radius: 7px; background: #070f18; }
.champion-kit-columns > .is-strength { border-top: 3px solid #39d9a0; }
.champion-kit-columns > .is-risk { border-top: 3px solid #f0a14c; }
.champion-kit-column-heading { padding: 14px 16px; border-bottom: 1px solid rgba(145, 167, 194, .14); }
.champion-kit-column-heading span,
.champion-kit-column-heading strong { display: block; }
.champion-kit-column-heading span { color: #8396aa; font-size: .6rem; font-weight: 900; text-transform: uppercase; }
.champion-kit-column-heading strong { margin-top: 4px; color: #edf6fc; font-size: .84rem; }
.champion-kit-columns article { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(145, 167, 194, .12); }
.champion-kit-columns article:last-child { border-bottom: 0; }
.champion-kit-columns article > span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid; border-radius: 50%; font-size: .76rem; font-weight: 950; }
.champion-kit-columns .is-strength article > span { border-color: rgba(57, 217, 160, .5); color: #76edbc; background: rgba(57, 217, 160, .08); }
.champion-kit-columns .is-risk article > span { border-color: rgba(240, 161, 76, .5); color: #ffc27e; background: rgba(240, 161, 76, .08); }
.champion-kit-columns h3 { margin: 0; color: #eff7fc; font-size: .82rem; }
.champion-kit-columns p { margin: 6px 0 0; color: #91a4b7; font-size: .7rem; line-height: 1.52; }
.champion-matchup-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.champion-matchup-group { overflow: hidden; border: 1px solid rgba(145, 167, 194, .18); border-radius: 7px; background: #070f18; }
.champion-matchup-group.is-favourable { border-top: 3px solid #42dca0; }
.champion-matchup-group.is-danger { border-top: 3px solid #f05d79; }
.champion-matchup-heading { min-height: 96px; padding: 15px 16px; border-bottom: 1px solid rgba(145, 167, 194, .15); }
.champion-matchup-heading span,
.champion-matchup-heading strong { display: block; }
.champion-matchup-heading span { color: #8fa2b6; font-size: .6rem; font-weight: 900; text-transform: uppercase; }
.champion-matchup-group.is-favourable .champion-matchup-heading strong { color: #77edb9; }
.champion-matchup-group.is-danger .champion-matchup-heading strong { color: #ff8aa0; }
.champion-matchup-heading strong { margin-top: 4px; font-size: .85rem; }
.champion-matchup-heading p { margin: 6px 0 0; color: #8093a6; font-size: .64rem; line-height: 1.4; }
.champion-matchup-group article { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(145, 167, 194, .12); }
.champion-matchup-group article:last-child { border-bottom: 0; }
.champion-matchup-group article img { width: 54px; height: 54px; border-radius: 6px; }
.champion-matchup-group article h3 { margin: 0 0 2px; color: #f3f8fc; font-size: .93rem; }
.champion-matchup-name { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.champion-matchup-name span { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; font-size: .52rem; font-weight: 950; text-transform: uppercase; }
.is-favourable .champion-matchup-name span { color: #05251a; background: #65dfa9; }
.is-danger .champion-matchup-name span { color: #2f0710; background: #ff849b; }
.champion-matchup-group article strong { color: #cbd8e4; font-size: .72rem; }
.champion-matchup-group article p { margin: 6px 0 10px; color: #91a4b7; font-size: .7rem; line-height: 1.5; }
.champion-matchup-group article p b { color: #dfeaf2; }
.champion-matchup-group article a,
.champion-matchup-footer a { display: inline-flex; min-height: 32px; align-items: center; padding: 6px 10px; border: 1px solid rgba(70, 220, 234, .35); border-radius: 999px; color: #bff8fc; background: rgba(56, 217, 233, .08); font-size: .62rem; font-weight: 900; text-decoration: none; }
.champion-matchup-group article a:is(:hover, :focus-visible),
.champion-matchup-footer a:is(:hover, :focus-visible) { outline: 0; border-color: #66e6f0; background: rgba(56, 217, 233, .16); }
.champion-matchup-footer { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-top: 10px; padding: 14px 16px; border: 1px solid rgba(56, 217, 233, .17); border-radius: 6px; background: #071722; }
.champion-matchup-footer p { margin: 0; color: #93a6b8; font-size: .71rem; }
.champion-matchup-footer p strong { color: #eef7fc; }
.champion-matchup-footer > div { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.champion-lane-directory > header,
.champion-duo-overview > header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .34fr); gap: 24px; align-items: end; }
.champion-lane-directory > header h2,
.champion-duo-overview > header h2 { margin: 4px 0 8px; color: #f2f8fc; }
.champion-lane-directory > header p,
.champion-duo-overview > header p { margin: 0; color: #91a4b7; font-size: .74rem; line-height: 1.55; }
.champion-lane-directory > header label { display: grid; gap: 7px; }
.champion-lane-directory > header label span { color: #a9bbca; font-size: .64rem; font-weight: 900; text-transform: uppercase; }
.champion-lane-directory > header input { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid rgba(145, 167, 194, .28); border-radius: 6px; color: #f2f8fc; background: #050b12; font: inherit; }
.champion-lane-directory > header input:focus { outline: 2px solid rgba(72, 219, 233, .5); outline-offset: 1px; border-color: #48dbe9; }
.champion-lane-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 16px; }
.champion-lane-filters button { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 62px; align-items: center; gap: 2px 8px; padding: 9px 11px; border: 1px solid rgba(145, 167, 194, .2); border-radius: 6px; color: #bdcbd7; background: #071018; cursor: pointer; text-align: left; }
.champion-lane-filters button strong { overflow: hidden; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.champion-lane-filters button span { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; color: #071018; background: #91a4b7; font-size: .62rem; font-weight: 950; }
.champion-lane-filters button small { grid-column: 1 / -1; color: #73879a; font-size: .53rem; line-height: 1.3; }
.champion-lane-filters button[aria-pressed="true"] { border-color: #48dbe9; color: #eafcff; background: rgba(72, 219, 233, .12); box-shadow: inset 0 -3px #48dbe9; }
.champion-lane-filters button[aria-pressed="true"] span { background: #72e8f2; }
.champion-lane-filters button[aria-pressed="true"] small { color: #a4dce2; }
.champion-lane-key { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.champion-lane-key span { padding: 6px 9px; border: 1px solid rgba(145, 167, 194, .16); border-radius: 999px; color: #8094a7; background: #070f18; font-size: .55rem; }
.champion-lane-key b { margin-right: 3px; }
.champion-lane-key .is-opening b { color: #70e8b5; }
.champion-lane-key .is-unclassified b { color: #b8c6d2; }
.champion-lane-key .is-caution b { color: #ff8ca1; }
.champion-lane-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.champion-lane-list > a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 9px; align-items: center; min-height: 62px; padding: 8px; border: 1px solid rgba(145, 167, 194, .16); border-left: 3px solid #718396; border-radius: 6px; color: inherit; background: #070f18; text-decoration: none; }
.champion-lane-list > a[hidden] { display: none; }
.champion-lane-list > a[data-lane-group="pressure"] { border-left-color: #42dca0; background: linear-gradient(90deg, rgba(66, 220, 160, .08), #070f18 45%); }
.champion-lane-list > a[data-lane-group="danger"] { border-left-color: #f05d79; background: linear-gradient(90deg, rgba(240, 93, 121, .08), #070f18 45%); }
.champion-lane-list > a:is(:hover, :focus-visible) { outline: 0; border-color: #48dbe9; transform: translateY(-1px); }
.champion-lane-list img { width: 44px; height: 44px; border-radius: 5px; object-fit: cover; }
.champion-lane-list span { min-width: 0; }
.champion-lane-list strong,
.champion-lane-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.champion-lane-list strong { color: #edf6fc; font-size: .72rem; }
.champion-lane-list small { margin-top: 3px; color: #8295a8; font-size: .56rem; }
.champion-lane-list > a > b { color: #8deef5; font-size: .56rem; text-transform: uppercase; }
.champion-lane-empty { margin: 12px 0 0; padding: 16px; border: 1px dashed rgba(145, 167, 194, .3); border-radius: 6px; color: #9babb9; text-align: center; }
.champion-duo-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.champion-duo-columns > div { overflow: hidden; border: 1px solid rgba(145, 167, 194, .18); border-radius: 7px; background: #070f18; }
.champion-duo-columns > .is-partner { border-top: 3px solid #42dca0; }
.champion-duo-columns > .is-enemy { border-top: 3px solid #f05d79; }
.champion-duo-heading { padding: 14px 16px; border-bottom: 1px solid rgba(145, 167, 194, .14); }
.champion-duo-heading span,
.champion-duo-heading strong { display: block; }
.champion-duo-heading span { color: #879aaf; font-size: .6rem; font-weight: 900; text-transform: uppercase; }
.champion-duo-heading strong { margin-top: 4px; color: #edf6fc; font-size: .84rem; }
.champion-duo-heading p { margin: 6px 0 0; color: #7d90a4; font-size: .62rem; line-height: 1.4; }
.champion-duo-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 16px; }
.champion-duo-steps span { display: flex; min-height: 42px; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(72, 219, 233, .18); border-radius: 6px; color: #9eb0bf; background: #07131d; font-size: .62rem; font-weight: 800; }
.champion-duo-steps b { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; color: #06202a; background: #68dfe9; font-size: .62rem; }
.champion-duo-columns article { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 11px; padding: 13px 16px; border-bottom: 1px solid rgba(145, 167, 194, .12); }
.champion-duo-columns article:last-child { border-bottom: 0; }
.champion-duo-columns img { width: 52px; height: 52px; border-radius: 6px; }
.champion-duo-columns h3 { margin: 0; color: #f0f7fc; font-size: .84rem; }
.champion-duo-columns article strong { display: block; margin-top: 2px; color: #c4d2df; font-size: .67rem; }
.champion-duo-columns article p { margin: 6px 0 0; color: #8fa2b6; font-size: .67rem; line-height: 1.48; }
.champion-duo-columns article p b { color: #dce8f1; }
.champion-duo-action { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-top: 10px; padding: 14px 16px; border: 1px solid rgba(72, 219, 233, .23); border-radius: 6px; background: #071722; }
.champion-duo-action strong { color: #eff8fc; font-size: .78rem; }
.champion-duo-action p { margin: 4px 0 0; color: #8fa2b6; font-size: .67rem; }
.champion-duo-action a { display: inline-flex; flex: 0 0 auto; min-height: 36px; align-items: center; padding: 7px 12px; border: 1px solid rgba(72, 219, 233, .45); border-radius: 999px; color: #c8fbff; background: rgba(72, 219, 233, .1); font-size: .64rem; font-weight: 900; text-decoration: none; }
.champion-duo-action a:is(:hover, :focus-visible) { outline: 0; border-color: #75edf5; background: rgba(72, 219, 233, .19); }
.champion-state-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.champion-state-tabs button { display: flex; min-height: 68px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; padding: 11px 13px; border: 1px solid rgba(145, 167, 194, .2); border-radius: 6px; color: #d9e5ef; background: #070f18; text-align: left; cursor: pointer; }
.champion-state-tabs button span,
.champion-state-tabs button small { display: block; }
.champion-state-tabs button span { font-size: .84rem; font-weight: 900; line-height: 1.2; }
.champion-state-tabs button small { color: #8093a8; font-size: .62rem; line-height: 1.25; }
.champion-state-tabs button[data-champion-state-button="ahead"][aria-selected="true"] { border-color: #42dca0; background: rgba(66, 220, 160, .1); box-shadow: inset 0 -3px #42dca0; }
.champion-state-tabs button[data-champion-state-button="even"][aria-selected="true"] { border-color: #48dbe9; background: rgba(72, 219, 233, .1); box-shadow: inset 0 -3px #48dbe9; }
.champion-state-tabs button[data-champion-state-button="behind"][aria-selected="true"] { border-color: #f05d79; background: rgba(240, 93, 121, .1); box-shadow: inset 0 -3px #f05d79; }
.champion-state-panel { display: grid; grid-template-columns: minmax(190px, .34fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.champion-state-panel[hidden] { display: none; }
.champion-state-summary { padding: 17px; border: 1px solid rgba(145, 167, 194, .18); border-radius: 6px; background: #071018; }
.champion-state-panel.is-ahead .champion-state-summary { border-left: 4px solid #42dca0; }
.champion-state-panel.is-even .champion-state-summary { border-left: 4px solid #48dbe9; }
.champion-state-panel.is-behind .champion-state-summary { border-left: 4px solid #f05d79; }
.champion-state-summary span { color: #8296aa; font-size: .6rem; font-weight: 900; text-transform: uppercase; }
.champion-state-summary h3 { margin: 7px 0 0; color: #eef6fc; font-size: 1rem; line-height: 1.35; }
.champion-state-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.champion-state-phases article { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; padding: 14px; border: 1px solid rgba(145, 167, 194, .16); border-radius: 6px; background: #070f18; }
.champion-state-phases article > span { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(72, 219, 233, .45); border-radius: 50%; color: #bff9fd; font-size: .68rem; font-weight: 950; }
.champion-state-phases strong { color: #eaf3fa; font-size: .74rem; }
.champion-state-phases p { margin: 6px 0 0; color: #91a4b7; font-size: .68rem; line-height: 1.5; }
.support-macro { margin-top: 18px; padding: 24px; border: 1px solid rgba(145, 167, 194, .18); border-radius: 7px; background: #08111a; }
.support-macro > header { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-bottom: 17px; border-bottom: 1px solid rgba(145, 167, 194, .16); }
.support-macro > header > div { max-width: 850px; }
.support-macro > header h2 { margin: 4px 0 7px; color: #f2f8fd; }
.support-macro > header p { margin: 0; color: #9bafc1; font-size: .76rem; line-height: 1.58; }
.support-macro > header > a,
.support-macro > header > span { display: inline-flex; flex: 0 0 auto; min-height: 36px; align-items: center; padding: 7px 12px; border: 1px solid rgba(72, 219, 233, .42); border-radius: 999px; color: #c8fbff; background: rgba(72, 219, 233, .1); font-size: .64rem; font-weight: 900; text-decoration: none; }
.support-macro > header > a:is(:hover, :focus-visible) { outline: 0; border-color: #75edf5; background: rgba(72, 219, 233, .18); }
.support-state-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
.support-state-grid > article { overflow: hidden; border: 1px solid rgba(145, 167, 194, .17); border-top: 3px solid #48dbe9; border-radius: 7px; background: #060d15; }
.support-state-grid > article.is-ahead { border-top-color: #42dca0; }
.support-state-grid > article.is-behind { border-top-color: #f05d79; }
.support-state-title { min-height: 78px; padding: 14px 15px; border-bottom: 1px solid rgba(145, 167, 194, .14); background: rgba(72, 219, 233, .045); }
.support-state-grid .is-ahead .support-state-title { background: rgba(66, 220, 160, .055); }
.support-state-grid .is-behind .support-state-title { background: rgba(240, 93, 121, .055); }
.support-state-title span,
.support-state-title strong { display: block; }
.support-state-title span { color: #70e7f1; font-size: .6rem; font-weight: 950; text-transform: uppercase; }
.support-state-grid .is-ahead .support-state-title span { color: #74eab8; }
.support-state-grid .is-behind .support-state-title span { color: #ff91a6; }
.support-state-title strong { margin-top: 5px; color: #f0f7fc; font-size: .86rem; line-height: 1.35; }
.support-state-grid dl { margin: 0; }
.support-state-grid dl > div { padding: 12px 15px; border-bottom: 1px solid rgba(145, 167, 194, .11); }
.support-state-grid dl > div:last-child { border-bottom: 0; }
.support-state-grid dt { color: #a9bdcc; font-size: .58rem; font-weight: 950; text-transform: uppercase; }
.support-state-grid dd { margin: 5px 0 0; color: #91a5b8; font-size: .69rem; line-height: 1.52; }
.support-matchup-warning { margin-top: 12px; padding: 13px 15px; border: 1px solid rgba(241, 169, 74, .35); border-left: 4px solid #f1a94a; border-radius: 6px; background: rgba(241, 169, 74, .065); }
.support-matchup-warning strong { color: #ffd28d; font-size: .68rem; text-transform: uppercase; }
.support-matchup-warning p { margin: 5px 0 0; color: #c8b89f; font-size: .72rem; line-height: 1.55; }
.support-objective-plan { display: grid; grid-template-columns: minmax(210px, .34fr) minmax(0, 1fr); gap: 14px; margin-top: 12px; padding: 16px; border: 1px solid rgba(72, 219, 233, .2); border-radius: 7px; background: #071722; }
.support-objective-plan > div > span { color: #5ee3ee; font-size: .6rem; font-weight: 950; text-transform: uppercase; }
.support-objective-plan h3 { margin: 5px 0 7px; color: #eef8fd; font-size: 1rem; }
.support-objective-plan > div > p { margin: 0; color: #8fa4b7; font-size: .68rem; line-height: 1.5; }
.support-objective-plan ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
.support-objective-plan li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; padding: 11px; border: 1px solid rgba(145, 167, 194, .14); border-radius: 6px; background: #060d15; }
.support-objective-plan li > b { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(72, 219, 233, .5); border-radius: 50%; color: #c8fbff; font-size: .68rem; }
.support-objective-plan li strong { color: #e9f3fa; font-size: .7rem; }
.support-objective-plan li p { margin: 5px 0 0; color: #8fa3b6; font-size: .65rem; line-height: 1.48; }
.support-after-lane { margin: 9px 0 0; padding: 11px 14px; border-left: 3px solid #8a7df1; color: #9badbf; background: rgba(138, 125, 241, .055); font-size: .68rem; line-height: 1.5; }
.support-after-lane b { color: #d8d3ff; }
.champion-next { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 24px; margin-bottom: 40px; border-left: 4px solid #38d9e9; }
.champion-next p { max-width: 720px; margin: 7px 0 0; color: #94a6b9; }
.champion-next > div:last-child { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.champion-error { min-height: 420px; padding: 70px 40px; }

@media (max-width: 900px) {
  .champion-directory { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rocket-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .champion-build-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .champion-lane-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .champion-lane-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .champion-page main { width: min(100%, calc(100% - 20px)); }
  .champion-directory-hero { grid-template-columns: 1fr; min-height: 0; padding: 28px 20px; }
  .champion-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .champion-detail-hero { min-height: 0; background-position: 62% 20%; }
  .champion-detail-copy { grid-template-columns: 64px minmax(0, 1fr); gap: 13px; padding: 92px 18px 28px; background: linear-gradient(90deg, rgba(5, 9, 15, .95), rgba(5, 9, 15, .68)); }
  .champion-detail-copy > img { width: 64px; height: 64px; }
  .champion-detail-copy h1 { font-size: 2.5rem; }
  .champion-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .champion-facts > div:nth-child(2) { border-right: 0; }
  .champion-facts > div:nth-child(-n+2) { border-bottom: 1px solid rgba(145, 167, 194, .14); }
  .champion-build-summary { padding: 17px; }
  .champion-mode-switcher > header { align-items: flex-start; flex-direction: column; gap: 5px; }
  .champion-mode-switcher > header > p { text-align: left; }
  .champion-build-queues { grid-template-columns: 1fr; }
  .champion-build-summary > header { grid-template-columns: 1fr; align-items: start; }
  .champion-build-actions { justify-content: flex-start; }
  .champion-build-path { grid-template-columns: 1fr; }
  .jinx-game-plan,
  .champion-abilities,
  .jinx-rocket { padding: 17px; }
  .jinx-game-plan > div,
  .champion-abilities > header,
  .champion-matchups > header,
  .champion-state-guide > header,
  .champion-kit-profile > header,
  .champion-matchup-groups,
  .champion-kit-columns,
  .rocket-decisions { grid-template-columns: 1fr; }
  .champion-state-panel { grid-template-columns: 1fr; }
  .champion-state-phases { grid-template-columns: 1fr; }
  .support-macro { padding: 17px; }
  .support-macro > header { align-items: flex-start; flex-direction: column; gap: 12px; }
  .support-state-grid,
  .support-objective-plan,
  .support-objective-plan ol { grid-template-columns: 1fr; }
  .champion-ability-list > article { grid-template-columns: 36px 48px minmax(0, 1fr); gap: 9px; padding: 11px; }
  .champion-ability-key { width: 34px; height: 34px; }
  .champion-ability-list img { width: 48px; height: 48px; }
  .rocket-range { grid-template-columns: auto minmax(30px, 1fr) auto; }
  .rocket-range i:nth-of-type(2),
  .rocket-range strong { display: none; }
  .champion-next { align-items: flex-start; flex-direction: column; }
  .champion-next > div:last-child { justify-content: flex-start; }
  .champion-matchup-footer { align-items: flex-start; flex-direction: column; }
  .champion-matchup-footer > div { justify-content: flex-start; }
  .champion-lane-directory > header,
  .champion-duo-overview > header,
  .champion-duo-columns { grid-template-columns: 1fr; }
  .champion-duo-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .champion-lane-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .champion-duo-action { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 440px) {
  .champion-directory { grid-template-columns: 1fr; }
  .champion-directory > a { grid-template-columns: 50px minmax(0, 1fr) auto; }
  .champion-directory img { width: 50px; height: 50px; }
  .rocket-facts { grid-template-columns: 1fr; }
  .champion-detail-copy { grid-template-columns: 1fr; }
  .champion-matchups,
  .champion-build-summary,
  .champion-lane-directory,
  .champion-duo-overview,
  .champion-state-guide,
  .champion-kit-profile { padding: 16px; }
  .champion-lane-filters,
  .champion-lane-list { grid-template-columns: 1fr; }
  .champion-duo-steps { grid-template-columns: 1fr; }
  .champion-build-opening { grid-template-columns: 58px minmax(0, 1fr); }
  .champion-build-mode-note { grid-template-columns: 1fr; }
  .champion-build-opening > span { grid-column: 1 / -1; justify-self: start; }
  .champion-build-path li { grid-template-columns: 58px 46px minmax(0, 1fr); min-height: 0; }
  .champion-build-path img { width: 46px; height: 46px; }
  .champion-state-tabs button { min-height: 64px; align-items: center; padding: 9px; text-align: center; }
  .champion-state-tabs button small { font-size: .55rem; }
}
/* Champion rune page */
.champion-runes { margin: 28px 0; padding: 28px; border: 1px solid rgba(87, 218, 232, .24); border-radius: 8px; background: linear-gradient(135deg, #09131e, #0b1c24 58%, #101829); box-shadow: 0 18px 54px rgba(0, 0, 0, .24); }
.champion-runes > header { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 22px; }
.champion-runes > header h2 { margin: 3px 0 7px; }
.champion-runes > header p { max-width: 760px; margin: 0; color: #aebfce; }
.champion-runes > header > a, .champion-runes > footer a { flex: 0 0 auto; display: inline-flex; min-height: 40px; align-items: center; padding: 0 16px; border: 1px solid rgba(72, 222, 235, .5); border-radius: 999px; color: #d9fbff; background: #092b35; font-weight: 800; text-decoration: none; }
.champion-rune-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); gap: 18px; }
.champion-rune-page { display: grid; grid-template-columns: minmax(160px, .62fr) minmax(220px, 1fr); grid-template-areas: "tree key" "minor minor" "secondary secondary"; gap: 16px; padding: 22px; border: 1px solid rgba(86, 224, 236, .22); border-radius: 8px; background: rgba(2, 9, 17, .7); }
.champion-rune-tree { grid-area: tree; display: flex; align-items: center; gap: 12px; }
.champion-rune-tree img { padding: 8px; border-radius: 50%; background: #102635; }
.champion-rune-tree span, .champion-rune-keystone span { display: grid; gap: 2px; }
.champion-rune-tree small, .champion-rune-keystone small, .champion-rune-plan > div > span, .champion-spells > span { color: #75dce8; font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.champion-rune-keystone { grid-area: key; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-left: 3px solid #c59dff; background: rgba(83, 47, 125, .18); }
.champion-rune-keystone img { filter: drop-shadow(0 0 12px rgba(195, 134, 255, .34)); }
.champion-rune-row { grid-area: minor; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.champion-rune-row > span, .champion-rune-secondary > span { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 6px; background: #0c1722; }
.champion-rune-row small, .champion-rune-secondary small { color: #d4e0e9; font-weight: 750; }
.champion-rune-secondary { grid-area: secondary; display: grid; grid-template-columns: minmax(150px, .7fr) repeat(2, 1fr); gap: 9px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .09); }
.champion-rune-secondary > div { display: flex; align-items: center; gap: 9px; color: #dce8ef; }
.champion-rune-plan { display: grid; align-content: start; gap: 10px; }
.champion-rune-plan > div { padding: 15px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 7px; background: rgba(5, 13, 21, .74); }
.champion-rune-plan p { margin: 5px 0 0; color: #b8c7d2; }
.champion-spells { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.champion-spells > span { width: 100%; }
.champion-spells figure { display: flex; align-items: center; gap: 8px; margin: 0; color: #edf6fa; font-weight: 800; }
.champion-spells img { border: 1px solid #c49a44; border-radius: 5px; }
.champion-rune-adjustment strong { color: #f0d49a; }
.champion-runes > footer { display: flex; gap: 8px 16px; margin-top: 16px; padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, .08); color: #9fb2c1; }
.champion-runes > footer strong { color: #ecf6fa; }

.build-now-dashboard { scroll-margin-top: 168px; margin: 16px 0 20px; overflow: hidden; border: 1px solid rgba(62, 210, 229, .45); border-radius: 8px; background: linear-gradient(115deg, rgba(7, 29, 40, .98), rgba(15, 18, 30, .98)); box-shadow: 0 18px 42px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(62, 210, 229, .06); }
.build-now-context { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 16px; border-bottom: 1px solid rgba(62, 210, 229, .18); background: rgba(62, 210, 229, .055); }
.build-now-matchup { display: flex; align-items: center; gap: 9px; min-width: 0; }
.build-now-matchup img { flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .14); border-radius: 5px; }
.build-now-matchup span { min-width: 0; }
.build-now-matchup small, .build-now-matchup strong { display: block; }
.build-now-matchup small { color: #7f91a7; font-size: .59rem; font-weight: 900; text-transform: uppercase; }
.build-now-matchup strong { margin-top: 2px; color: #edf7ff; font-size: .8rem; }
.build-now-matchup > b { color: #e7b95b; font-size: .65rem; }
.build-now-live-label { padding: 5px 8px; border: 1px solid rgba(79, 230, 166, .35); border-radius: 999px; color: #83f1bd; background: rgba(79, 230, 166, .07); font-size: .6rem; font-weight: 900; text-transform: uppercase; }
.build-now-purchase { display: grid; grid-template-columns: 112px 86px minmax(220px, 1fr) minmax(190px, .72fr); gap: 18px; align-items: center; padding: 22px; }
.build-now-kicker span, .build-now-kicker small { display: block; }
.build-now-kicker span { color: #56e2ee; font-size: .72rem; font-weight: 950; text-transform: uppercase; }
.build-now-kicker small { margin-top: 4px; color: #8b9bb0; font-size: .68rem; }
.build-now-purchase > img { width: 86px; height: 86px; border: 2px solid #48d9e6; border-radius: 7px; box-shadow: 0 0 24px rgba(62, 210, 229, .23); }
.build-now-copy h2 { margin: 0; color: #fff; font-size: clamp(1.35rem, 2.6vw, 2.1rem); line-height: 1.05; }
.build-now-copy > strong { display: block; margin-top: 6px; color: #f1c867; font-size: .88rem; }
.build-now-copy p { margin: 7px 0 0; color: #aebed0; font-size: .75rem; line-height: 1.45; }
.build-now-recall { padding: 14px; border-left: 4px solid #4fe6a6; background: rgba(79, 230, 166, .07); }
.build-now-recall span, .build-now-recall strong, .build-now-recall small { display: block; }
.build-now-recall span { color: #79eeb9; font-size: .63rem; font-weight: 950; text-transform: uppercase; }
.build-now-recall strong { margin-top: 4px; color: #f0fff8; font-size: .92rem; line-height: 1.25; }
.build-now-recall small { margin-top: 5px; color: #95ad9f; font-size: .67rem; }
.build-now-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 22px 18px; }
.build-now-actions button, .build-now-actions a { --action-accent: #55dce7; display: inline-flex; align-items: center; justify-content: center; height: 40px; min-height: 40px; margin: 0; padding: 6px 12px; appearance: none; border: 1px solid color-mix(in srgb, var(--action-accent) 48%, #263541); border-radius: 5px; color: color-mix(in srgb, var(--action-accent) 72%, #d8e2e8); background: color-mix(in srgb, var(--action-accent) 7%, #0b141d); box-shadow: inset 0 -2px color-mix(in srgb, var(--action-accent) 9%, transparent); font-family: inherit; font-size: .71rem; font-weight: 900; line-height: 1.2; text-align: center; text-decoration: none; text-transform: uppercase; vertical-align: middle; cursor: pointer; }
.build-now-actions button:first-child { --action-accent: #58cdaa; border-color: var(--action-accent); color: #f7fdff; background: color-mix(in srgb, var(--action-accent) 20%, #0a141c); box-shadow: inset 0 -3px color-mix(in srgb, var(--action-accent) 28%, transparent), 0 0 0 2px color-mix(in srgb, var(--action-accent) 13%, transparent); }
.build-now-actions button:nth-child(2) { --action-accent: #82cdea; }
.build-now-actions a { --action-accent: #9b86ee; }
.build-now-actions button:is(:hover, :focus-visible), .build-now-actions a:is(:hover, :focus-visible) { outline: 0; border-color: var(--action-accent); color: #fff; background: color-mix(in srgb, var(--action-accent) 13%, #0b141d); }
.build-now-dashboard.is-tracking { border-color: #4fe6a6; }
.build-now-dashboard.is-complete { border-color: rgba(79, 230, 166, .7); }

@media (max-width: 780px) {
  .build-now-context { align-items: flex-start; flex-direction: column; }
  .build-now-purchase { grid-template-columns: 78px minmax(0, 1fr); gap: 13px; padding: 16px; }
  .build-now-kicker { grid-column: 1 / -1; }
  .build-now-purchase > img { width: 72px; height: 72px; }
  .build-now-recall { grid-column: 1 / -1; }
  .build-now-actions { padding: 0 16px 16px; }
  .build-now-actions > * { flex: 1 1 150px; text-align: center; }
  .champion-runes { padding: 20px 16px; }
  .champion-runes > header { align-items: flex-start; flex-direction: column; }
  .champion-rune-layout { grid-template-columns: 1fr; }
  .champion-rune-page { grid-template-columns: 1fr; grid-template-areas: "tree" "key" "minor" "secondary"; }
  .champion-rune-row, .champion-rune-secondary { grid-template-columns: 1fr; }
  .champion-runes > footer { flex-direction: column; }
}

/* Companion preview and checksum record */
.companion-release-page { width: min(1180px, calc(100% - 32px)); margin: 28px auto 70px; }
.companion-release-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(380px, .88fr); gap: 54px; align-items: center; min-height: 520px; padding: 54px 50px; overflow: hidden; border: 1px solid rgba(93, 220, 233, .28); border-bottom: 3px solid #56dce8; border-radius: 8px; background: linear-gradient(90deg, rgba(3, 11, 19, .98) 0%, rgba(3, 11, 19, .91) 43%, rgba(3, 11, 19, .36) 74%, rgba(3, 11, 19, .64) 100%), url('/league/champion/blitzcrank/splash.jpg') 69% 24% / cover; box-shadow: 0 24px 70px rgba(0, 0, 0, .32); }
.companion-release-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4, 12, 20, .4), transparent 42%); pointer-events: none; }
.companion-release-copy, .companion-app-preview { position: relative; z-index: 1; }
.companion-release-copy h1 { max-width: 760px; margin: 4px 0 12px; color: #fff; font-size: clamp(2.8rem, 6vw, 5.25rem); line-height: .94; }
.companion-release-copy > p:last-of-type { max-width: 660px; color: #d2e1ea; font-size: 1.05rem; }
.companion-hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.companion-hero-actions a { --companion-action: #55dce7; display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--companion-action) 48%, #263541); border-radius: 5px; color: color-mix(in srgb, var(--companion-action) 72%, #d8e2e8); background: color-mix(in srgb, var(--companion-action) 7%, #0b141d); box-shadow: inset 0 -2px color-mix(in srgb, var(--companion-action) 9%, transparent); font-size: .71rem; font-weight: 900; text-decoration: none; text-transform: uppercase; }
.companion-hero-actions .companion-secondary-action { --companion-action: #9b86ee; }
.companion-hero-actions a:is(:hover, :focus-visible) { border-color: var(--companion-action); color: #fff; background: color-mix(in srgb, var(--companion-action) 13%, #0b141d); outline: 0; }
.companion-hero-actions .companion-primary-action { border-color: var(--companion-action); color: #f7fdff; background: color-mix(in srgb, var(--companion-action) 20%, #0a141c); box-shadow: inset 0 -3px color-mix(in srgb, var(--companion-action) 28%, transparent), 0 0 0 2px color-mix(in srgb, var(--companion-action) 13%, transparent); }
.companion-release-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 720px; margin-top: 22px; }
.companion-release-badges > span { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; align-items: center; min-width: 0; min-height: 54px; padding: 8px 10px; border: 1px solid rgba(93, 220, 233, .3); border-radius: 6px; color: #dffcff; background: rgba(11, 46, 56, .78); }
.companion-release-badges > span:nth-child(2) { border-color: rgba(167, 129, 239, .34); background: rgba(36, 27, 57, .8); }
.companion-release-badges > span:nth-child(3) { border-color: rgba(235, 183, 75, .34); background: rgba(54, 42, 11, .8); }
.companion-release-badges > span > i { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 5px; color: #6fe4ee; background: rgba(255, 255, 255, .07); }
.companion-release-badges > span:nth-child(2) > i { color: #c3a6f4; }
.companion-release-badges > span:nth-child(3) > i { color: #efc668; }
.companion-release-badges em, .companion-release-badges small, .companion-release-badges strong { display: block; min-width: 0; font-style: normal; }
.companion-release-badges small { color: #88cdd5; font-size: .56rem; font-weight: 900; text-transform: uppercase; }
.companion-release-badges strong { margin-top: 3px; color: #eefcff; font-size: .7rem; line-height: 1.25; overflow-wrap: anywhere; }
.companion-app-preview { min-width: 0; overflow: hidden; border: 1px solid rgba(108, 225, 235, .46); border-left: 4px solid #58dce8; border-radius: 8px; background: rgba(5, 13, 24, .94); box-shadow: 0 22px 55px rgba(0, 0, 0, .48), 0 0 0 1px rgba(153, 111, 238, .12); backdrop-filter: blur(9px); }
.companion-app-titlebar { display: grid; grid-template-columns: 32px minmax(0, 1fr) 9px 9px; gap: 10px; align-items: center; min-height: 52px; padding: 0 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); background: #101926; }
.companion-app-titlebar > span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #4fdde9; color: #70edf5; background: #082630; font-weight: 950; }
.companion-app-titlebar > strong { color: #f1f8fb; font-size: .82rem; }
.companion-app-titlebar > i { width: 8px; height: 8px; border-radius: 50%; background: #536675; }
.companion-app-status { display: flex; gap: 12px; align-items: center; padding: 18px 18px 12px; }
.companion-app-status > span { width: 11px; height: 11px; border-radius: 50%; background: #55e3c1; box-shadow: 0 0 16px rgba(85, 227, 193, .8); }
.companion-app-status small, .companion-app-status strong { display: block; }
.companion-app-status small, .companion-app-grid small, .companion-app-plan small { color: #73dce7; font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.companion-app-status strong { margin-top: 2px; color: #f4fbfd; font-size: .9rem; }
.companion-app-roster { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: 9px; align-items: center; padding: 0 18px 13px; }
.companion-app-duo { display: grid; gap: 6px; min-width: 0; }
.companion-app-duo > span { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; align-items: center; min-width: 0; padding: 5px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(10, 24, 35, .92); }
.companion-app-duo img { display: block; width: 38px; height: 38px; border: 1px solid rgba(96, 222, 233, .5); border-radius: 4px; object-fit: cover; }
.companion-app-duo em, .companion-app-duo small, .companion-app-duo strong { display: block; min-width: 0; }
.companion-app-duo em { overflow: hidden; font-style: normal; }
.companion-app-duo small { color: #6fcfda; font-size: .54rem; font-weight: 900; line-height: 1.2; text-transform: uppercase; }
.companion-app-duo strong { margin-top: 2px; overflow: hidden; color: #f1f8fa; font-size: .78rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.companion-app-roster > b { color: #e4b85b; }
.companion-app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 18px 10px; }
.companion-app-grid > div { min-width: 0; padding: 12px; border: 1px solid rgba(255, 255, 255, .08); background: #0c1723; }
.companion-app-grid strong { display: block; margin-top: 4px; color: #e9f4f7; font-size: .8rem; overflow-wrap: anywhere; }
.companion-app-plan { display: flex; gap: 13px; align-items: center; margin: 4px 18px 16px; padding: 13px; border: 1px solid rgba(167, 119, 236, .28); background: #17152a; }
.companion-app-plan strong { display: block; margin-top: 3px; color: #f2eaff; font-size: .8rem; }
.companion-release-state { display: flex; justify-content: space-between; gap: 16px; align-items: end; padding: 14px 18px; border-top: 1px solid rgba(94, 220, 232, .22); background: #07131d; }
.companion-release-state span, .companion-release-state strong, .companion-release-state small { display: block; }
.companion-release-state span { color: #67e8f2; font-size: .67rem; font-weight: 900; text-transform: uppercase; }
.companion-release-state strong { margin-top: 4px; color: #fff; font-size: .92rem; overflow-wrap: anywhere; }
.companion-release-state small { color: #9fb0bf; }
.companion-jumps { margin-top: 16px; }
.companion-download-gate { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: 34px; align-items: center; margin-top: 16px; padding: 28px 30px; border: 1px solid rgba(89, 225, 235, .32); border-radius: 8px; background: linear-gradient(110deg, #071922, #111328); box-shadow: 0 18px 48px rgba(0, 0, 0, .2); }
.companion-download-intro h2 { margin: 3px 0 8px; color: #f5fcff; }
.companion-download-intro > p:last-of-type { max-width: 610px; margin: 0; color: #a9bdc9; line-height: 1.58; }
.companion-download-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.companion-download-facts span { display: flex; gap: 9px; min-width: 0; align-items: center; min-height: 54px; padding: 7px 10px 7px 7px; border: 1px solid rgba(93, 220, 233, .2); border-radius: 7px; color: #c9e8ec; background: rgba(6, 27, 36, .8); }
.companion-download-facts em { min-width: 0; color: #dff9fc; font-size: .72rem; font-style: normal; font-weight: 850; line-height: 1.25; }
.companion-access-form { position: relative; min-width: 0; padding: 21px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 7px; background: #09131f; }
.companion-access-form > label:first-child { display: block; margin-bottom: 8px; color: #e9f8fb; font-size: .76rem; font-weight: 900; }
.companion-access-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.companion-access-row input { min-width: 0; height: 48px; padding: 0 14px; border: 1px solid rgba(116, 169, 191, .45); border-radius: 6px; outline: 0; color: #f3fbfd; background: #050c15; font: inherit; letter-spacing: 0; }
.companion-access-row input:focus { border-color: #63dce7; box-shadow: 0 0 0 3px rgba(99, 220, 231, .12); }
.companion-access-row button { --companion-action: #55dce7; display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 6px 14px; border: 1px solid var(--companion-action); border-radius: 5px; color: #f7fdff; background: color-mix(in srgb, var(--companion-action) 20%, #0a141c); box-shadow: inset 0 -3px color-mix(in srgb, var(--companion-action) 28%, transparent), 0 0 0 2px color-mix(in srgb, var(--companion-action) 13%, transparent); font: inherit; font-size: .71rem; font-weight: 900; text-transform: uppercase; cursor: pointer; }
.companion-access-row button:is(:hover, :focus-visible) { border-color: #fff; color: #fff; background: color-mix(in srgb, var(--companion-action) 28%, #0a141c); outline: 0; }
.companion-access-help { margin: 9px 0 0; color: #7f95a4; font-size: .72rem; }
.companion-access-honeypot { position: absolute !important; inset-inline-start: 0 !important; top: 0 !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
html .companion-engagement-v2 > * { min-width: 0; }
html .companion-engagement-v2 :is(p,small,strong,span) { overflow-wrap: anywhere; }
html .companion-engagement-v2 :is(.companion-choice-state,small) { font-size: 14px; line-height: 1.5; }
@media (max-width: 900px) {
  html .companion-engagement-v2 { grid-template-columns: minmax(0, 1fr); }
  html .companion-engagement-v2 .companion-engagement-actions { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) {
  html .companion-engagement-v2 .companion-engagement-actions button { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; text-align: start; }
  html .companion-engagement-v2 :is(.companion-choice-icon,.companion-choice-copy,.companion-choice-total,.companion-choice-state) { grid-column: 1; grid-row: auto; }
  html .companion-engagement-v2 .companion-choice-state { min-width: 0; max-width: 100%; white-space: normal; }
}
@media (max-width: 460px) {
  .companion-release-page :is(header,section,article,aside,div,p,h2,h3,label,button,a) { min-width: 0; overflow-wrap: anywhere; }
}
.companion-access-message { display: grid; gap: 2px; margin-top: 13px; padding: 11px 13px; border-left: 4px solid #f19a62; color: #ffe7d7; background: #2a1714; }
.companion-access-message strong { font-size: .8rem; }
.companion-access-message span { color: #dcb5a2; font-size: .72rem; }
.companion-status-rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 16px; overflow: hidden; border: 1px solid rgba(92, 222, 234, .2); border-radius: 8px; background: #07111b; }
.companion-status-rail article { min-width: 0; padding: 17px 19px; border-left: 1px solid rgba(255, 255, 255, .08); }
.companion-status-rail article:first-child { border-left: 0; }
.companion-status-rail span, .companion-status-rail strong, .companion-status-rail small { display: block; }
.companion-status-rail span { color: #71dfe9; font-size: .64rem; font-weight: 950; text-transform: uppercase; }
.companion-status-rail strong { margin-top: 5px; color: #f5fbfd; font-size: .92rem; }
.companion-status-rail small { margin-top: 3px; color: #8295a4; font-size: .7rem; }
.companion-status-rail article:nth-child(2) span { color: #c3a5f5; }
.companion-status-rail article:nth-child(3) span { color: #7ee7bd; }
.companion-status-rail article:nth-child(4) span { color: #efc365; }
.companion-status-rail article:nth-child(5) span { color: #f28fa1; }
.companion-status-rail article:nth-child(6) span { color: #8ab9f4; }
.companion-product-tour, .companion-control-centre, .companion-windows-warning, .companion-verify, .companion-boundaries, .companion-workflow, .companion-requirements, .companion-setup, .companion-recovery, .companion-faq, .companion-related, .companion-preview-notice { position: relative; margin-top: 24px; overflow: hidden; padding: 30px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; background: #09121d; }
.companion-product-tour::before, .companion-control-centre::before, .companion-windows-warning::before, .companion-verify::before, .companion-boundaries::before, .companion-workflow::before, .companion-requirements::before, .companion-recovery::before, .companion-faq::before, .companion-related::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: linear-gradient(90deg, #55dfea, #9d7ce7, #e3ae4d, #55d6ad); content: ''; }
.companion-section-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 22px; }
.companion-section-heading h2, .companion-workflow h2, .companion-requirements h2, .companion-setup h2, .companion-recovery h2, .companion-faq h2, .companion-related h2, .companion-preview-notice h2 { margin: 3px 0 0; color: #f3f8fb; }
.companion-section-heading > p { max-width: 520px; margin: 0; color: #9fb1bf; }
.companion-product-tour { border-color: rgba(137, 116, 226, .28); background: linear-gradient(125deg, #071821 0%, #111326 54%, #181225 100%); }
.companion-tour-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(330px, .7fr); gap: 12px; }
.companion-tour-card { min-width: 0; padding: 20px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 7px; background: rgba(6, 15, 24, .9); box-shadow: 0 14px 30px rgba(0, 0, 0, .18); }
.companion-tour-card > header { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.companion-tour-card > header small, .companion-tour-card > header h3 { display: block; min-width: 0; }
.companion-tour-card > header small { color: #66dfe9; font-size: .61rem; font-weight: 950; text-transform: uppercase; }
.companion-tour-card > header h3 { margin: 3px 0 0; color: #f5fbfd; font-size: 1.05rem; line-height: 1.2; }
.companion-tour-card > header > b { padding: 6px 9px; border: 1px solid rgba(91, 221, 232, .34); border-radius: 999px; color: #bff7fb; background: rgba(37, 157, 170, .12); font-size: .58rem; white-space: nowrap; }
.companion-tour-card > p { margin: 14px 0; color: #a7b8c4; line-height: 1.55; }
.companion-tour-draft { grid-row: span 2; border-color: rgba(82, 218, 230, .26); background: linear-gradient(145deg, rgba(8, 30, 40, .97), rgba(7, 16, 27, .97)); }
.companion-tour-versus { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); gap: 9px; align-items: center; padding: 12px; border: 1px solid rgba(94, 220, 232, .14); border-radius: 7px; background: #050d16; }
.companion-tour-versus > b { color: #e7b95b; font-size: .65rem; text-align: center; }
.companion-tour-versus section { display: grid; gap: 6px; min-width: 0; }
.companion-tour-versus section > span { color: #6ddde7; font-size: .58rem; font-weight: 950; text-transform: uppercase; }
.companion-tour-versus section:last-child > span { color: #ef91a3; }
.companion-tour-versus section > div { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 9px; align-items: center; min-width: 0; padding: 7px; border-left: 3px solid #54dbe7; background: #0c1824; }
.companion-tour-versus section:last-child > div { border-left-color: #e96f8b; }
.companion-tour-versus img { width: 46px; height: 46px; border-radius: 5px; object-fit: cover; }
.companion-tour-versus em, .companion-tour-versus small, .companion-tour-versus strong { display: block; min-width: 0; }
.companion-tour-versus em { overflow: hidden; font-style: normal; }
.companion-tour-versus small { color: #8195a4; font-size: .57rem; font-weight: 850; text-transform: uppercase; }
.companion-tour-versus strong { margin-top: 3px; overflow: hidden; color: #f1f8fb; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.companion-tour-draft > footer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.companion-tour-draft > footer span { padding: 6px 9px; border: 1px solid rgba(87, 219, 231, .23); border-radius: 999px; color: #bdeef2; background: rgba(52, 184, 198, .08); font-size: .58rem; font-weight: 850; }
.companion-tour-build { border-color: rgba(163, 123, 232, .3); background: linear-gradient(145deg, rgba(27, 20, 48, .96), rgba(10, 16, 27, .97)); }
.companion-tour-build > header small { color: #c4a6f5; }
.companion-tour-items { display: flex; min-width: 0; align-items: start; justify-content: space-between; gap: 5px; padding: 12px; border: 1px solid rgba(174, 130, 239, .17); border-radius: 7px; background: #0a0d18; }
.companion-tour-items > span { display: grid; min-width: 58px; max-width: 82px; justify-items: center; gap: 4px; text-align: center; }
.companion-tour-items img { width: 48px; height: 48px; border: 1px solid rgba(224, 185, 93, .55); border-radius: 5px; object-fit: cover; }
.companion-tour-items em { display: grid; place-items: center; width: 22px; height: 22px; margin-top: -15px; border: 2px solid #0a0d18; border-radius: 50%; color: #0c1216; background: #e7b854; font-size: .56rem; font-style: normal; font-weight: 950; }
.companion-tour-items strong { overflow: hidden; width: 100%; color: #e9e1f6; font-size: .58rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.companion-tour-items > i { flex: 1 1 12px; height: 1px; margin-top: 24px; background: linear-gradient(90deg, rgba(172, 132, 237, .25), rgba(229, 180, 77, .55)); }
.companion-tour-build > aside { margin-top: 10px; padding: 11px 13px; border-left: 3px solid #a47be8; background: rgba(155, 113, 226, .08); }
.companion-tour-build > aside strong, .companion-tour-build > aside small { display: block; }
.companion-tour-build > aside strong { color: #eee5ff; font-size: .72rem; }
.companion-tour-build > aside small { margin-top: 3px; color: #9a8db2; font-size: .62rem; line-height: 1.4; }
.companion-tour-history { border-color: rgba(79, 214, 173, .3); background: linear-gradient(145deg, rgba(8, 35, 31, .94), rgba(8, 17, 27, .97)); }
.companion-tour-history > header small { color: #75e4c3; }
.companion-tour-match { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 12px; border-left: 4px solid #4fd7aa; background: #091921; }
.companion-tour-match img { width: 52px; height: 52px; border: 1px solid rgba(79, 215, 170, .5); border-radius: 5px; }
.companion-tour-match small, .companion-tour-match strong, .companion-tour-match span { display: block; }
.companion-tour-match small { color: #77998f; font-size: .57rem; font-weight: 850; text-transform: uppercase; }
.companion-tour-match strong { margin-top: 2px; color: #edf9f6; font-size: .82rem; }
.companion-tour-match span { margin-top: 2px; color: #91aba4; font-size: .62rem; }
.companion-tour-match > b { padding: 6px 8px; border: 1px solid rgba(79, 215, 170, .36); border-radius: 999px; color: #7de8c4; background: rgba(79, 215, 170, .08); font-size: .6rem; text-transform: uppercase; }
.companion-tour-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 8px; overflow: hidden; border-radius: 6px; background: rgba(79, 215, 170, .13); }
.companion-tour-metrics span { min-width: 0; padding: 9px; background: #08151d; text-align: center; }
.companion-tour-metrics small, .companion-tour-metrics strong { display: block; }
.companion-tour-metrics small { color: #728a84; font-size: .52rem; font-weight: 850; text-transform: uppercase; }
.companion-tour-metrics strong { margin-top: 3px; color: #eaf9f4; font-size: .74rem; }
.companion-tour-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 12px; overflow: hidden; border: 1px solid rgba(229, 176, 76, .18); border-radius: 7px; background: rgba(229, 176, 76, .13); }
.companion-tour-foot > div { min-width: 0; padding: 14px 16px; background: #10141b; }
.companion-tour-foot strong, .companion-tour-foot span { display: block; }
.companion-tour-foot strong { color: #f0c769; font-size: 16px; overflow-wrap: anywhere; }
.companion-tour-foot span { margin-top: 8px; color: #c2ced8; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.companion-tour-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.companion-tour-foot > div:first-child { grid-column: 1 / -1; }
.companion-tour-foot .companion-queue-context-list > span { display: inline; margin: 0; color: inherit; font: inherit; }
.companion-tour-card > .companion-tour-example { padding: 10px 12px; border-inline-start: 3px solid #d6b467; color: #f1dfb5; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.companion-tour-metrics small { color: #bdd2cd; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.companion-tour-metrics strong { font-size: 18px; }
@media (max-width: 700px) { .companion-tour-foot { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 360px) { .companion-tour-metrics { grid-template-columns: minmax(0, 1fr); } }
[data-companion-recorded-map] h3, [data-companion-recorded-map] p { overflow-wrap: anywhere; }
.companion-control-centre { border-color: rgba(229, 176, 76, .26); background: linear-gradient(125deg, #11150e, #0a1620 47%, #151126); }
.companion-control-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(350px, .88fr); gap: 14px; }
.companion-state-timeline, .companion-settings-panel { min-width: 0; border: 1px solid rgba(255, 255, 255, .1); border-radius: 7px; background: rgba(6, 14, 22, .92); }
.companion-state-timeline > header { display: flex; justify-content: space-between; gap: 20px; padding: 13px 16px; border-bottom: 1px solid rgba(93, 220, 232, .14); color: #718794; font-size: .59rem; font-weight: 900; text-transform: uppercase; }
.companion-state-timeline > header strong { color: #dce8ed; }
.companion-state-timeline ol { margin: 0; padding: 0; list-style: none; }
.companion-state-timeline li { --state-color: #57dce8; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-width: 0; padding: 11px 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.companion-state-timeline li:last-child { border-bottom: 0; }
.companion-state-timeline li.is-lobby { --state-color: #8ab9f4; }
.companion-state-timeline li.is-draft { --state-color: #b28cf1; }
.companion-state-timeline li.is-live { --state-color: #edb94e; }
.companion-state-timeline li.is-review { --state-color: #56d8ac; }
.companion-state-timeline li.is-spectator { --state-color: #ec8298; }
.companion-state-timeline li > b { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid color-mix(in srgb, var(--state-color) 65%, transparent); border-radius: 6px; color: var(--state-color); background: color-mix(in srgb, var(--state-color) 9%, #07111a); font-size: .68rem; }
.companion-state-timeline li div { min-width: 0; }
.companion-state-timeline li small, .companion-state-timeline li strong, .companion-state-timeline li p { display: block; min-width: 0; }
.companion-state-timeline li small { color: var(--state-color); font-size: .55rem; font-weight: 950; text-transform: uppercase; }
.companion-state-timeline li strong { margin-top: 2px; color: #eff7fa; font-size: .77rem; }
.companion-state-timeline li p { margin: 3px 0 0; color: #8498a5; font-size: .64rem; line-height: 1.4; }
.companion-state-timeline li > em { padding: 5px 7px; border: 1px solid color-mix(in srgb, var(--state-color) 32%, transparent); border-radius: 999px; color: var(--state-color); background: color-mix(in srgb, var(--state-color) 7%, transparent); font-size: .52rem; font-style: normal; font-weight: 900; white-space: nowrap; }
.companion-settings-panel { overflow: hidden; border-color: rgba(164, 124, 232, .28); background: #0a101b; }
.companion-settings-panel > header { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 13px 15px; border-bottom: 1px solid rgba(164, 124, 232, .2); background: #151329; }
.companion-settings-panel > header > div { display: flex; gap: 9px; align-items: center; }
.companion-settings-panel > header span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #53dbe7; color: #73e9f1; background: #09232c; font-size: .72rem; font-weight: 950; }
.companion-settings-panel > header strong { color: #f0eaff; font-size: .78rem; }
.companion-settings-panel > header small { color: #9587ac; font-size: .56rem; }
.companion-settings-panel > section { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.companion-settings-panel > section span, .companion-settings-panel > section strong, .companion-settings-panel > section small { display: block; }
.companion-settings-panel > section span { color: #b79be7; font-size: .56rem; font-weight: 950; text-transform: uppercase; }
.companion-settings-panel > section strong { margin-top: 2px; color: #eef5f8; font-size: .78rem; }
.companion-settings-panel > section small { margin-top: 2px; color: #7e929f; font-size: .59rem; }
.companion-settings-panel button { min-height: 32px; padding: 0 10px; border: 1px solid rgba(93, 220, 232, .3); border-radius: 999px; color: #bdeef2; background: rgba(64, 194, 206, .08); font: inherit; font-size: .57rem; font-weight: 850; opacity: 1; }
.companion-scale-track { position: relative; width: 108px; height: 7px; border-radius: 999px; background: #202634; }
.companion-scale-track i { display: block; width: 68%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #57dce8, #ac83eb); }
.companion-scale-track i::after { content: ''; position: absolute; top: 50%; left: 68%; width: 14px; height: 14px; border: 2px solid #0a101b; border-radius: 50%; background: #c2a2f3; transform: translate(-50%, -50%); }
.companion-settings-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255, 255, 255, .07); }
.companion-settings-toggles > span { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 1px 9px; align-items: center; min-width: 0; padding: 12px; background: #09131e; }
.companion-settings-toggles i { grid-row: 1 / span 2; position: relative; width: 28px; height: 16px; border-radius: 999px; background: #313b49; }
.companion-settings-toggles i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: #81909c; }
.companion-settings-toggles i.is-on { background: rgba(83, 218, 230, .34); }
.companion-settings-toggles i.is-on::after { left: 15px; background: #62e1eb; }
.companion-settings-toggles b, .companion-settings-toggles small { display: block; min-width: 0; }
.companion-settings-toggles b { color: #e9f3f6; font-size: .64rem; }
.companion-settings-toggles small { color: #718491; font-size: .54rem; line-height: 1.25; }
.companion-settings-panel > footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: center; padding: 14px 16px; border-top: 1px solid rgba(78, 215, 172, .16); background: #0b1819; }
.companion-settings-panel > footer span, .companion-settings-panel > footer strong { display: block; min-width: 0; }
.companion-settings-panel > footer span { color: #63d9b5; font-size: .55rem; font-weight: 950; text-transform: uppercase; }
.companion-settings-panel > footer strong { color: #e7f7f1; font-size: .64rem; }
.companion-settings-panel > footer button { grid-row: 1 / span 2; grid-column: 2; border-color: rgba(235, 119, 142, .28); color: #eda1b0; background: rgba(235, 119, 142, .06); }
.companion-control-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.companion-control-notes article { display: flex; gap: 12px; align-items: center; min-width: 0; padding: 13px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 7px; background: rgba(7, 15, 24, .8); }
.companion-control-notes strong, .companion-control-notes p { display: block; min-width: 0; }
.companion-control-notes strong { color: #eff7fa; font-size: .7rem; }
.companion-control-notes p { margin: 3px 0 0; color: #8396a3; font-size: .59rem; line-height: 1.4; }
.companion-shortcut-showcase { margin-top: 12px; padding: 18px; border: 1px solid rgba(106, 226, 235, .2); border-radius: 8px; background: linear-gradient(115deg, rgba(12, 29, 38, .92), rgba(20, 16, 38, .9)); }
.companion-shortcut-showcase > header { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(260px, .95fr); gap: 22px; align-items: end; }
.companion-shortcut-showcase > header h3 { margin: 2px 0 0; color: #f2f8fb; font-size: clamp(1rem, 1.7vw, 1.35rem); line-height: 1.15; }
.companion-shortcut-showcase > header > p { margin: 0; color: #9eb0bb; font-size: .67rem; line-height: 1.55; }
.companion-shortcut-showcase > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 15px; }
.companion-shortcut-showcase article { --shortcut-accent: #59dce8; display: flex; min-width: 0; gap: 11px; align-items: center; padding: 13px; border: 1px solid color-mix(in srgb, var(--shortcut-accent) 34%, rgba(255, 255, 255, .07)); border-radius: 7px; background: color-mix(in srgb, var(--shortcut-accent) 5%, rgba(5, 13, 21, .88)); box-shadow: inset 0 -3px color-mix(in srgb, var(--shortcut-accent) 9%, transparent); }
.companion-shortcut-showcase article.is-pink { --shortcut-accent: #ff719d; }
.companion-shortcut-showcase article.is-gold { --shortcut-accent: #f2ba4b; }
.companion-shortcut-showcase article.is-violet { --shortcut-accent: #aa8cff; }
.companion-shortcut-showcase article > i { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid color-mix(in srgb, var(--shortcut-accent) 55%, transparent); border-radius: 6px; color: var(--shortcut-accent); font-size: 1rem; }
.companion-shortcut-showcase article span { display: grid; min-width: 0; gap: 2px; }
.companion-shortcut-showcase article small { color: var(--shortcut-accent); font-size: .5rem; font-weight: 900; text-transform: uppercase; }
.companion-shortcut-showcase article strong { overflow-wrap: anywhere; color: #eef7fa; font-size: .7rem; }
.companion-shortcut-showcase kbd { width: fit-content; margin-top: 4px; padding: 3px 6px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 4px; color: #becbd3; background: #08111a; font-size: .52rem; font-weight: 800; }
.companion-shortcut-showcase > footer { display: flex; gap: 11px; align-items: center; margin-top: 11px; padding-top: 11px; border-top: 1px solid rgba(255, 255, 255, .08); }
.companion-shortcut-showcase > footer > i { color: #f2ba4b; font-size: 1rem; }
.companion-shortcut-showcase > footer p { display: flex; min-width: 0; gap: 8px; align-items: baseline; margin: 0; }
.companion-shortcut-showcase > footer strong { color: #f3d58d; font-size: .61rem; white-space: nowrap; }
.companion-shortcut-showcase > footer span { color: #879aa6; font-size: .57rem; line-height: 1.5; }
.companion-workflow { border-color: rgba(86, 220, 232, .2); background: linear-gradient(120deg, #08151e, #111324); }
.companion-workflow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.companion-workflow-grid article { position: relative; min-width: 0; min-height: 280px; padding: 76px 18px 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .09); border-top: 3px solid #50dae7; border-radius: 7px; background: #0c1824; }
.companion-workflow-grid article:nth-child(2) { border-top-color: #a47be8; }
.companion-workflow-grid article:nth-child(3) { border-top-color: #e0ad46; }
.companion-workflow-grid article:nth-child(4) { border-top-color: #58d8b9; }
.companion-workflow-grid article > .companion-step-number { position: absolute !important; top: 16px; left: 18px; }
.companion-workflow-grid article > small { display: block; margin-top: 15px; color: #62dce8; font-size: .875rem; font-weight: 950; text-transform: uppercase; overflow-wrap: anywhere; }
.companion-workflow-grid article:nth-child(2) > small { color: #c3a5f5; }
.companion-workflow-grid article:nth-child(3) > small { color: #efc365; }
.companion-workflow-grid article:nth-child(4) > small { color: #7ee7cd; }
.companion-workflow-grid h3 { margin: 5px 0 7px; color: #f4f9fb; font-size: 1.08rem; overflow-wrap: anywhere; }
.companion-workflow-grid p { margin: 0; color: #a3b4c0; line-height: 1.55; overflow-wrap: anywhere; }
.companion-workflow-grid p + p { margin-top: 12px; }
.companion-workflow-art { display: flex; height: 60px; align-items: center; padding-left: 4px; }
.companion-workflow-art img { flex: 0 1 58px; min-width: 0; max-width: calc((100% - 4px) / 3); width: 58px; height: auto; aspect-ratio: 1; margin-left: -6px; border: 2px solid #132633; border-radius: 50%; object-fit: cover; box-shadow: 0 7px 14px rgba(0, 0, 0, .3); }
.companion-workflow-art img:first-child { margin-left: 0; }
.companion-workflow-mini { display: grid; min-width: 0; min-height: 60px; align-content: center; padding: 9px 11px; border-inline-start: 3px solid #a47be8; background: #17152a; }
.companion-workflow-mini b, .companion-workflow-mini strong, .companion-workflow-mini i { display: block; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.companion-workflow-mini b { color: #c9adf7; font-size: .875rem; text-transform: uppercase; }
.companion-workflow-mini strong { margin-top: 2px; color: #f3ecff; font-size: .875rem; }
.companion-workflow-mini i { margin-top: 2px; color: #c2b8d6; font-size: .875rem; font-style: normal; }
.companion-workflow-mini.is-overlay { border-inline-start-color: #e0ad46; background: #1d190f; }
.companion-workflow-mini.is-overlay b { color: #efc365; }
.companion-workflow-mini.is-overlay strong { color: #fff3d3; }
.companion-workflow-bars { display: grid; min-height: 60px; align-content: center; gap: 6px; }
.companion-workflow-bars i { display: block; width: var(--bar); height: 7px; border-radius: 999px; background: linear-gradient(90deg, #4fd9b8, #5edce8); box-shadow: 0 0 14px rgba(79, 217, 184, .16); }
.companion-requirements { border-color: rgba(220, 174, 70, .24); background: linear-gradient(118deg, #11150f, #101321); }
.companion-requirement-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.companion-requirement-grid article { min-width: 0; padding: 19px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 7px; background: rgba(7, 16, 24, .82); }
.companion-requirement-grid article > span { display: inline-flex; min-height: 26px; align-items: center; padding: 0 9px; border: 1px solid rgba(230, 181, 75, .42); border-radius: 999px; color: #f0c66d; background: #28200e; font-size: .61rem; font-weight: 950; text-transform: uppercase; }
.companion-requirement-grid h3 { margin: 12px 0 7px; color: #f5f8fa; font-size: 1rem; }
.companion-requirement-grid p { margin: 0; color: #a8b6bf; line-height: 1.55; }
.companion-counter-guide details { min-width: 0; }
.companion-counter-guide summary { cursor: pointer; min-height: 44px; font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.companion-counter-guide summary h3 { display: inline; margin: 0; font-size: 18px; }
.companion-counter-guide summary:focus-visible { outline: 2px solid #62dce4; outline-offset: 3px; }
.companion-counter-guide p { margin-top: 10px; font-size: 16px; overflow-wrap: anywhere; }
.companion-counter-guide ul { padding-inline-start: 22px; margin: 12px 0; font-size: 16px; line-height: 1.6; }
.companion-counter-guide li { margin-block: 6px; overflow-wrap: anywhere; }
.companion-compatibility-note { display: flex; gap: 15px; align-items: center; margin-top: 12px; padding: 16px 18px; border-left: 4px solid #dfad46; background: #1c190f; }
.companion-compatibility-note strong { color: #fff2ce; }
.companion-compatibility-note p { margin: 4px 0 0; color: #bfb393; }
.companion-file-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid rgba(255, 255, 255, .09); border-radius: 7px; overflow: hidden; }
.companion-file-facts > div { min-width: 0; padding: 18px; background: #0d1824; }
.companion-file-facts > div + div { border-left: 1px solid rgba(255, 255, 255, .09); }
.companion-file-facts dt { color: #7edee7; font-size: .66rem; font-weight: 900; text-transform: uppercase; }
.companion-file-facts dd { margin: 6px 0 0; color: #eef7fb; font-weight: 800; overflow-wrap: anywhere; }
.companion-file-facts dd small { display: block; margin-top: 3px; color: #7f91a0; font-weight: 500; }
.companion-signature-row dd > span { display: inline-flex; min-height: 24px; align-items: center; padding: 0 8px; border: 1px solid rgba(79, 215, 170, .34); border-radius: 999px; color: #77e5c2; background: rgba(79, 215, 170, .07); font-size: .56rem; font-weight: 950; text-transform: uppercase; }
.companion-signature-row dd > strong { display: block; margin-top: 8px; color: #eef9f6; font-size: .78rem; line-height: 1.35; }
.companion-signature-row dd > small { line-height: 1.45; }
.companion-signature-row.is-unsigned { border-top: 3px solid #e8b550; background: linear-gradient(145deg, #1c180e, #0d1824); }
.companion-signature-row.is-unsigned dd > span { border-color: rgba(232, 181, 80, .42); color: #f0c975; background: rgba(232, 181, 80, .08); }
.companion-signature-row.is-unsigned dd > strong { color: #fff0c9; }
.companion-signature-row.is-unsigned dd > small { color: #b7aa8e; }
.companion-windows-warning { border-color: rgba(235, 183, 75, .35); background: linear-gradient(145deg, #12170f, #0b1420 54%, #111124); }
.companion-windows-warning::before { height: 4px; background: linear-gradient(90deg, #f0b947, #f2787e 46%, #9d7ce7 72%, #55dfea); }
.companion-warning-status { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 18px; align-items: center; min-width: 0; padding: 20px; border: 1px solid rgba(235, 183, 75, .34); border-left: 4px solid #e9b54e; border-radius: 7px; background: linear-gradient(110deg, rgba(92, 66, 12, .34), rgba(14, 26, 37, .94) 60%); }
.companion-warning-shield { display: grid; width: 62px; height: 62px; place-items: center; border: 1px solid rgba(240, 185, 71, .5); border-radius: 8px; color: #ffd778; background: #33270d; box-shadow: 0 0 0 4px rgba(240, 185, 71, .07); font-size: 1.65rem; }
.companion-warning-status div { min-width: 0; }
.companion-warning-status small { color: #f0c86f; font-size: .66rem; font-weight: 950; text-transform: uppercase; }
.companion-warning-status h3 { margin: 4px 0 5px; color: #fff5d7; font-size: 1.22rem; }
.companion-warning-status p { margin: 0; color: #cbbf9f; line-height: 1.55; }
.companion-warning-status > strong { max-width: 210px; padding: 9px 12px; border: 1px solid rgba(240, 185, 71, .28); border-radius: 6px; color: #f6d992; background: rgba(58, 41, 9, .58); font-size: .72rem; line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
.companion-windows-warning.is-signed .companion-warning-status { border-color: rgba(83, 220, 174, .35); border-left-color: #53dcae; background: linear-gradient(110deg, rgba(13, 78, 58, .32), rgba(14, 26, 37, .94) 60%); }
.companion-windows-warning.is-signed .companion-warning-shield { border-color: rgba(83, 220, 174, .5); color: #7de8c4; background: #0d3026; box-shadow: 0 0 0 4px rgba(83, 220, 174, .07); }
.companion-warning-intro { max-width: 520px; }
.companion-warning-intro > p { margin: 0; }
.companion-warning-intro > a { display: inline-flex; gap: 7px; align-items: center; min-height: 34px; margin-top: 10px; padding: 5px 10px; border: 1px solid rgba(116, 174, 205, .28); border-radius: 5px; color: #b9dcec; background: rgba(10, 30, 42, .72); font-size: .65rem; font-weight: 850; line-height: 1.3; text-decoration: none; }
.companion-warning-intro > a i { color: #69dce8; }
.companion-warning-intro > a:is(:hover, :focus-visible) { border-color: #68dee9; color: #effdff; outline: 0; }
.companion-warning-meaning { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 16px; overflow: hidden; border: 1px solid rgba(143, 167, 191, .18); border-radius: 7px; background: rgba(143, 167, 191, .18); }
.companion-warning-meaning article { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; min-width: 0; padding: 19px; background: #0b1621; }
.companion-warning-meaning article > i { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(93, 220, 233, .3); border-radius: 7px; color: #69e1ec; background: #0a2932; font-size: 1.05rem; }
.companion-warning-meaning article:nth-child(2) > i { border-color: rgba(167, 129, 239, .38); color: #c0a2f5; background: #241b39; }
.companion-warning-meaning article:nth-child(3) > i { border-color: rgba(235, 183, 75, .38); color: #edc568; background: #2e250d; }
.companion-warning-meaning article div { min-width: 0; }
.companion-warning-meaning small { color: #74dce6; font-size: .62rem; font-weight: 950; text-transform: uppercase; }
.companion-warning-meaning article:nth-child(2) small { color: #c0a2f5; }
.companion-warning-meaning article:nth-child(3) small { color: #edc568; }
.companion-warning-meaning h3 { margin: 4px 0 7px; color: #f1f8fb; font-size: .94rem; }
.companion-warning-meaning p { margin: 0; color: #9fb0bd; font-size: .82rem; line-height: 1.5; overflow-wrap: anywhere; }
.companion-warning-actions { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 14px; margin-top: 16px; }
.companion-warning-steps, .companion-warning-dialog { min-width: 0; padding: 20px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 7px; background: #0b1621; }
.companion-warning-steps > header, .companion-warning-dialog > header { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 13px; align-items: center; }
.companion-warning-steps > header > i, .companion-warning-dialog > header > i { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 7px; color: #6fe0eb; background: #0b2d36; font-size: 1.1rem; }
.companion-warning-dialog > header > i { color: #ffd36e; background: #30260d; }
.companion-warning-steps header small, .companion-warning-dialog header small { color: #6ddde8; font-size: .62rem; font-weight: 950; text-transform: uppercase; }
.companion-warning-dialog header small { color: #ebc362; }
.companion-warning-steps h3, .companion-warning-dialog h3 { margin: 3px 0 0; color: #f3f8fb; font-size: 1rem; }
.companion-warning-steps ol { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.companion-warning-steps li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; padding: 11px; border: 1px solid rgba(94, 219, 231, .14); border-radius: 6px; background: rgba(5, 19, 29, .72); }
.companion-warning-steps li span, .companion-warning-steps li strong, .companion-warning-steps li small { display: block; min-width: 0; }
.companion-warning-steps li strong { color: #eef8fb; font-size: .85rem; }
.companion-warning-steps li small { margin-top: 4px; color: #91a5b4; font-size: .74rem; line-height: 1.45; overflow-wrap: anywhere; }
.companion-warning-steps code { color: #baf7fc; overflow-wrap: anywhere; }
.companion-warning-dialog { border-color: rgba(235, 183, 75, .24); background: linear-gradient(145deg, #17170f, #0b1621); }
.companion-warning-dialog > ol { display: grid; gap: 11px; margin: 18px 0 0; padding-left: 22px; color: #e8bf5e; }
.companion-warning-dialog > ol li { padding-left: 4px; }
.companion-warning-dialog > ol strong, .companion-warning-dialog > ol span { display: block; }
.companion-warning-dialog > ol strong { color: #fff2cf; font-size: .85rem; }
.companion-warning-dialog > ol span { margin-top: 4px; color: #ad9f82; font-size: .75rem; line-height: 1.45; }
.companion-warning-dialog > p { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px; align-items: start; margin: 18px 0 0; padding: 13px; border: 1px solid rgba(88, 219, 177, .26); border-radius: 6px; color: #9fc8b8; background: rgba(12, 64, 48, .28); font-size: .77rem; line-height: 1.5; }
.companion-warning-dialog > p > i { display: grid; width: 34px; height: 34px; place-items: center; color: #6ce2b8; background: rgba(56, 191, 143, .13); }
.companion-warning-dialog > p strong { display: block; color: #dff9ef; }
.companion-warning-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.companion-warning-footer a { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; min-height: 68px; padding: 12px 14px; border: 1px solid rgba(89, 222, 234, .3); border-radius: 7px; color: #eaf9fc; background: #0a2029; text-decoration: none; }
.companion-warning-footer a:nth-child(2) { border-color: rgba(167, 129, 239, .34); background: #1b1729; }
.companion-warning-footer a > i { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 6px; color: #68e1ec; background: rgba(66, 204, 218, .1); }
.companion-warning-footer a:nth-child(2) > i { color: #c1a4f4; background: rgba(167, 129, 239, .12); }
.companion-warning-footer span, .companion-warning-footer small, .companion-warning-footer strong { display: block; min-width: 0; }
.companion-warning-footer small { color: #72dce6; font-size: .61rem; font-weight: 950; text-transform: uppercase; }
.companion-warning-footer a:nth-child(2) small { color: #bea1f1; }
.companion-warning-footer strong { margin-top: 3px; font-size: .84rem; overflow-wrap: anywhere; }
.companion-warning-footer a:is(:hover, :focus-visible) { border-color: #78e7f0; transform: translateY(-1px); }
.companion-riot-notice { display: grid; grid-template-columns: 54px minmax(0, 1fr) minmax(210px, auto); gap: 16px; align-items: center; margin: 14px 0 0; padding: 18px 20px; border: 1px solid rgba(167, 129, 239, .3); border-left: 4px solid #a781ef; border-radius: 7px; background: linear-gradient(110deg, #171429, #0a1822 68%); }
.companion-riot-notice > span { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid rgba(167, 129, 239, .38); border-radius: 7px; color: #c6a8f6; background: #251c3b; font-size: 1.25rem; }
.companion-riot-notice > div { min-width: 0; }
.companion-riot-notice .eyebrow { margin: 0 0 3px; color: #c3a5f4; }
.companion-riot-notice h2 { margin: 0; color: #f5efff; font-size: 1rem; }
.companion-riot-notice p:last-child { margin: 6px 0 0; color: #aaa0be; font-size: .76rem; line-height: 1.5; overflow-wrap: anywhere; }
.companion-riot-notice > a { display: grid; min-width: 0; min-height: 58px; align-content: center; padding: 10px 13px; border: 1px solid rgba(99, 221, 233, .34); border-radius: 6px; color: #e7fbfd; background: #0b2933; box-shadow: inset 0 -3px rgba(0, 0, 0, .16); text-decoration: none; }
.companion-riot-notice > a small, .companion-riot-notice > a strong { display: block; min-width: 0; overflow-wrap: anywhere; }
.companion-riot-notice > a small { color: #72dce6; font-size: .57rem; font-weight: 950; text-transform: uppercase; }
.companion-riot-notice > a strong { margin-top: 4px; font-size: .76rem; }
.companion-riot-notice > a:is(:hover, :focus-visible) { border-color: #75e3ed; outline: 0; transform: translateY(-1px); }
.companion-file-facts .companion-hash-row { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .09); border-left: 0; }
.companion-hash-row dd { display: flex; gap: 12px; align-items: center; }
.companion-hash-row code, .companion-powershell code { min-width: 0; color: #d8fbff; font-family: Consolas, 'Courier New', monospace; font-size: .82rem; overflow-wrap: anywhere; }
.companion-hash-row button, .companion-powershell button { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border: 1px solid rgba(92, 222, 234, .48); border-radius: 6px; color: #dffcff; background: #0b303a; box-shadow: inset 0 -3px rgba(0, 0, 0, .16); font: inherit; font-size: .72rem; font-weight: 900; cursor: pointer; }
.companion-powershell { display: grid; grid-template-columns: minmax(170px, .35fr) minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-top: 14px; padding: 16px 18px; border-left: 4px solid #a981e8; background: #121429; }
.companion-powershell span, .companion-powershell strong { display: block; }
.companion-powershell span { color: #c6a9fa; font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.companion-powershell strong { margin-top: 3px; color: #f2eaff; font-size: .82rem; }
.companion-boundary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.companion-boundary-grid article { display: flex; gap: 16px; min-width: 0; padding: 18px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 7px; background: #0d1824; }
.companion-step-number { display: grid !important; place-items: center !important; flex: 0 0 42px !important; width: 42px !important; min-width: 42px !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(95, 224, 235, .72) !important; border-radius: 8px !important; color: #e1fcff !important; background: #0a303b !important; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 0 0 3px rgba(77, 216, 230, .07) !important; font-size: 1rem !important; font-style: normal !important; font-weight: 950 !important; line-height: 1 !important; text-shadow: none !important; white-space: nowrap !important; }
.companion-boundary-grid h3 { margin: 0; color: #f3f8fb; font-size: 1rem; }
.companion-boundary-grid p { margin: 6px 0 0; color: #aabac6; }
.companion-data-summary { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1px; align-items: stretch; margin-top: 12px; overflow: hidden; border: 1px solid rgba(92, 222, 234, .18); border-radius: 7px; background: rgba(92, 222, 234, .12); }
.companion-data-summary > div { min-width: 0; padding: 15px 17px; background: #08151f; }
.companion-data-summary span, .companion-data-summary strong, .companion-data-summary small { display: block; }
.companion-data-summary span { color: #69dce7; font-size: .62rem; font-weight: 950; text-transform: uppercase; }
.companion-data-summary strong { margin-top: 5px; color: #eff8fa; font-size: .82rem; }
.companion-data-summary small { margin-top: 3px; color: #8094a1; font-size: .68rem; }
.companion-data-summary a { display: inline-flex; min-width: 190px; align-items: center; justify-content: center; padding: 14px; color: #e2fbfe; background: #0b3039; font-size: .73rem; font-weight: 900; text-align: center; text-decoration: none; }
.companion-data-summary a:hover, .companion-data-summary a:focus-visible { color: #fff; background: #12414b; outline: 0; }
.companion-setup { display: grid; grid-template-columns: minmax(0, .75fr) minmax(360px, 1.25fr); gap: 40px; align-items: center; }
.companion-setup > div > p:last-child { color: #aebfca; }
.companion-setup ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.companion-setup li { display: flex; gap: 14px; align-items: center; padding: 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.companion-setup li span, .companion-setup li strong, .companion-setup li small { display: block; }
.companion-setup li strong { color: #eef7fa; }
.companion-setup li small { margin-top: 3px; color: #8fa1ae; }
.companion-recovery { border-color: rgba(91, 220, 232, .22); background: linear-gradient(115deg, #091721, #101322); }
.companion-recovery ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.companion-recovery ol > li { display: flex; gap: 13px; min-width: 0; padding: 16px; border: 1px solid rgba(255,255,255,.09); border-top: 3px solid #58dce8; border-radius: 7px; background: rgba(6,15,24,.72); }
.companion-recovery ol > li:nth-child(2) { border-top-color: #b18bea; }
.companion-recovery ol > li:nth-child(3) { border-top-color: #58d8ad; }
.companion-recovery li strong { color: #f2f8fb; }
.companion-recovery li p { margin: 5px 0 0; color: #9fb0bd; font-size: .82rem; line-height: 1.5; }
.companion-recovery li em { color: #d8faff; font-style: normal; font-weight: 800; }
.companion-diagnostic-guide { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr); gap: 11px; margin-top: 12px; }
.companion-diagnostic-guide > article, .companion-diagnostic-guide > aside { min-width: 0; padding: 18px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 7px; background: #08151f; }
.companion-diagnostic-guide > article { border-color: rgba(79, 215, 170, .25); background: linear-gradient(145deg, #0a211f, #08151f 60%); }
.companion-diagnostic-guide > aside { border-color: rgba(235, 119, 142, .25); background: linear-gradient(145deg, #24131b, #0b151f 65%); }
.companion-diagnostic-guide header { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; }
.companion-diagnostic-guide header small, .companion-diagnostic-guide header h3 { display: block; min-width: 0; }
.companion-diagnostic-guide header small { color: #69dfb8; font-size: .58rem; font-weight: 950; text-transform: uppercase; }
.companion-diagnostic-guide > aside header small { color: #f08ba0; }
.companion-diagnostic-guide header h3 { margin: 3px 0 0; color: #f0f8f6; font-size: .92rem; }
.companion-diagnostic-guide ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 15px 0 0; padding: 0; list-style: none; }
.companion-diagnostic-guide ul li { min-width: 0; padding: 11px 12px; border-left: 3px solid #52d6ad; background: rgba(7, 17, 25, .82); }
.companion-diagnostic-guide ul strong, .companion-diagnostic-guide ul span { display: block; min-width: 0; }
.companion-diagnostic-guide ul strong { color: #eaf8f3; font-size: .67rem; }
.companion-diagnostic-guide ul span { margin-top: 4px; color: #849b94; font-size: .59rem; line-height: 1.43; }
.companion-diagnostic-guide > aside > p { margin: 15px 0; color: #c09aa3; font-size: .69rem; line-height: 1.55; }
.companion-diagnostic-guide > aside > div { padding: 12px; border-left: 3px solid #e97d93; background: rgba(235, 119, 142, .07); }
.companion-diagnostic-guide > aside > div span, .companion-diagnostic-guide > aside > div strong, .companion-diagnostic-guide > aside > div small { display: block; }
.companion-diagnostic-guide > aside > div span { color: #ee8fa2; font-size: .55rem; font-weight: 950; text-transform: uppercase; }
.companion-diagnostic-guide > aside > div strong { margin-top: 3px; color: #f8e8ec; font-size: .71rem; }
.companion-diagnostic-guide > aside > div small { margin-top: 4px; color: #9f8087; font-size: .58rem; }
.companion-faq { border-color: rgba(158, 117, 226, .26); background: linear-gradient(118deg, #0b131f, #151326); }
.companion-faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.companion-faq-list details { min-width: 0; border: 1px solid rgba(255, 255, 255, .09); border-radius: 7px; background: #0b1722; }
.companion-faq-list summary { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; align-items: center; min-height: 70px; padding: 13px 46px 13px 13px; color: #f0f7fa; cursor: pointer; list-style: none; }
.companion-faq-list summary::-webkit-details-marker { display: none; }
.companion-faq-list summary::after { content: '+'; position: absolute; right: 18px; color: #71dfe9; font-size: 1.25rem; font-weight: 900; }
.companion-faq-list summary { position: relative; }
.companion-faq-list details[open] summary::after { content: '−'; }
.companion-faq-list summary strong { min-width: 0; font-size: .86rem; line-height: 1.35; }
.companion-faq-list details > p { margin: 0; padding: 0 18px 18px 68px; color: #a5b6c1; line-height: 1.58; }
.companion-related { border-color: rgba(84, 220, 232, .2); background: #08141e; }
.companion-related > header { display: flex; justify-content: space-between; gap: 28px; align-items: end; }
.companion-related > header > p { max-width: 560px; margin: 0; color: #9eb0bc; }
.companion-related > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.companion-related a { display: block; min-width: 0; padding: 16px; border: 1px solid rgba(87, 222, 233, .22); border-radius: 7px; color: #eafcff; background: #0b202a; text-decoration: none; }
.companion-related a span, .companion-related a strong { display: block; }
.companion-related a span { color: #6edee8; font-size: .62rem; font-weight: 950; text-transform: uppercase; }
.companion-related a strong { margin-top: 6px; font-size: .8rem; line-height: 1.4; }
.companion-related a:hover, .companion-related a:focus-visible { border-color: #59dce8; background: #10303a; outline: 0; transform: translateY(-1px); }
.companion-preview-notice { display: flex; justify-content: space-between; gap: 32px; align-items: center; border-color: rgba(224, 177, 80, .28); background: #17170f; }
.companion-preview-notice p:last-child { max-width: 710px; color: #c5bd9f; }
.companion-preview-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.companion-preview-links a { display: inline-flex; min-height: 42px; align-items: center; padding: 0 15px; border: 1px solid rgba(230, 189, 99, .42); border-radius: 6px; color: #fff2cd; background: #29230f; box-shadow: inset 0 -3px rgba(0, 0, 0, .18); font-weight: 850; text-decoration: none; }
.companion-preview-links a:hover, .companion-preview-links a:focus-visible, .companion-hash-row button:hover, .companion-hash-row button:focus-visible, .companion-powershell button:hover, .companion-powershell button:focus-visible { outline: 0; border-color: #fff; }
.companion-page .companion-jumps a { min-height: 40px; padding-inline: 13px; border-radius: 5px; box-shadow: inset 0 -3px rgba(0, 0, 0, .16); letter-spacing: 0; }

@media (max-width: 980px) {
  .companion-release-hero { grid-template-columns: 1fr; }
  .companion-app-preview { width: min(100%, 540px); }
  .companion-status-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .companion-status-rail article:nth-child(4) { border-left: 0; }
  .companion-status-rail article:nth-child(n+4) { border-top: 1px solid rgba(255, 255, 255, .08); }
  .companion-workflow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .companion-requirement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .companion-related > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .companion-data-summary { grid-template-columns: 1fr 1fr; }
  .companion-data-summary a { grid-column: 1 / -1; min-height: 46px; }
  .companion-tour-layout { grid-template-columns: 1fr; }
  .companion-tour-draft { grid-row: auto; }
  .companion-control-layout { grid-template-columns: 1fr; }
}

/* v101: shared numbered actions, team-planning workspace and champion role map. */
.league-number-action {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid rgba(72, 219, 233, .34);
  border-radius: 7px;
  color: #eafcff;
  background: #08151d;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.league-number-action > span:first-child {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(72, 219, 233, .5);
  border-radius: 5px;
  color: #071216;
  background: #61e5ef;
  font-size: .77rem;
  font-weight: 950;
}
.league-number-action .team-action-copy,
.league-number-action .team-action-copy strong,
.league-number-action .team-action-copy small { display: block; min-width: 0; }
.league-number-action .team-action-copy strong { color: #f4fbff; font-size: .76rem; line-height: 1.2; }
.league-number-action .team-action-copy small { margin-top: 3px; color: #8298a9; font-size: .61rem; line-height: 1.25; }
.league-number-action > b { color: #71e7ef; font-size: 1rem; text-align: center; }
.league-number-action:is(:hover, :focus-visible) { outline: 0; border-color: #75ecf4; background: #0b2029; transform: translateY(-1px); }
.league-number-action[aria-pressed="true"] { border-color: rgba(79, 230, 166, .62); background: rgba(79, 230, 166, .1); }
.league-number-action[aria-pressed="true"] > span:first-child { border-color: #4fe6a6; background: #4fe6a6; }
.league-number-action[aria-pressed="true"] > b { color: #75efb9; }

.teams-main { padding-bottom: 28px; }
.teams-hero {
  position: relative;
  display: flex;
  min-height: min(520px, 64vh);
  align-items: flex-end;
  overflow: hidden;
  padding: 42px;
  border: 1px solid rgba(151, 171, 212, .16);
  border-bottom: 3px solid var(--gold);
  background-image: linear-gradient(0deg, rgba(4, 8, 13, .98) 0%, rgba(4, 8, 13, .82) 31%, rgba(4, 8, 13, .2) 67%), linear-gradient(90deg, rgba(4, 8, 13, .65), transparent 60%), url('/league/champion/orianna/splash.jpg');
  background-position: center 28%;
  background-size: cover;
}
.teams-hero-copy { position: relative; z-index: 1; max-width: 820px; }
.teams-hero h1 { max-width: 800px; margin: 5px 0 10px; color: #f7fbff; font-size: clamp(2.4rem, 5vw, 4.7rem); line-height: .98; text-shadow: 0 2px 18px #000; }
.teams-hero .teams-hero-copy > p:last-of-type { max-width: 650px; margin: 0; color: #d3dee8; font-size: .96rem; line-height: 1.5; text-shadow: 0 1px 10px #000; }
.teams-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.teams-hero-actions a { display: inline-flex; min-height: 38px; align-items: center; padding: 8px 14px; border: 1px solid rgba(72, 219, 233, .48); border-radius: 999px; color: #e4fdff; background: rgba(5, 22, 29, .8); font-size: .7rem; font-weight: 900; text-decoration: none; }
.teams-hero-actions a:first-child { border-color: #55dfeb; color: #061317; background: #55dfeb; }
.teams-hero-actions a:is(:hover, :focus-visible) { outline: 0; border-color: #fff; }
.teams-hero-facts {
  position: absolute;
  z-index: 1;
  right: 28px;
  bottom: 28px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(151, 171, 212, .2);
  border-radius: 7px;
  background: rgba(4, 9, 14, .88);
  backdrop-filter: blur(8px);
}
.teams-hero-facts span { min-width: 92px; padding: 11px 13px; color: #8095a8; font-size: .56rem; font-weight: 850; text-transform: uppercase; }
.teams-hero-facts span + span { border-left: 1px solid rgba(151, 171, 212, .16); }
.teams-hero-facts b { display: block; margin-bottom: 2px; color: #f2f8fc; font-size: .82rem; text-transform: none; }
.team-workflow { display: grid; grid-template-columns: 1fr 26px 1fr 26px 1fr; align-items: center; gap: 8px; margin: 16px 0 8px; padding: 12px; border: 1px solid rgba(151, 171, 212, .16); border-radius: 7px; background: #080e15; }
.team-workflow > div { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; align-items: center; min-width: 0; }
.team-workflow > div > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 5px; color: #061316; background: #55dfea; font-size: .72rem; font-weight: 950; }
.team-workflow p, .team-workflow strong, .team-workflow small { display: block; min-width: 0; margin: 0; }
.team-workflow strong { color: #edf7fb; font-size: .7rem; }
.team-workflow small { margin-top: 2px; color: #7e92a4; font-size: .58rem; line-height: 1.3; }
.team-workflow > i { height: 1px; background: rgba(72, 219, 233, .3); }
.team-presets, .team-builder { padding-block: 34px; }
.team-preset-grid { gap: 16px; }
.team-preset-card { grid-template-rows: auto auto auto minmax(54px, auto) auto; gap: 13px; padding: 18px; border-radius: 7px; background: #0a121a; }
.team-preset-card.featured { background: linear-gradient(135deg, rgba(29, 109, 121, .17), #0a121a 48%); }
.team-preset-copy { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 6px 9px; }
.team-preset-copy > i { grid-row: 1 / span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 5px; color: #071216; background: #d9ad4d; font-size: .7rem; font-style: normal; font-weight: 950; }
.team-preset-copy > span { align-self: center; }
.team-preset-copy > p { grid-column: 2 / -1; margin-top: 0; }
.team-five > div { border-radius: 5px; }
.team-five img { border-radius: 5px; }
.team-use-preset { justify-self: stretch; max-width: none; }
.team-reset { min-height: 38px; padding-inline: 15px; border-radius: 999px; }
.team-role-grid { gap: 11px; }
.team-role-field { gap: 8px; padding: 12px; border-radius: 7px; border-top: 3px solid #526579; }
.team-role-field:nth-child(1) { border-top-color: #d5aa4e; }
.team-role-field:nth-child(2) { border-top-color: #64d7a5; }
.team-role-field:nth-child(3) { border-top-color: #a98af0; }
.team-role-field:nth-child(4) { border-top-color: #ed718a; }
.team-role-field:nth-child(5) { border-top-color: #52dce9; }
.team-role-field > label { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 1px 7px; align-items: center; }
.team-role-field > label b { grid-row: 1 / span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 5px; color: #061317; background: #65e4ed; font-size: .66rem; }
.team-role-field > label span { font-size: .7rem; font-weight: 950; }
.team-role-field > label small { color: #72879a; font-size: .54rem; }
.team-role-field .champion-input-shell { min-height: 50px; border-radius: 5px; }
.team-role-field .champion-input-shell img { width: 42px; height: 42px; margin-left: 4px; border-radius: 5px; }
.team-analysis article { position: relative; min-height: 112px; overflow: hidden; border-radius: 7px; }
.team-analysis article::after { position: absolute; right: 10px; bottom: 1px; color: rgba(151, 171, 212, .07); font-size: 2.4rem; font-weight: 950; content: '✓'; }
.team-analysis article.warn::after { color: rgba(228, 173, 72, .09); content: '!'; }
.team-plan-summary { border-radius: 7px; }

.champion-role-map { margin: 22px 0; padding: 20px; border: 1px solid rgba(151, 171, 212, .17); border-radius: 7px; background: #080f17; }
.champion-role-map > header { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.champion-role-map > header h2 { margin: 2px 0 0; color: #f2f8fc; font-size: clamp(1.45rem, 2.5vw, 2rem); }
.champion-role-map > header p:last-child { max-width: 790px; margin: 7px 0 0; color: #8fa1b1; font-size: .72rem; line-height: 1.5; }
.champion-role-map > header > strong { flex: 0 0 auto; padding: 6px 9px; border: 1px solid rgba(79, 230, 166, .3); border-radius: 999px; color: #83efbd; background: rgba(79, 230, 166, .07); font-size: .64rem; }
.champion-role-map-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
.champion-role-map-grid article { display: flex; min-width: 0; min-height: 240px; flex-direction: column; padding: 12px; border: 1px solid rgba(151, 171, 212, .18); border-top: 3px solid #6a7c8e; border-radius: 7px; background: #0a121b; }
.champion-role-map-grid article.is-recommended { border-top-color: #4fe6a6; }
.champion-role-map-grid article.is-possible { border-top-color: #e4ad48; }
.champion-role-map-grid article.is-avoid { border-top-color: #ed637d; }
.champion-role-map-grid article.is-current { box-shadow: 0 0 0 1px rgba(72, 219, 233, .55), 0 8px 24px rgba(0, 0, 0, .18); background: #0d1b23; }
.champion-role-map-heading { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: center; }
.champion-role-map-heading > .champion-role-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--role-color) 58%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--role-color) 12%, #071018);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--role-color) 7%, transparent), 0 8px 18px rgba(0, 0, 0, .18);
  line-height: 1;
}
.champion-role-map-heading > .champion-role-icon img { display: block; width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 7px rgba(215, 178, 94, .24)); }
.champion-role-icon.is-top { --role-color: #71d9a3; }
.champion-role-icon.is-jungle { --role-color: #d5a653; }
.champion-role-icon.is-middle { --role-color: #aa8bea; }
.champion-role-icon.is-bottom { --role-color: #ed718a; }
.champion-role-icon.is-support { --role-color: #55dce9; }
.champion-role-map-grid article.is-current .champion-role-icon {
  border-color: var(--role-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--role-color) 18%, transparent), 0 0 22px color-mix(in srgb, var(--role-color) 20%, transparent);
}
.champion-role-map-heading small, .champion-role-map-heading strong { display: block; min-width: 0; }
.champion-role-map-heading small { color: #e9f2f7; font-size: .72rem; font-weight: 950; }
.champion-role-map-heading strong { margin-top: 3px; color: #8397a9; font-size: .57rem; line-height: 1.3; overflow-wrap: anywhere; }
.champion-role-map-grid article > p { flex: 1; margin: 12px 0; color: #9aabba; font-size: .67rem; line-height: 1.5; }
.champion-role-map-grid article > div:last-child { display: grid; gap: 6px; }
.champion-role-map-grid article a { display: flex; min-height: 34px; align-items: center; justify-content: center; padding: 6px 8px; border: 1px solid rgba(72, 219, 233, .3); border-radius: 999px; color: #dffcff; background: rgba(72, 219, 233, .07); font-size: .59rem; font-weight: 900; text-align: center; text-decoration: none; }
.champion-role-map-grid article a:first-child { border-color: rgba(151, 171, 212, .22); color: #bbc9d4; background: rgba(151, 171, 212, .05); }
.champion-role-map-grid article.is-current a:first-child { border-color: rgba(79, 230, 166, .38); color: #7beeb7; }
.champion-role-map-grid article a:is(:hover, :focus-visible) { outline: 0; border-color: #fff; color: #fff; }
.champion-role-map > footer.champion-role-key { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.champion-role-key article { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 9px; align-items: start; min-width: 0; padding: 11px 12px; border: 1px solid rgba(151, 171, 212, .15); border-radius: 6px; background: #070d14; }
.champion-role-key article > i { width: 10px; height: 10px; margin-top: 3px; border-radius: 3px; background: #6f8192; box-shadow: 0 0 12px rgba(111, 129, 146, .25); }
.champion-role-key article.is-established > i { background: #4fe6a6; box-shadow: 0 0 12px rgba(79, 230, 166, .36); }
.champion-role-key article.is-secondary > i { background: #68dfe9; box-shadow: 0 0 12px rgba(104, 223, 233, .34); }
.champion-role-key article.is-experimental > i { background: #e4ad48; box-shadow: 0 0 12px rgba(228, 173, 72, .32); }
.champion-role-key article.is-unestablished > i { background: #ed637d; box-shadow: 0 0 12px rgba(237, 99, 125, .3); }
.champion-role-key strong, .champion-role-key span { display: block; min-width: 0; }
.champion-role-key strong { color: #edf5fa; font-size: .65rem; line-height: 1.25; }
.champion-role-key span { margin-top: 4px; padding: 0; border: 0; border-radius: 0; color: #879aaa; background: none; font-size: .59rem; line-height: 1.42; }

@media (max-width: 1080px) {
  .teams-hero-facts { position: relative; right: auto; bottom: auto; margin: 20px 0 0; width: fit-content; }
  .teams-hero { display: block; min-height: 430px; padding-top: 180px; }
  .champion-role-map-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .champion-role-map > footer.champion-role-key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .teams-hero { min-height: 420px; padding: 190px 18px 22px; }
  .teams-hero-facts { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .teams-hero-facts span { min-width: 0; padding: 9px; }
  .team-workflow { grid-template-columns: 1fr; }
  .team-workflow > i { width: 1px; height: 10px; margin-left: 16px; }
  .champion-role-map { padding: 15px; }
  .champion-role-map > header { align-items: flex-start; flex-direction: column; }
  .champion-role-map-grid { grid-template-columns: 1fr 1fr; }
  .champion-role-map-grid article { min-height: 220px; }
}
@media (max-width: 480px) {
  .teams-hero h1 { font-size: 2.35rem; }
  .teams-hero-actions { align-items: stretch; flex-direction: column; }
  .teams-hero-actions a { justify-content: center; }
  .teams-hero-facts b { font-size: .72rem; }
  .team-preset-copy { grid-template-columns: 28px minmax(0, 1fr); }
  .team-preset-copy .team-preset-badge { grid-column: 2; width: fit-content; }
  .champion-role-map-grid { grid-template-columns: 1fr; }
  .champion-role-map-grid article { min-height: 0; }
  .champion-role-map > footer.champion-role-key { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .companion-release-page { width: min(100% - 20px, 1180px); margin-top: 10px; }
  .companion-release-hero { grid-template-columns: 1fr; gap: 28px; min-height: 430px; padding: 28px 22px; }
  .companion-release-copy h1 { font-size: 2.55rem; }
  .companion-hero-actions { align-items: stretch; flex-direction: column; }
  .companion-hero-actions a { width: 100%; }
  .companion-release-badges { grid-template-columns: 1fr; }
  .companion-app-preview { width: 100%; }
  .companion-release-state { align-items: flex-start; flex-direction: column; }
  .companion-download-gate, .companion-product-tour, .companion-control-centre, .companion-windows-warning, .companion-verify, .companion-boundaries, .companion-workflow, .companion-requirements, .companion-setup, .companion-recovery, .companion-faq, .companion-related, .companion-preview-notice { padding: 21px 17px; }
  .companion-download-gate { grid-template-columns: 1fr; gap: 22px; }
  .companion-download-facts { grid-template-columns: 1fr; }
  .companion-access-row { grid-template-columns: 1fr; }
  .companion-section-heading, .companion-preview-notice { align-items: flex-start; flex-direction: column; }
  .companion-status-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .companion-status-rail article:nth-child(odd) { border-left: 0; }
  .companion-status-rail article:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .08); }
  .companion-file-facts, .companion-boundary-grid, .companion-setup, .companion-recovery ol { grid-template-columns: 1fr; }
  .companion-file-facts > div + div { border-top: 1px solid rgba(255, 255, 255, .09); border-left: 0; }
  .companion-hash-row dd, .companion-powershell { align-items: stretch; grid-template-columns: 1fr; flex-direction: column; }
  .companion-hash-row button, .companion-powershell button { align-self: flex-start; }
  .companion-preview-links { justify-content: flex-start; }
  .companion-workflow-grid { grid-template-columns: 1fr; }
  .companion-workflow-grid article { min-height: 0; }
  .companion-requirement-grid, .companion-faq-list, .companion-related > div, .companion-data-summary { grid-template-columns: 1fr; }
  .companion-data-summary a { grid-column: auto; }
  .companion-related > header { align-items: flex-start; flex-direction: column; }
  .companion-compatibility-note { align-items: flex-start; }
  .companion-faq-list details > p { padding-left: 18px; }
  .companion-tour-versus { grid-template-columns: 1fr; }
  .companion-tour-versus > b { padding-block: 2px; }
  .companion-tour-foot { grid-template-columns: 1fr; }
  .companion-tour-items { display: grid; grid-template-columns: 1fr 1fr; }
  .companion-tour-items > span { max-width: none; }
  .companion-tour-items > i { display: none; }
  .companion-state-timeline li { grid-template-columns: 30px minmax(0, 1fr); }
  .companion-state-timeline li > em { grid-column: 2; width: fit-content; }
  .companion-settings-toggles, .companion-control-notes { grid-template-columns: 1fr; }
  .companion-shortcut-showcase > header { grid-template-columns: 1fr; gap: 8px; }
  .companion-shortcut-showcase > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .companion-shortcut-showcase > footer p { display: grid; gap: 3px; }
  .companion-settings-panel > footer { grid-template-columns: 1fr; }
  .companion-settings-panel > footer button { grid-row: auto; grid-column: auto; width: fit-content; margin-top: 7px; }
  .companion-diagnostic-guide, .companion-diagnostic-guide ul { grid-template-columns: 1fr; }
  .companion-warning-status { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .companion-warning-shield { width: 52px; height: 52px; }
  .companion-warning-status > strong { grid-column: 1 / -1; max-width: none; text-align: left; }
  .companion-warning-meaning, .companion-warning-actions, .companion-warning-footer { grid-template-columns: 1fr; }
  .companion-riot-notice { grid-template-columns: 46px minmax(0, 1fr); padding: 16px; }
  .companion-riot-notice > span { width: 46px; height: 46px; }
  .companion-riot-notice > a { grid-column: 1 / -1; }
  .companion-warning-meaning article { padding: 16px; }
  .companion-warning-steps, .companion-warning-dialog { padding: 16px; }

  /* Keep the matchup facts full-width after the later desktop declarations. */
  .matchup-attack-types { grid-template-columns: minmax(0, 1fr); }
  .matchup-attack-types > article { width: auto; grid-template-columns: 44px minmax(0, 1fr); }
  .matchup-attack-types > span { display: none; }
  .build-now-matchup { flex-wrap: wrap; }
  .build-now-matchup span { flex: 1 1 150px; }
  .build-now-matchup > b { flex: 1 0 100%; }
}

@media (max-width: 520px) {
  .companion-shortcut-showcase { padding: 14px; }
  .companion-shortcut-showcase > div { grid-template-columns: 1fr; }
  .companion-shortcut-showcase article { min-height: 72px; }
  .companion-shortcut-showcase > footer strong { white-space: normal; }
}

/* v104: one numbered-step language across the League tools. */
.league-step-number {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(78, 225, 238, .72) !important;
  border-radius: 8px !important;
  color: #d8fcff !important;
  background: #092a36 !important;
  box-shadow: 0 0 0 3px rgba(62, 210, 229, .08), 0 6px 16px rgba(0, 0, 0, .26) !important;
  font-size: 1rem !important;
  font-style: normal !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: 0 0 12px rgba(111, 238, 247, .42) !important;
  white-space: nowrap !important;
}
.league-number-action { grid-template-columns: 42px minmax(0, 1fr) 22px; }
.league-number-action[aria-pressed="true"] > .league-step-number { color: #d8fcff !important; background: #092a36 !important; }
.team-workflow > div,
.champion-role-map-heading { grid-template-columns: 42px minmax(0, 1fr); }
.team-preset-copy { grid-template-columns: 42px minmax(0, 1fr) auto; }
.team-role-field > label { grid-template-columns: 42px minmax(0, 1fr); }
.champion-state-phases article,
.support-objective-plan li { grid-template-columns: 44px minmax(0, 1fr); }
.build-opening-checklist li { grid-template-columns: 42px 36px minmax(0, 1fr); }
.jinx-game-plan article { padding-left: 72px; }
.champion-duo-steps span { min-height: 58px; }

@media (max-width: 480px) {
  .team-preset-copy { grid-template-columns: 42px minmax(0, 1fr); }
}

/* v105: extend the numbered-step language to directories and rankings. */
.league-tool-card > .league-step-number { align-self: flex-start; }
.counter-rank { min-width: 58px; align-content: start; justify-items: start; gap: 7px; }
.counter-rank small {
  max-width: 58px;
  color: #8da1b2;
  font-size: .58rem;
  font-weight: 850;
  line-height: 1.25;
  text-align: left;
  writing-mode: horizontal-tb;
}
.counter-rank.unranked { min-width: 58px; }
.draft-recommend-grid article { grid-template-columns: 54px minmax(0, 1fr); }
.draft-rank.league-step-number {
  position: static;
  grid-column: 1;
  grid-row: 1;
}
.draft-recommend-grid article > img {
  grid-column: 1;
  grid-row: 2;
}
.draft-recommend-grid article > div {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
}

/* v106: shared readability, hierarchy and interaction polish. */
.topbar {
  height: 70px;
  border-bottom-color: rgba(151, 171, 212, .22);
  background: rgba(5, 10, 15, .94);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  backdrop-filter: blur(14px);
}
.brand { font-size: 22px; }
.topbar nav { gap: 7px; }
.topbar nav a,
.league-nav-more > summary {
  min-height: 40px;
  padding-inline: 13px;
  font-size: 15px;
  font-weight: 700;
}
.league-language > summary {
  min-height: 40px;
  font-size: 14px;
}
.topbar nav a,
.league-nav-more > summary,
.league-language > summary,
button,
a {
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.topbar nav a:focus-visible,
.league-nav-more > summary:focus-visible,
.league-language > summary:focus-visible {
  outline: 2px solid #62e4ee;
  outline-offset: 2px;
}
main { width: min(1220px, calc(100% - 32px)); }
.eyebrow,
.section-heading span {
  font-size: 13px;
  line-height: 1.35;
}
.section-heading h2,
.section-heading h3 { text-wrap: balance; }

.lookup-shell {
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
  gap: 28px;
  align-items: center;
}
.lookup-form {
  padding-left: 28px;
  border-left: 1px solid rgba(151, 171, 212, .18);
}
.lookup-form label { font-size: 13px; }
.lookup-form input,
.lookup-form select { font-size: 16px; }
.lookup-form button {
  box-shadow: 0 8px 24px rgba(69, 196, 134, .12);
}
.lookup-form button:is(:hover, :focus-visible) {
  box-shadow: 0 10px 28px rgba(69, 196, 134, .2);
  transform: translateY(-1px);
}

.league-tool-card {
  border-color: rgba(151, 171, 212, .22);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
}
.league-tool-card:is(:hover, :focus-visible) {
  box-shadow: 0 16px 34px rgba(0, 0, 0, .24);
}
.league-tool-card strong { font-size: 1.03rem; line-height: 1.25; }
.league-tool-card small { font-size: .76rem; line-height: 1.48; }

.champion-facts span { font-size: .7rem; }
.champion-facts strong { font-size: .94rem; }
.champion-facts small { font-size: .72rem; }
.champion-role-map > header p:last-child { font-size: .8rem; }
.champion-role-map > header > strong { font-size: .71rem; }
.champion-role-map-grid { gap: 11px; }
.champion-role-map-grid article {
  min-height: 252px;
  padding: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}
.champion-role-map-heading small { font-size: .8rem; }
.champion-role-map-heading strong { font-size: .65rem; }
.champion-role-map-grid article > p { font-size: .75rem; line-height: 1.55; }
.champion-role-map-grid article a { min-height: 38px; padding-inline: 10px; font-size: .68rem; }
.champion-role-key strong { font-size: .72rem; }
.champion-role-key span { font-size: .66rem; line-height: 1.5; }

.counter-picker { box-shadow: 0 12px 28px rgba(0, 0, 0, .15); }
.counter-picker-status { font-size: .81rem; }
.counter-scope { gap: 10px; }
.counter-scope a {
  min-height: 62px;
  justify-content: center;
  padding: 13px 16px;
  border-radius: 7px;
}
.counter-scope strong { font-size: .88rem; }
.counter-scope span { font-size: .72rem; line-height: 1.4; }
.counter-card {
  border-color: rgba(151, 171, 212, .22);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
}
.counter-card-copy > strong { font-size: .84rem; }
.counter-card-copy p { font-size: .84rem; line-height: 1.56; }

.draft-hero aside p { font-size: .8rem; }
.draft-hero aside span { font-size: .72rem; }
.draft-toolbar { min-height: 64px; padding: 15px 18px; }
.draft-toolbar span { font-size: .73rem; }
.draft-toolbar-group > span { font-size: .64rem; }
.draft-toolbar button,
.draft-inference-control > button,
.draft-recommend-grid button {
  min-height: 40px;
  padding-inline: 14px;
  font-size: .73rem;
}
.draft-inference { padding: 20px; }
.draft-inference p { font-size: .8rem; }
.draft-inference-control label span { font-size: .69rem; }
.draft-inference output { font-size: .75rem; }
.draft-inference output strong { font-size: .82rem; }
.draft-inference-menu strong,
.draft-picker-menu strong { font-size: .8rem; }
.draft-inference-menu small,
.draft-picker-menu small { font-size: .65rem; }

.teams-hero-actions a { min-height: 42px; padding-inline: 16px; font-size: .78rem; }
.teams-hero-facts span { font-size: .64rem; }
.teams-hero-facts b { font-size: .92rem; }
.team-workflow { padding: 14px; }
.team-workflow strong { font-size: .79rem; }
.team-workflow small { font-size: .66rem; line-height: 1.4; }
.team-preset-copy .team-preset-badge { font-size: .69rem; }
.team-preset-copy p { font-size: .84rem; }
.team-five small { font-size: .64rem; }
.team-five strong { font-size: .74rem; }
.team-five em { font-size: .65rem; }
.team-watch { font-size: .79rem; }
.team-use-preset,
.team-reset { min-height: 42px; font-size: .77rem; }
.team-role-field > label span { font-size: .78rem; }
.team-role-field > label small { font-size: .62rem; }
.team-role-field > small { font-size: .68rem; }
.team-analysis span { font-size: .68rem; }
.team-analysis strong { font-size: .9rem; }
.team-analysis p { font-size: .75rem; line-height: 1.5; }
.team-plan-summary span { font-size: .7rem; }
.team-plan-summary strong { font-size: 1.08rem; }
.team-plan-summary p { font-size: .81rem; }
.team-guide-links a { min-height: 36px; display: inline-flex; align-items: center; font-size: .72rem; }

@media (max-width: 900px) {
  .topbar { height: 64px; padding-inline: 16px; }
  .brand { font-size: 20px; }
  .topbar nav a,
  .league-nav-more > summary,
  .league-language > summary { min-height: 38px; }
  .lookup-form { padding-left: 0; border-left: 0; }
}

@media (max-width: 760px) {
  main { width: min(100% - 20px, 1220px); padding-top: 10px; }
  .lookup-shell { gap: 20px; }
  .league-hero { height: auto; min-height: 410px; }
  .league-hero .hero-art { object-position: 62% 24%; }
  .hero-shade {
    background: linear-gradient(0deg, rgba(4, 9, 13, .98) 0%, rgba(4, 9, 13, .88) 52%, rgba(4, 9, 13, .24) 100%);
  }
  .hero-copy {
    min-height: 410px;
    justify-content: flex-end;
    padding: 28px 18px 24px;
  }
  .hero-copy::before { inset: auto 10px 10px; width: auto; height: 72%; background: linear-gradient(0deg, rgba(3, 9, 15, .85), rgba(3, 9, 15, .16)); }
  .hero-copy h1 { max-width: 100%; font-size: clamp(2.15rem, 11vw, 3.15rem); line-height: 1.02; overflow-wrap: anywhere; }
  .hero-copy > p:last-child { max-width: 100%; font-size: .94rem; line-height: 1.45; }
  .league-hero-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .league-hero-actions a { justify-content: center; min-width: 0; padding-inline: 10px; text-align: center; }
  .league-hero-actions a:last-child { grid-column: 1 / -1; }
  .champion-role-map-grid article { min-height: 230px; }
  .counter-scope { grid-template-columns: 1fr; }
  .draft-toolbar { align-items: stretch; flex-direction: column; }
  .draft-toolbar-actions { align-items: stretch; flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .league-hero { min-height: 430px; }
  .hero-copy { min-height: 430px; }
  .league-hero-actions { grid-template-columns: 1fr; }
  .league-hero-actions a:last-child { grid-column: auto; }
  .league-tool-card strong { font-size: .96rem; }
  .league-tool-card small { font-size: .73rem; }
  .champion-role-map-grid article { min-height: 0; }
  .champion-role-map-heading small { font-size: .78rem; }
  .champion-role-map-grid article > p { font-size: .73rem; }
}

/* v109: homepage-first League landing and production-gated player example. */
.league-home-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 10px;
}
.league-home-status > a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid #303a4a;
  border-radius: 7px;
  background: #111824;
  color: #eef3fb;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.league-home-status > a:is(:hover, :focus-visible) {
  border-color: #56cfdb;
  background: #14202d;
  transform: translateY(-2px);
}
.league-home-status-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.league-home-status-icon i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}
.league-home-status-icon.is-live { color: #57d59a; }
.league-home-status-icon.is-waiting { color: #e8b95f; }
.league-home-status-icon.is-private { color: #aa86ef; }
.league-home-status small,
.league-home-status strong {
  display: block;
  min-width: 0;
}
.league-home-status small {
  margin-bottom: 3px;
  color: #8e9db1;
  font-size: .66rem;
  font-weight: 850;
  text-transform: uppercase;
}
.league-home-status strong {
  overflow-wrap: anywhere;
  font-size: .84rem;
}
.league-home-status b {
  color: #72dce5;
  font-size: .7rem;
  white-space: nowrap;
}
.league-home-shortcuts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 26px;
}
.league-home-shortcuts a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 12px;
  min-width: 0;
  min-height: 86px;
  align-content: center;
  padding: 16px;
  border: 1px solid rgba(102, 224, 234, .2);
  border-radius: 7px;
  color: #effaff;
  background: #0d1621;
  text-decoration: none;
}
.league-home-shortcuts a:nth-child(2) { border-top-color: #9a76e8; }
.league-home-shortcuts a:nth-child(3) { border-top-color: #e5af58; }
.league-home-shortcuts a:nth-child(4) { border-top-color: #55ba87; }
.league-home-shortcuts a:is(:hover, :focus-visible) {
  border-color: rgba(102, 224, 234, .55);
  background: #111e2b;
  transform: translateY(-2px);
}
.league-home-shortcuts .league-step-number {
  grid-row: 1 / span 2;
  align-self: center;
}
.league-home-shortcuts strong {
  align-self: end;
  font-size: .94rem;
}
.league-home-shortcuts small {
  overflow-wrap: anywhere;
  color: #94a8b8;
  font-size: .72rem;
  line-height: 1.4;
}
.league-home-paths {
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(0, 1.8fr);
  gap: 26px;
  margin: 0 0 28px;
  padding: 28px 0;
  border-block: 1px solid rgba(132, 161, 184, .16);
}
.league-home-paths > header {
  align-self: center;
}
.league-home-paths > header h2 {
  max-width: 430px;
  margin: 5px 0 10px;
  color: #f2f8fb;
  font-size: clamp(1.45rem, 2.6vw, 2.2rem);
  line-height: 1.08;
}
.league-home-paths > header > p:last-child {
  max-width: 520px;
  margin: 0;
  color: #91a6b5;
  font-size: .82rem;
  line-height: 1.6;
}
.league-home-paths > div {
  display: grid;
  gap: 8px;
}
.league-home-paths article {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  min-width: 0;
  padding: 15px 16px;
  border-left: 3px solid #54dce7;
  background: linear-gradient(90deg, rgba(18, 44, 53, .78), rgba(12, 20, 30, .56));
}
.league-home-paths article:nth-child(2) { border-left-color: #a47bea; }
.league-home-paths article:nth-child(3) { border-left-color: #e5af58; }
.league-home-paths article small {
  color: #64dce6;
  font-size: .64rem;
  font-weight: 900;
  text-transform: uppercase;
}
.league-home-paths article:nth-child(2) small { color: #b795ee; }
.league-home-paths article:nth-child(3) small { color: #e8bd6d; }
.league-home-paths article h3 {
  margin: 2px 0 3px;
  color: #f4f8fa;
  font-size: .96rem;
}
.league-home-paths article p {
  margin: 0;
  color: #93a6b5;
  font-size: .72rem;
  line-height: 1.45;
}
.league-home-paths article a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 0 13px;
  border: 1px solid rgba(102, 224, 234, .34);
  border-radius: 999px;
  color: #dcfbff;
  background: rgba(14, 43, 50, .7);
  font-size: .7rem;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}
.league-home-paths article a:is(:hover, :focus-visible) {
  border-color: #62e1eb;
  color: #fff;
  background: #153b43;
}
.lookup-pending-panel {
  display: grid;
  gap: 9px;
  padding: 22px;
  border: 1px solid rgba(229, 175, 88, .3);
  border-left: 3px solid #e5af58;
  border-radius: 7px;
  background: #101820;
}
.lookup-pending-state {
  width: fit-content;
  padding: 6px 9px;
  border: 1px solid rgba(229, 175, 88, .32);
  border-radius: 999px;
  color: #f1c878;
  background: rgba(72, 49, 15, .42);
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}
.lookup-pending-panel > strong {
  color: #f4f8fa;
  font-size: 1.02rem;
}
.lookup-pending-panel p {
  margin: 0;
  color: #9fb0bd;
  font-size: .82rem;
  line-height: 1.55;
}
.lookup-pending-panel button {
  width: fit-content;
  min-height: 42px;
  margin-top: 4px;
  padding: 0 16px;
  border: 1px solid rgba(102, 224, 234, .4);
  border-radius: 6px;
  color: #eafcff;
  background: #12303a;
  font-weight: 850;
  cursor: pointer;
}
.profile-band #profile-snapshot {
  display: block;
  margin-top: 5px;
  color: #8fa4b3;
  font-size: .72rem;
}

/* Player lookup facts dashboard v2 */
.league-player-page { --player-cyan: #59e1eb; --player-gold: #e8b957; --player-violet: #aa8cf4; --player-green: #67d9a5; }
.league-player-page main { width: min(1220px, calc(100% - 36px)); }
.league-player-page .league-hero { min-height: 390px; }
.league-player-page .hero-copy { max-width: 1040px; }
.player-hero-facts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; max-width: 850px; margin-top: 23px; }
.player-hero-facts span { display: grid; grid-template-columns: 34px minmax(0,1fr); grid-template-rows: auto auto; gap: 1px 10px; min-width: 0; padding: 12px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; background: rgba(5,12,19,.78); }
.player-hero-facts i { grid-row: 1/3; align-self: center; color: var(--player-cyan); font-size: 1.1rem; }.player-hero-facts span:nth-child(2) i { color: var(--player-gold); }.player-hero-facts span:nth-child(3) i { color: var(--player-violet); }.player-hero-facts span:nth-child(4) i { color: var(--player-green); }
.player-hero-facts b,.player-hero-facts small { display: block; min-width: 0; overflow-wrap: anywhere; }.player-hero-facts b { color: #f5f9fb; font-size: .78rem; }.player-hero-facts small { color: #a5b5bf; font-size: .65rem; }
.player-lookup-shell { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; align-items: stretch; padding: 27px 0 32px; }
.player-lookup-heading { display: grid; grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr); gap: 38px; align-items: end; }
.player-lookup-heading h2 { max-width: 620px; font-size: clamp(2rem,4vw,3.35rem); line-height: 1.02; }.player-lookup-heading > p { max-width: 720px; margin: 0; color: #a9bbc6; font-size: 1rem; line-height: 1.65; }
.league-player-page .lookup-pending-panel { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 20px; border: 1px solid #554827; border-left: 4px solid var(--player-gold); border-radius: 7px; background: #17160f; }
.lookup-pending-icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #6d5b2c; border-radius: 6px; color: #ffd77d; background: #2a220f; font-size: 1.35rem; }
.league-player-page .lookup-pending-panel > div:nth-child(2) { min-width: 0; }.league-player-page .lookup-pending-panel strong,.league-player-page .lookup-pending-panel p { display: block; }.league-player-page .lookup-pending-panel > div:nth-child(2) > strong { margin: 5px 0 3px; color: #fff2c9; font-size: 1.12rem; }.league-player-page .lookup-pending-panel p { max-width: 760px; margin: 0; color: #bdb49b; line-height: 1.52; }
.league-player-page .lookup-pending-panel button { gap: 8px; min-height: 46px; height: auto; white-space: nowrap; }
.league-player-page .lookup-shell > .status { grid-column: auto; display: flex; align-items: center; gap: 8px; min-height: 0; margin: 0; color: #95cdb9; }.league-player-page .lookup-shell > .status i { color: var(--player-green); }
.player-fact-contract { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.player-fact-contract article { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 11px; min-width: 0; padding: 15px; border: 1px solid #283844; border-radius: 6px; background: #0d1720; }
.player-fact-contract article:nth-child(2) { border-top-color: #9f8449; }.player-fact-contract article:nth-child(3) { border-top-color: #725ea8; }.player-fact-contract article:nth-child(4) { border-top-color: #9c5b66; }
.player-fact-contract i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 5px; color: var(--player-cyan); background: #10303a; }.player-fact-contract article:nth-child(2) i { color: #f0ca77; background: #2a2313; }.player-fact-contract article:nth-child(3) i { color: #c7b0ff; background: #211b36; }.player-fact-contract article:nth-child(4) i { color: #ffa6b4; background: #321820; }
.player-fact-contract strong,.player-fact-contract small { display: block; overflow-wrap: anywhere; }.player-fact-contract strong { color: #edf6f8; font-size: .84rem; }.player-fact-contract small { margin-top: 4px; color: #8fa3b0; font-size: .7rem; line-height: 1.45; }
.league-player-page .results { scroll-margin-top: 78px; padding-top: 26px; }
.player-result-banner { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 18px; align-items: center; margin-bottom: 16px; padding: 14px 17px; border: 1px solid #665329; border-radius: 6px; background: #1a170e; }
.player-result-banner > span { display: inline-flex; align-items: center; gap: 8px; color: #ffd475; font-size: .72rem; font-weight: 900; text-transform: uppercase; }.player-result-banner p { margin: 0; color: #c8bda0; line-height: 1.5; }.player-result-banner p strong { color: #fff0c3; }
.league-player-page .profile-band { display: grid; grid-template-columns: 90px minmax(0,1fr) auto; gap: 18px; padding: 20px; border: 1px solid #2a3d49; border-left: 4px solid var(--player-cyan); border-radius: 7px; background: #0b151e; }
.league-player-page .profile-band img { width: 88px; height: 88px; object-fit: cover; box-shadow: 0 10px 24px rgba(0,0,0,.28); }.profile-identity { min-width: 0; }.league-player-page .profile-band h2 { overflow-wrap: anywhere; color: #f6fbfd; font-size: clamp(1.7rem,3vw,2.4rem); }
.profile-fact-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }.profile-fact-row > * { display: inline-flex; min-height: 27px; align-items: center; padding: 0 10px; border: 1px solid #2a4855; border-radius: 999px; color: #b6d4dc !important; background: #0d222b; font-size: .7rem; }
.profile-boundary { align-self: center; max-width: 250px; padding: 12px 14px; border: 1px solid #4c416c; border-radius: 6px; background: #171426; }.profile-boundary span,.profile-boundary strong { display: block; }.profile-boundary span { color: #b99cff; font-size: .66rem; font-weight: 900; text-transform: uppercase; }.profile-boundary strong { margin-top: 3px; color: #e8e0ff; font-size: .82rem; }
.league-player-page .recent-overview { padding: 22px; border-top-color: var(--player-green); }.league-player-page .recent-overview .section-heading h3 { font-size: 1.25rem; }.league-player-page .recent-overview .section-heading > span,.league-player-page .matches .section-heading > span { padding: 6px 9px; border: 1px solid #34515b; border-radius: 999px; color: #a9dbe0; background: #0d242b; font-weight: 800; }
.player-mode-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin: 14px 0; padding: 7px; border: 1px solid #293f4c; border-radius: 7px; background: #081019; }
.player-mode-tabs button { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; align-items: center; min-width: 0; min-height: 58px; padding: 9px 11px; border: 1px solid #34434f; border-radius: 5px; background: #111923; color: #9cabb9; text-align: left; cursor: pointer; transition: border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease; }
.player-mode-tabs button:hover { border-color: #56cfd7; color: #e9fbfc; transform: translateY(-1px); }.player-mode-tabs button:focus-visible { outline: 3px solid rgba(92,220,228,.34); outline-offset: 2px; }
.player-mode-tabs button > i { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #3f6470; border-radius: 50%; background: #10262d; color: #6ee5e8; font-size: 1rem; }.player-mode-tabs button span,.player-mode-tabs button strong,.player-mode-tabs button small { display: block; min-width: 0; overflow-wrap: anywhere; }.player-mode-tabs button strong { color: inherit; font-size: .79rem; }.player-mode-tabs button small { margin-top: 2px; color: #728290; font-size: .64rem; }
.player-mode-tabs button:nth-child(2) > i { border-color: #74602f; background: #281f0d; color: #f0c65c; }.player-mode-tabs button:nth-child(3) > i { border-color: #624781; background: #21162f; color: #c19af5; }.player-mode-tabs button:nth-child(4) > i { border-color: #416483; background: #102337; color: #8bc9f3; }
.player-mode-tabs button.is-active { border-color: #55d7df; background: linear-gradient(135deg,#123039,#111a24); color: #effeff; box-shadow: inset 0 -3px #55d7df; }.player-mode-tabs button.is-active small { color: #9ed8dc; }
.league-player-page .recent-metrics article { position: relative; overflow: hidden; min-height: 96px; padding: 16px; }.league-player-page .recent-metrics article::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--player-cyan); }.league-player-page .recent-metrics article:nth-child(2)::before { background: var(--player-violet); }.league-player-page .recent-metrics article:nth-child(3)::before { background: var(--player-gold); }.league-player-page .recent-metrics article:nth-child(4)::before { background: var(--player-green); }
.league-player-page .recent-breakdowns b { border-radius: 5px; }
.league-player-page .sample-note { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 10px; align-items: start; padding: 12px 14px; border-left: 3px solid var(--player-violet); color: #aaa4bf; background: #161423; line-height: 1.45; }.league-player-page .sample-note i { color: #bba1ff; }.league-player-page .sample-note strong { color: #e2d9fa; }
.league-player-page .result-grid { gap: 12px; }.league-player-page .result-grid > section,.league-player-page .matches { padding: 20px; border: 1px solid #2a3945; border-top-width: 3px; border-radius: 7px; }.league-player-page .result-grid .section-heading,.league-player-page .matches .section-heading { align-items: end; }.league-player-page .result-grid .section-heading .eyebrow,.league-player-page .matches .section-heading .eyebrow { margin-bottom: 3px; }
.player-section-title { display: flex; align-items: center; gap: 12px; min-width: 0; }.player-section-title > i { display: grid; flex: 0 0 42px; place-items: center; width: 42px; height: 42px; border: 1px solid #8b6d2f; border-radius: 6px; color: #ffd16d; background: #2b210e; font-size: 1.1rem; }.player-section-title span { min-width: 0; }.player-ranked-panel { border-top-color: var(--player-gold) !important; background: linear-gradient(145deg,#18160f,#0d151d 48%) !important; }.player-mastery-panel { border-top-color: var(--player-violet) !important; background: linear-gradient(145deg,#171329,#0d151d 48%) !important; }.player-mastery-panel .player-section-title > i { border-color: #635194; color: #c8b0ff; background: #261d40; }.player-matches-panel { border-top-color: var(--player-cyan) !important; background: linear-gradient(145deg,#0c1d24,#0d141c 40%) !important; }.player-matches-panel .player-section-title > i { border-color: #286b74; color: #7ceaf0; background: #103039; }
.player-section-explainer { margin: 14px 0 16px; padding: 11px 13px; border-left: 3px solid #9b7b35; color: #b8ad94; background: rgba(40,32,16,.68); font-size: .75rem; line-height: 1.55; }.player-mastery-panel .player-section-explainer { border-left-color: #8e73d2; color: #b8aed0; background: rgba(34,25,55,.72); }.player-matches-panel .player-section-explainer { border-left-color: #48cbd5; color: #9fc4ca; background: rgba(13,38,45,.72); }
.league-player-page .stack article { border-radius: 6px; }.league-player-page .stack .empty { display: grid; gap: 5px; margin: 0; padding: 16px; border: 1px dashed #40505c; border-radius: 6px; background: #0c151d; }.league-player-page .stack .empty strong { color: #e8eef1; }.league-player-page .stack .empty span { color: #8fa0ac; line-height: 1.45; }
.player-ranked-panel .stack article { border-color: #51452c; background: #17170f; }.player-mastery-panel .stack article { border-color: #43385f; background: #151326; }.player-mastery-panel .mastery-identity img { border-color: #7861ab; box-shadow: 0 0 0 2px rgba(169,140,244,.1); }
.league-player-page .match-list { grid-template-columns: repeat(auto-fit,minmax(245px,1fr)); gap: 10px; }.league-player-page .match-list article { min-width: 0; padding: 15px; border-radius: 6px; }.league-player-page .match-result > span { padding: 4px 7px; border-radius: 4px; background: rgba(225,91,105,.1); }.league-player-page .match-list article.win .match-result > span { background: rgba(75,208,145,.1); }
.league-player-page .match-list article { border-color: #30444f; border-left: 3px solid #dc6279; background: #101923; }.league-player-page .match-list article.win { border-left-color: #5bd69c; background: #0e1d1a; }.league-player-page .match-list article:hover { border-color: #4f8290; transform: translateY(-1px); }
.player-source-panel { margin: 20px 0 34px; padding: 25px; border: 1px solid #2b3d49; border-radius: 7px; background: #0b141c; }.player-source-panel > header { display: grid; grid-template-columns: minmax(250px,.75fr) minmax(0,1.25fr); gap: 8px 36px; align-items: end; }.player-source-panel > header .eyebrow { grid-column: 1; }.player-source-panel h3 { grid-column: 1; margin: 0; font-size: 1.45rem; }.player-source-panel > header > p:last-child { grid-column: 2; grid-row: 1/3; margin: 0; color: #9dafba; line-height: 1.65; }.player-source-panel > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 20px; }.player-source-panel article { min-width: 0; padding: 16px; border: 1px solid #2b3c49; border-top: 3px solid var(--player-cyan); border-radius: 6px; background: #101a23; }.player-source-panel article:nth-child(2) { border-top-color: var(--player-gold); }.player-source-panel article:nth-child(3) { border-top-color: var(--player-violet); }.player-source-panel article:nth-child(4) { border-top-color: var(--player-green); }.player-source-panel i { color: var(--player-cyan); }.player-source-panel article:nth-child(2) i { color: var(--player-gold); }.player-source-panel article:nth-child(3) i { color: var(--player-violet); }.player-source-panel article:nth-child(4) i { color: var(--player-green); }.player-source-panel strong,.player-source-panel span { display: block; overflow-wrap: anywhere; }.player-source-panel strong { margin-top: 9px; color: #edf6f8; font-size: .82rem; }.player-source-panel span { margin-top: 5px; color: #8fa1ad; font-size: .7rem; line-height: 1.45; }
.player-reading-guide { margin: -18px 0 38px; padding: 26px; border: 1px solid #3a354f; border-radius: 7px; background: #10121d; }.player-reading-guide > header { max-width: 720px; }.player-reading-guide h3 { margin: 3px 0 0; color: #f0edff; font-size: 1.4rem; }.player-reading-guide > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-top: 18px; }.player-reading-guide article { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 12px; min-width: 0; padding: 17px; border: 1px solid #2e594d; border-left: 4px solid var(--player-green); border-radius: 6px; background: #0f201b; }.player-reading-guide article.is-summary { border-color: #66512c; border-left-color: var(--player-gold); background: #211b10; }.player-reading-guide article.is-excluded { border-color: #593446; border-left-color: #e47391; background: #21131a; }.player-reading-guide i { color: #70dfac; font-size: 1.25rem; }.player-reading-guide .is-summary i { color: #efc66e; }.player-reading-guide .is-excluded i { color: #f38aa5; }.player-reading-guide strong,.player-reading-guide p { display: block; overflow-wrap: anywhere; }.player-reading-guide strong { color: #eff8f5; }.player-reading-guide p { margin: 5px 0 0; color: #9eafa9; font-size: .73rem; line-height: 1.5; }.player-reading-guide .is-summary p { color: #b7aa8e; }.player-reading-guide .is-excluded p { color: #b99ba4; }
@media (max-width: 900px) { .player-hero-facts,.player-fact-contract,.player-source-panel > div { grid-template-columns: repeat(2,minmax(0,1fr)); }.player-reading-guide > div { grid-template-columns: 1fr; }.player-lookup-heading,.player-source-panel > header { grid-template-columns: 1fr; gap: 12px; }.player-source-panel > header > p:last-child { grid-column: 1; grid-row: auto; }.league-player-page .lookup-pending-panel { grid-template-columns: 54px minmax(0,1fr); }.league-player-page .lookup-pending-panel button { grid-column: 1/-1; justify-self: start; }.league-player-page .profile-band { grid-template-columns: 90px minmax(0,1fr); }.profile-boundary { grid-column: 1/-1; max-width: none; }.league-player-page .result-grid { grid-template-columns: 1fr; }.player-mode-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) { .league-player-page main { width: min(100% - 20px,1220px); }.league-player-page .league-hero { min-height: 470px; }.player-hero-facts,.player-fact-contract,.player-source-panel > div { grid-template-columns: 1fr; }.player-hero-facts { gap: 5px; }.player-hero-facts span { padding: 9px 11px; }.league-player-page .lookup-pending-panel { grid-template-columns: 1fr; }.lookup-pending-icon { width: 44px; height: 44px; }.league-player-page .lookup-pending-panel button { width: 100%; }.league-player-page .profile-band { grid-template-columns: 66px minmax(0,1fr); padding: 15px; }.league-player-page .profile-band img { width: 64px; height: 64px; }.league-player-page .profile-band h2 { font-size: 1.45rem; }.profile-boundary { grid-column: 1/-1; }.player-result-banner { grid-template-columns: 1fr; gap: 7px; }.player-mode-tabs { grid-template-columns: 1fr 1fr; padding: 5px; }.player-mode-tabs button { grid-template-columns: 28px minmax(0,1fr); gap: 8px; min-height: 54px; padding: 8px; }.player-mode-tabs button > i { width: 28px; height: 28px; }.league-player-page .recent-overview,.league-player-page .result-grid > section,.league-player-page .matches,.player-source-panel,.player-reading-guide { padding: 17px; }.league-player-page .recent-overview .section-heading,.league-player-page .matches .section-heading { align-items: start; gap: 8px; }.player-section-title > i { flex-basis: 36px; width: 36px; height: 36px; }.league-player-page .match-list { grid-template-columns: 1fr; } }

/* v118: project-home hierarchy and champion status-effect reference. */
.league-home-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 18px;
  margin: 22px 0 14px;
  padding: 24px;
  border: 1px solid rgba(111, 144, 174, .22);
  border-radius: 7px;
  background: #0b131d;
}
.league-home-command > header {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(117, 149, 176, .16);
}
.league-home-command h2 {
  margin: 3px 0 0;
  color: #f4f8fc;
  font-size: clamp(1.6rem, 3.4vw, 2.7rem);
  line-height: 1;
}
.league-home-command-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.league-home-command-grid > a {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-content: start;
  gap: 3px 12px;
  min-width: 0;
  min-height: 218px;
  padding: 18px;
  border: 1px solid #2b3b4a;
  border-top: 3px solid #4ed8e3;
  border-radius: 6px;
  color: #edf7fb;
  background: #101b27;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.league-home-command-grid > a.is-draft { border-top-color: #a47bed; }
.league-home-command-grid > a.is-play { border-top-color: #e9b756; }
.league-home-command-grid > a:is(:hover, :focus-visible) {
  border-color: #55dce7;
  background: #132432;
  transform: translateY(-3px);
}
.league-home-command-grid .league-step-number {
  grid-row: 1 / span 4;
  align-self: start;
}
.league-home-command-grid small {
  color: #70dfe7;
  font-size: .67rem;
  font-weight: 900;
  text-transform: uppercase;
}
.league-home-command-grid .is-draft small { color: #bd9afb; }
.league-home-command-grid .is-play small { color: #edc46f; }
.league-home-command-grid strong {
  margin-top: 3px;
  font-size: 1.02rem;
}
.league-home-command-grid p {
  margin: 7px 0 15px;
  color: #9aafbd;
  font-size: .78rem;
  line-height: 1.5;
}
.league-home-command-grid b {
  align-self: end;
  color: #dffcff;
  font-size: .72rem;
}
.league-home-release {
  display: grid;
  align-content: stretch;
  border: 1px solid #283744;
  border-radius: 6px;
  overflow: hidden;
  background: #0d1721;
}
.league-home-release > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 14px;
  border-bottom: 1px solid #24313c;
}
.league-home-release > div:last-child { border-bottom: 0; }
.league-home-release p { min-width: 0; margin: 0; }
.league-home-release small,
.league-home-release strong { display: block; }
.league-home-release small {
  margin-bottom: 3px;
  color: #8298a9;
  font-size: .62rem;
  font-weight: 900;
  text-transform: uppercase;
}
.league-home-release strong {
  color: #e7f1f7;
  font-size: .78rem;
  overflow-wrap: anywhere;
}
.league-home-reference-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 30px;
  border: 1px solid #253440;
  border-radius: 6px;
  overflow: hidden;
  background: #253440;
}
.league-home-reference-strip > span { grid-column: 1 / -1; min-height: 58px; }
.league-home-reference-strip > span,
.league-home-reference-strip a {
  display: flex;
  min-width: 0;
  min-height: 72px;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  color: #edf8fb;
  background: #0d1721;
}
.league-home-reference-strip > span { display: grid; align-content: center; }
.league-home-reference-strip > span small {
  color: #62dbe5;
  font-size: .62rem;
  font-weight: 900;
  text-transform: uppercase;
}
.league-home-reference-strip > span strong { font-size: .78rem; line-height: 1.35; }
.league-home-reference-strip a { text-decoration: none; }
.league-home-reference-strip a:is(:hover, :focus-visible) { background: #132430; }
.league-home-reference-strip a > b {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #426170;
  border-radius: 5px;
  color: #70e1e9;
  background: #122530;
  font-size: .66rem;
}
.league-home-reference-strip a span { min-width: 0; }
.league-home-reference-strip a strong,
.league-home-reference-strip a small { display: block; overflow-wrap: anywhere; }
.league-home-reference-strip a strong { font-size: .76rem; }
.league-home-reference-strip a small { margin-top: 2px; color: #8498a7; font-size: .63rem; line-height: 1.3; }
.league-tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.league-tool-card,
.league-tool-card:nth-child(4),
.league-tool-card:nth-child(5) {
  grid-column: auto;
}
.league-tool-card { min-height: 170px; }

.status-effects-main { padding-top: 20px; }
.status-effects-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 30px;
  min-height: 360px;
  align-items: center;
  padding: 46px;
  border: 1px solid #2e4251;
  border-bottom: 3px solid #55dce7;
  border-radius: 7px;
  background:
    linear-gradient(105deg, rgba(7, 18, 28, .98), rgba(11, 22, 34, .9) 55%, rgba(18, 24, 43, .92)),
    url('/league/assets/vex-social-20260718.jpg') right center/cover;
}
.status-effects-hero h1 {
  max-width: 700px;
  margin: 7px 0 14px;
  color: #f7fbfd;
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: .92;
}
.status-effects-hero > div > p:last-of-type {
  max-width: 670px;
  margin: 0;
  color: #b4c7d3;
  font-size: 1rem;
  line-height: 1.65;
}
.status-effects-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.status-effects-hero-actions a,
.status-effect-grid article > button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid #4b8b96;
  border-radius: 999px;
  color: #e9fdff;
  background: #12323a;
  font-size: .76rem;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}
.status-effects-hero-actions a:last-child { border-color: #7557a9; background: #261d3b; }
.status-effects-hero aside {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid rgba(111, 224, 233, .24);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(8, 17, 26, .8);
  backdrop-filter: blur(10px);
}
.status-effects-hero aside article {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(117, 148, 171, .18);
}
.status-effects-hero aside article:last-child { border-bottom: 0; }
.status-effects-hero aside strong { color: #71e4ec; font-size: 1.7rem; }
.status-effects-hero aside span { color: #a8bbc7; font-size: .75rem; font-weight: 800; }
.status-effect-primer,
.status-effect-browser,
.champion-effect-directory {
  margin-top: 28px;
  padding: 28px 0;
  border-top: 1px solid rgba(130, 157, 178, .18);
}
.status-effect-primer > header,
.status-effect-browser > header,
.champion-effect-directory > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.status-effect-primer h2,
.status-effect-browser h2,
.champion-effect-directory h2 {
  margin: 4px 0 7px;
  color: #f3f8fb;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1;
}
.status-effect-primer header p:last-child,
.status-effect-browser header p:last-child,
.champion-effect-directory header p:last-child {
  max-width: 720px;
  margin: 0;
  color: #93a8b6;
  line-height: 1.55;
}
.status-effect-primer > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.status-effect-primer article {
  min-height: 150px;
  padding: 18px;
  border: 1px solid #2a3947;
  border-top: 3px solid #58dce5;
  border-radius: 6px;
  background: #0d1721;
}
.status-effect-primer article:nth-child(2) { border-top-color: #e8b558; }
.status-effect-primer article:nth-child(3) { border-top-color: #9d7bea; }
.status-effect-primer article:nth-child(4) { border-top-color: #56d49b; }
.effect-symbol {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  margin-bottom: 14px;
  border: 1px solid #42626e;
  border-radius: 5px;
  color: #6ce1e9;
  background: #10242d;
  font-weight: 900;
}
.status-effect-primer strong { display: block; color: #edf5f9; font-size: .92rem; }
.status-effect-primer article p { margin: 7px 0 0; color: #91a5b3; font-size: .75rem; line-height: 1.5; }
.status-effect-browser header label,
.champion-effect-directory header label {
  display: grid;
  flex: 0 0 min(340px, 100%);
  gap: 6px;
}
.status-effect-browser label span,
.champion-effect-directory label span {
  color: #6edee7;
  font-size: .66rem;
  font-weight: 900;
  text-transform: uppercase;
}
.status-effect-browser input,
.champion-effect-directory input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid #344858;
  border-radius: 6px;
  color: #f1f7fa;
  background: #0d1721;
}
.status-effect-filters {
  display: flex;
  gap: 7px;
  margin-bottom: 15px;
  padding-bottom: 5px;
  overflow-x: auto;
}
.status-effect-filters button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid #334552;
  border-radius: 999px;
  color: #a8bbc7;
  background: #101923;
  font-size: .68rem;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}
.status-effect-filters button[aria-pressed="true"] {
  border-color: #55dce7;
  color: #eafdff;
  background: #12323a;
}
.status-effect-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.status-effect-grid > article {
  min-width: 0;
  padding: 18px;
  border: 1px solid #2b3b48;
  border-left: 3px solid #54dce6;
  border-radius: 6px;
  background: #0d1721;
}
.status-effect-grid > article.is-selected {
  border-color: #e9ba63;
  box-shadow: 0 0 0 2px rgba(233, 186, 99, .15);
}
.status-effect-grid article > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.status-effect-grid article > header span {
  color: #64dce5;
  font-size: .62rem;
  font-weight: 900;
  text-transform: uppercase;
}
.status-effect-grid article > header b { color: #738a9b; font-size: .65rem; }
.status-effect-grid h3 { margin: 10px 0 7px; color: #f1f7fa; font-size: 1.15rem; }
.status-effect-grid article > p { min-height: 54px; margin: 0 0 14px; color: #93a7b5; font-size: .75rem; line-height: 1.5; }
.status-effect-champions,
.status-effect-all:not([hidden]) {
  display: grid;
  gap: 5px;
}
.status-effect-all[hidden] { display: none !important; }
.status-effect-champions a,
.status-effect-all a,
.status-effect-dialog-list a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 44px;
  padding: 5px;
  border-radius: 4px;
  color: #e7f1f6;
  background: #111e29;
  text-decoration: none;
}
.status-effect-champions a:is(:hover, :focus-visible),
.status-effect-all a:is(:hover, :focus-visible),
.status-effect-dialog-list a:is(:hover, :focus-visible) { background: #172936; }
.status-effect-champions img,
.status-effect-all img,
.status-effect-dialog-list img,
.champion-effect-heading img {
  object-fit: cover;
  border: 1px solid #435663;
  border-radius: 4px;
}
.status-effect-champions span,
.status-effect-all span,
.status-effect-dialog-list span { min-width: 0; }
.status-effect-champions strong,
.status-effect-champions small,
.status-effect-all strong,
.status-effect-all small,
.status-effect-dialog-list strong,
.status-effect-dialog-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-effect-champions strong,
.status-effect-all strong,
.status-effect-dialog-list strong { font-size: .73rem; }
.status-effect-champions small,
.status-effect-all small,
.status-effect-dialog-list small { margin-top: 2px; color: #8298a8; font-size: .62rem; }
.status-effect-grid article > button {
  width: 100%;
  min-height: 40px;
  margin-top: 11px;
  padding-inline: 12px;
  border-color: #3e6675;
  color: #b9f5f8;
  font-size: .68rem;
}
.status-effect-grid article > button::after {
  content: "↗";
  margin-left: 7px;
  font-size: .8rem;
}
.status-effect-all { margin-top: 5px; }
.status-effect-dialog {
  width: min(900px, calc(100vw - 32px));
  max-width: none;
  max-height: min(780px, calc(100dvh - 32px));
  padding: 0;
  border: 1px solid #416170;
  border-radius: 7px;
  overflow: hidden;
  color: #edf6fa;
  background: #0a121a;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .62);
}
.status-effect-dialog:not([open]) { display: none; }
.status-effect-dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.status-effect-dialog::backdrop { background: rgba(2, 7, 12, .82); }
.status-effect-dialog > header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border-bottom: 1px solid #293b47;
  background: #0d1923;
}
.status-effect-dialog > header span {
  color: #5de0e9;
  font-size: .64rem;
  font-weight: 900;
  text-transform: uppercase;
}
.status-effect-dialog > header h2 {
  margin: 5px 0 4px;
  color: #f4f8fa;
  font-size: 1.45rem;
}
.status-effect-dialog > header p {
  max-width: 680px;
  margin: 0;
  color: #91a7b4;
  font-size: .76rem;
  line-height: 1.5;
}
.status-effect-dialog > header button {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #415563;
  border-radius: 50%;
  color: #dceaf0;
  background: #15212b;
  font-size: 1.55rem;
  line-height: 1;
}
.status-effect-dialog-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 7px;
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #4cced8 #0b151e;
  scrollbar-width: thin;
}
.champion-effect-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.champion-effect-grid > article {
  min-width: 0;
  border: 1px solid #2b3b48;
  border-radius: 6px;
  overflow: hidden;
  background: #0d1721;
}
.champion-effect-grid > article.is-selected { border-color: #58dce6; }
.champion-effect-heading {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  color: #edf7fa;
  background: #111e29;
  text-decoration: none;
}
.champion-effect-heading span { min-width: 0; }
.champion-effect-heading strong,
.champion-effect-heading small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.champion-effect-heading strong { font-size: .85rem; }
.champion-effect-heading small { margin-top: 3px; color: #8499a8; font-size: .65rem; }
.champion-effect-heading > b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #42616f;
  border-radius: 5px;
  color: #70e1e9;
  font-size: .7rem;
}
.champion-effect-grid article > div {
  display: grid;
  gap: 5px;
  padding: 9px;
}
.champion-effect-grid article > div > a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px;
  border-radius: 4px;
  color: #e8f2f6;
  background: #101b25;
  text-decoration: none;
}
.champion-effect-grid article > div > a > b {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #4a6470;
  border-radius: 4px;
  color: #67dce5;
  font-size: .66rem;
}
.champion-effect-grid article > div span { min-width: 0; }
.champion-effect-grid article > div strong,
.champion-effect-grid article > div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.champion-effect-grid article > div strong { font-size: .7rem; }
.champion-effect-grid article > div small { color: #7f94a3; font-size: .6rem; }
.champion-effect-grid article > div > p { margin: 5px; color: #8196a5; font-size: .67rem; line-height: 1.45; }
.status-effects-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  margin: 26px 0 10px;
  padding: 20px;
  border: 1px solid #3b4652;
  border-left: 3px solid #e8b55d;
  border-radius: 6px;
  background: #121821;
}
.status-effects-note strong { color: #f0c778; white-space: nowrap; }
.status-effects-note p { margin: 0; color: #9eafba; font-size: .78rem; line-height: 1.55; }
.status-effect-empty { padding: 22px; color: #9aaebb; text-align: center; }
.champion-status-summary {
  margin: 18px 0 28px;
  padding: 22px;
  border: 1px solid #2d4050;
  border-left: 3px solid #55dce7;
  border-radius: 6px;
  background: #0d1721;
}
.champion-status-summary > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding-bottom: 15px;
  border-bottom: 1px solid #283743;
}
.champion-status-summary h2 { margin: 3px 0 5px; color: #f2f7fa; font-size: clamp(1.45rem, 3vw, 2.2rem); }
.champion-status-summary header p:last-child { margin: 0; color: #91a6b4; font-size: .77rem; line-height: 1.5; }
.champion-status-summary header > a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 0 13px;
  border: 1px solid #426b77;
  border-radius: 999px;
  color: #e3fbfd;
  background: #12303a;
  font-size: .69rem;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}
.champion-status-summary > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.champion-status-summary > div > a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 70px;
  padding: 10px;
  border: 1px solid #2a3a47;
  border-radius: 5px;
  color: #ecf6f9;
  background: #111e29;
  text-decoration: none;
}
.champion-status-summary > div > a:is(:hover, :focus-visible) { border-color: #55dce7; background: #162a36; }
.champion-status-summary > div > a > b {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #4a6570;
  border-radius: 5px;
  color: #6be1e9;
  background: #102630;
  font-size: .72rem;
}
.champion-status-summary > div span { min-width: 0; }
.champion-status-summary > div small,
.champion-status-summary > div strong,
.champion-status-summary > div em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.champion-status-summary > div small { color: #718a9b; font-size: .57rem; font-style: normal; font-weight: 900; text-transform: uppercase; }
.champion-status-summary > div strong { margin-top: 2px; font-size: .75rem; }
.champion-status-summary > div em { margin-top: 2px; color: #8da1af; font-size: .61rem; font-style: normal; }
.champion-status-summary > div > p { grid-column: 1 / -1; margin: 0; color: #8ba0ae; }

@media (max-width: 1050px) {
  .league-home-command { grid-template-columns: 1fr; }
  .league-home-release { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .league-home-release > div { border-right: 1px solid #24313c; border-bottom: 0; }
  .league-home-reference-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .league-home-reference-strip > span { grid-column: 1 / -1; min-height: 58px; }
  .status-effect-grid { grid-template-columns: 1fr 1fr; }
  .champion-effect-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .league-home-command-grid { grid-template-columns: 1fr; }
  .league-home-command-grid > a { min-height: 150px; }
  .league-home-release { grid-template-columns: 1fr; }
  .league-home-release > div { border-right: 0; border-bottom: 1px solid #24313c; }
  .league-home-reference-strip { grid-template-columns: 1fr 1fr; }
  .league-home-reference-strip > span { grid-column: 1 / -1; }
  .league-tool-grid { grid-template-columns: 1fr 1fr; }
  .status-effects-hero { grid-template-columns: 1fr; padding: 32px; }
  .status-effects-hero aside { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .status-effects-hero aside article { display: grid; justify-content: start; border-right: 1px solid rgba(117, 148, 171, .18); border-bottom: 0; }
  .status-effect-primer > div { grid-template-columns: 1fr 1fr; }
  .champion-effect-grid { grid-template-columns: 1fr 1fr; }
  .champion-status-summary > div { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 590px) {
  .league-home-command { padding: 17px; }
  .league-home-reference-strip { grid-template-columns: 1fr; }
  .league-home-reference-strip > span { grid-column: auto; }
  .league-tool-grid { grid-template-columns: 1fr; }
  .status-effects-hero { min-height: 0; padding: 27px 20px; }
  .status-effects-hero h1 { font-size: 2.75rem; }
  .status-effects-hero aside { grid-template-columns: 1fr; }
  .status-effects-hero aside article { display: flex; border-right: 0; border-bottom: 1px solid rgba(117, 148, 171, .18); }
  .status-effect-primer > header,
  .status-effect-browser > header,
  .champion-effect-directory > header { align-items: stretch; flex-direction: column; }
  .status-effect-primer > div,
  .status-effect-grid,
  .champion-effect-grid { grid-template-columns: 1fr; }
  .status-effect-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }
  .status-effect-dialog > header { padding: 17px; }
  .status-effect-dialog-list {
    grid-template-columns: 1fr;
    padding: 11px;
  }
  .status-effect-primer article { min-height: 0; }
  .status-effects-note { grid-template-columns: 1fr; gap: 7px; }
  .champion-status-summary > header { align-items: stretch; flex-direction: column; }
  .champion-status-summary header > a { width: fit-content; }
  .champion-status-summary > div { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .league-home-status { grid-template-columns: 1fr; }
  .league-home-shortcuts { grid-template-columns: 1fr 1fr; }
  .league-home-paths { grid-template-columns: 1fr; }
  .lookup-shell { grid-template-columns: minmax(0, 1fr); }
  .lookup-pending-panel,
  .lookup-shell > .status {
    grid-column: 1;
    min-width: 0;
  }
}
@media (max-width: 560px) {
  .league-home-status > a {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 12px;
  }
  .league-home-status b { display: none; }
  .league-home-shortcuts { grid-template-columns: 1fr; }
  .league-home-shortcuts a { min-height: 76px; }
  .league-home-paths { gap: 18px; padding: 22px 0; }
  .league-home-paths article {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .league-home-paths article a {
    grid-column: 2;
    width: fit-content;
  }
  .lookup-pending-panel { padding: 18px; }
  .league-hero { margin-inline: 0; }
}

/* v107: crawl paths, page landmarks and a stronger finishing layer. */
.league-breadcrumbs {
  display: flex;
  min-height: 40px;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid rgba(151, 171, 212, .16);
  border-left: 3px solid rgba(72, 219, 233, .72);
  border-radius: 7px;
  color: #71879a;
  background: rgba(8, 15, 23, .78);
  font-size: .76rem;
}
.league-breadcrumbs a {
  color: #9fc0cf;
  font-weight: 800;
  text-decoration: none;
}
.league-breadcrumbs a:is(:hover, :focus-visible) { color: #e8fdff; }
.league-breadcrumbs span { color: #506778; }
.league-breadcrumbs strong { color: #d8e8f0; font-weight: 900; }

main h1,
main h2,
main h3 { text-wrap: balance; }
main section[id],
main h2[id],
main h3[id] { scroll-margin-top: 92px; }
main a:focus-visible,
main button:focus-visible,
footer a:focus-visible {
  outline: 2px solid #69e5ee;
  outline-offset: 3px;
}

/* v112: fast, legible Draft workspace controls. */
.draft-page {
  --draft-blue: #55dce8;
  --draft-red: #ff6685;
  --draft-gold: #edbd61;
  --draft-green: #5de0a7;
}
.draft-hero {
  border: 1px solid rgba(85, 220, 232, .2);
  border-bottom: 4px solid var(--draft-blue);
  background: linear-gradient(102deg, rgba(4, 10, 17, .98) 12%, rgba(7, 23, 31, .9) 58%, rgba(9, 13, 25, .76)), url('/league/champion/vex/splash.jpg') center 30%/cover;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .24);
}
.draft-hero > div { min-width: 0; }
.draft-hero aside {
  min-width: 0;
  border-color: rgba(237, 189, 97, .3);
  border-top: 3px solid var(--draft-gold);
  background: rgba(4, 11, 18, .94);
}
.draft-hero aside b {
  display: block;
  margin-top: 12px;
  color: #f5d995;
  font-size: .7rem;
  text-transform: uppercase;
}
.draft-hero-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.draft-hero-badges span {
  display: inline-flex !important;
  gap: 6px;
  align-items: center;
  min-height: 29px;
  padding: 5px 9px;
  border: 1px solid rgba(85, 220, 232, .2);
  border-radius: 999px;
  color: #bceff3 !important;
  background: rgba(85, 220, 232, .07);
  font-size: .62rem !important;
}
.draft-toolbar {
  border-color: rgba(85, 220, 232, .2);
  background: linear-gradient(100deg, rgba(85, 220, 232, .06), #09121c 36%);
}
.draft-toolbar-title { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 11px; align-items: center; }
.draft-toolbar-title > i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(85, 220, 232, .35);
  border-radius: 6px;
  color: var(--draft-blue);
  background: rgba(85, 220, 232, .09);
  font-size: 1.05rem;
}
.draft-toolbar-title span { min-width: 0; }
.draft-toolbar-title small { display: block; margin-top: 3px; color: #8398aa; font-size: .7rem; }
.draft-toolbar button { display: inline-flex; gap: 7px; align-items: center; justify-content: center; white-space: nowrap; }
.draft-view-switch button[aria-pressed="true"] { box-shadow: inset 0 -3px var(--draft-blue); }
.draft-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(145, 167, 194, .18);
  border-radius: 7px;
  background: #08111a;
  list-style: none;
}
.draft-flow li {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-width: 0;
  padding: 13px 15px;
  border-right: 1px solid rgba(145, 167, 194, .15);
}
.draft-flow li:last-child { border-right: 0; }
.draft-flow li.is-current { background: linear-gradient(110deg, rgba(85, 220, 232, .12), rgba(85, 220, 232, .025)); }
.draft-flow span,
.draft-flow strong,
.draft-flow small { display: block; min-width: 0; }
.draft-flow strong { color: #edf8fb; font-size: .8rem; }
.draft-flow small { margin-top: 3px; color: #8096a8; font-size: .67rem; line-height: 1.35; }
.draft-inference {
  grid-template-columns: minmax(240px, .54fr) minmax(560px, 1.46fr);
  padding: 22px;
  border-color: rgba(237, 189, 97, .34);
  border-left-width: 5px;
  background: linear-gradient(105deg, rgba(237, 189, 97, .08), #0a131d 43%, rgba(85, 220, 232, .035));
}
.draft-inference-intro strong { color: #f0d89c; }
.draft-inference-control { grid-template-columns: 148px minmax(210px, 1fr) 142px auto; gap: 9px; }
.draft-control { min-width: 0; }
.draft-inference-control .draft-control > span {
  display: flex;
  gap: 6px;
  align-items: center;
  color: #b9c9d6;
}
.draft-inference-control .draft-control > span i { color: var(--draft-blue); }
.draft-inference-control .is-side > span i { color: var(--draft-red); }
.draft-inference-control .is-lane > span i { color: var(--draft-gold); }
.draft-inference-control input,
.draft-inference-control select,
.draft-recommendations select,
.draft-move-control select,
.draft-ban-add input {
  border-color: rgba(145, 167, 194, .34);
  color: #eef8fc;
  background-color: #050b12;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}
.draft-inference-control select,
.draft-recommendations select,
.draft-move-control select {
  padding-right: 34px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #8fa8ba 50%), linear-gradient(135deg, #8fa8ba 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.draft-inference-control input:is(:hover, :focus),
.draft-inference-control select:is(:hover, :focus),
.draft-recommendations select:is(:hover, :focus),
.draft-ban-add input:is(:hover, :focus),
.draft-move-control select:is(:hover, :focus) {
  outline: 0;
  border-color: var(--draft-blue);
  box-shadow: 0 0 0 3px rgba(85, 220, 232, .11);
}
.draft-inference-control .is-side select { border-left: 3px solid var(--draft-red); }
.draft-inference-control .is-champion input { border-left: 3px solid var(--draft-blue); }
.draft-inference-control .is-lane select { border-left: 3px solid var(--draft-gold); }
.draft-inference-control > button {
  gap: 7px;
  min-height: 44px;
  border-radius: 6px;
  color: #061116;
  background: var(--draft-blue);
  box-shadow: 0 8px 22px rgba(85, 220, 232, .14);
}
.draft-inference-control > button:is(:hover, :focus-visible) { color: #041014; background: #82f0f5; transform: translateY(-1px); }
.draft-inference output { border-color: rgba(237, 189, 97, .28); background: rgba(3, 8, 13, .46); }
.draft-inference output > i { flex: 0 0 auto; color: var(--draft-gold); font-size: 1rem; }
.draft-side { overflow: clip; box-shadow: 0 12px 28px rgba(0, 0, 0, .14); }
.draft-side.is-ally { border-color: rgba(85, 220, 232, .3); border-top-width: 4px; }
.draft-side.is-enemy { border-color: rgba(255, 102, 133, .3); border-top-width: 4px; }
.draft-side.is-ally > header { background: linear-gradient(100deg, rgba(85, 220, 232, .11), rgba(8, 17, 27, .96) 52%); }
.draft-side.is-enemy > header { background: linear-gradient(100deg, rgba(255, 102, 133, .1), rgba(8, 17, 27, .96) 52%); }
.draft-side > header b { border: 1px solid rgba(85, 220, 232, .25); border-radius: 6px; }
.draft-side.is-enemy > header b { border-color: rgba(255, 102, 133, .25); }
.draft-role-pick { min-height: 76px; padding-block: 12px; }
.draft-role-pick:nth-child(even) { background: rgba(145, 167, 194, .018); }
.draft-role-label { grid-template-columns: 18px minmax(0, 1fr); gap: 4px; text-align: center; }
.draft-role-label i { color: #667f92; }
.draft-side.is-ally .draft-role-pick.has-pick .draft-role-label i { color: var(--draft-blue); }
.draft-side.is-enemy .draft-role-pick.has-pick .draft-role-label i { color: var(--draft-red); }
.draft-pick-input { transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
.draft-pick-input:focus-within { border-color: var(--draft-blue); box-shadow: 0 0 0 3px rgba(85, 220, 232, .1); background: #07121c; }
.draft-side.is-enemy .draft-pick-input:focus-within { border-color: var(--draft-red); box-shadow: 0 0 0 3px rgba(255, 102, 133, .09); }
.draft-pick-input button { display: grid; place-items: center; }
.draft-recommendations > header label { position: relative; }
.draft-recommendations > header select { min-height: 44px; border-left: 3px solid var(--draft-green); }
.draft-overview article { min-height: 104px; box-shadow: 0 9px 22px rgba(0, 0, 0, .1); }

@media (max-width: 900px) {
  .draft-inference { grid-template-columns: 1fr; }
  .draft-inference-control { grid-template-columns: 138px minmax(180px, 1fr) 136px auto; }
}
@media (max-width: 760px) {
  .draft-flow { grid-template-columns: 1fr; }
  .draft-flow li { border-right: 0; border-bottom: 1px solid rgba(145, 167, 194, .15); }
  .draft-flow li:last-child { border-bottom: 0; }
  .draft-inference-control { grid-template-columns: 1fr 1fr; }
  .draft-inference-control .draft-quick-champion { grid-column: 1 / -1; grid-row: 1; }
  .draft-inference-control > button { align-self: end; }
}
@media (max-width: 460px) {
  .draft-toolbar-title { grid-template-columns: 38px minmax(0, 1fr); }
  .draft-toolbar-title > i { width: 38px; height: 38px; }
  .draft-toolbar-group > div { flex-wrap: wrap; }
  .draft-toolbar button { min-width: calc(50% - 3px); }
  .draft-inference { padding: 17px 14px; }
  .draft-inference-control { grid-template-columns: 1fr; }
  .draft-inference-control .draft-quick-champion { grid-column: auto; grid-row: auto; }
  .draft-inference-control > button { width: 100%; }
  .draft-role-pick { grid-template-columns: 54px minmax(0, 1fr); }
  .draft-role-pick > small { grid-column: 2; }
  .draft-move-control { grid-column: 2; grid-row: auto; justify-content: stretch; }
  .draft-move-control label,
  .draft-move-control select { width: 100%; }
  .draft-picker-menu { top: 66px; left: 8px; }
}

.league-hero,
.guide-hero,
.counter-hero,
.draft-hero,
.teams-hero,
.champion-detail-hero,
.champion-directory-hero {
  box-shadow: 0 18px 46px rgba(0, 0, 0, .2);
}
.league-page-jumps {
  min-height: 52px;
  padding: 9px 12px;
  border-color: rgba(151, 171, 212, .2);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .1);
}
.league-page-jumps span { font-size: .68rem; }
.league-page-jumps a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding-inline: 11px;
  font-size: .72rem;
}

.counter-method,
.counter-lane-warning,
.counter-card,
.counter-build,
.counter-reciprocal,
.counter-empty { border-radius: 7px; }
.counter-grid { gap: 16px; }
.counter-card {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.counter-card:hover {
  border-color: rgba(72, 219, 233, .34);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .22);
  transform: translateY(-2px);
}

/* v113: clearer counter question and opponent controls. */
.counter-hero .hero-copy { max-width: 800px; }
.counter-hero .hero-copy h1 { max-width: 18ch; }
.counter-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.counter-hero-badges span {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 11px;
  border: 1px solid rgba(100, 228, 238, .35); border-radius: 6px; background: rgba(4, 14, 23, .78);
  color: #d8f8fb; font-size: .76rem; font-weight: 800;
}
.counter-hero-badges span:last-child { border-color: rgba(113, 221, 157, .36); color: #c8f7d8; }
.counter-picker { display: block; padding: 0; overflow: visible; border-top: 4px solid #5adce7; background: #08111c; }
.counter-picker-intro {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 16px 18px; border-bottom: 1px solid rgba(141, 170, 193, .18);
  background: linear-gradient(100deg, rgba(90, 220, 231, .1), rgba(8, 17, 28, .96) 58%);
}
.counter-picker-intro > i { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(90, 220, 231, .35); border-radius: 6px; color: #65e5ee; font-size: 1.2rem; }
.counter-picker-intro span, .counter-picker-intro strong, .counter-picker-intro small { display: block; }
.counter-picker-intro span { color: #63e4ed; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.counter-picker-intro strong { margin-top: 2px; color: #f3f8fb; font-size: .95rem; }
.counter-picker-intro small { margin-top: 3px; color: #8fa4b5; font-size: .72rem; }
.counter-picker-controls { display: grid; grid-template-columns: minmax(260px, 1.4fr) minmax(190px, .75fr) auto; gap: 12px; align-items: end; min-width: 0; padding: 18px; }
.counter-picker-controls label > span, .counter-picker-controls .champion-field > label > span { display: flex; align-items: center; gap: 7px; color: #eef8fa; font-size: .76rem; font-weight: 900; }
.counter-picker-controls label > span i { color: #f0bd61; }
.counter-picker-controls .champion-field > label > span i { color: #ff718f; }
.counter-picker-controls label > small, .counter-picker-controls .champion-field > label > small { display: block; min-height: 18px; margin: 3px 0 7px; color: #8298aa; font-size: .67rem; }
.counter-picker-controls .champion-input-shell { border-left: 3px solid #ff718f; }
.counter-picker-controls .counter-role { position: relative; min-width: 0; }
.counter-picker-controls .counter-role select {
  width: 100%; min-height: 52px; padding: 0 42px 0 13px; border: 1px solid rgba(240, 189, 97, .32); border-left: 3px solid #f0bd61;
  border-radius: 6px; background: #050c14; color: #eff7fa; font: inherit; font-weight: 800;
}
.counter-picker-controls > button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 18px; border: 0; border-radius: 6px; background: #5adce7; color: #041015; font-weight: 900; white-space: nowrap; }
.counter-picker-controls > button:hover, .counter-picker-controls > button:focus-visible { background: #82eff5; transform: translateY(-1px); }
.counter-picker-status { display: flex; align-items: center; gap: 7px; margin: 0; padding: 11px 18px; border-top: 1px solid rgba(141, 170, 193, .14); background: rgba(1, 7, 12, .5); color: #94a9b9; font-size: .72rem; }
.counter-picker-status i { color: #5adce7; }
.counter-scope { gap: 10px; }
.counter-scope a { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 76px; padding: 12px 14px; }
.counter-scope a > i { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(141, 170, 193, .25); border-radius: 6px; color: #91a6b7; }
.counter-scope a[aria-current="page"] > i { border-color: rgba(90, 220, 231, .5); background: rgba(90, 220, 231, .12); color: #68e8ef; }
.counter-scope a span, .counter-scope a strong, .counter-scope a small { display: block; min-width: 0; }
.counter-scope a small { margin-top: 3px; color: #8499aa; line-height: 1.35; }
@media (max-width: 760px) {
  .counter-picker-controls { grid-template-columns: 1fr; padding: 15px 13px; }
  .counter-picker-controls > button { width: 100%; }
  .counter-scope { grid-template-columns: 1fr; }
  .counter-hero .hero-copy h1 { max-width: 100%; }
}
.counter-method { padding: 14px 16px; font-size: .84rem; }

.champion-directory a {
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.champion-directory a:is(:hover, :focus-visible) {
  box-shadow: 0 12px 26px rgba(0, 0, 0, .2);
  transform: translateY(-1px);
}
.champion-directory a strong { font-size: .86rem; }
.champion-directory a small { font-size: .69rem; line-height: 1.4; }

.next-work {
  padding: 30px 22px;
  border: 1px solid rgba(151, 171, 212, .16);
  border-left: 4px solid #d6a93f;
  border-radius: 7px;
  background: linear-gradient(100deg, rgba(214, 169, 63, .06), rgba(9, 17, 25, .72) 52%);
}
.next-work h2 { font-size: clamp(1.45rem, 3vw, 2.15rem); }

footer {
  border-top-color: rgba(151, 171, 212, .22);
  background: #050a0f;
}
footer > p,
.footer-links { width: min(1220px, calc(100% - 32px)); }
.footer-links { gap: 7px; }
.footer-links a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid rgba(151, 171, 212, .15);
  border-radius: 999px;
  background: rgba(151, 171, 212, .04);
}
.footer-links a:is(:hover, :focus-visible) {
  border-color: rgba(72, 219, 233, .45);
  color: #e8fdff;
  background: rgba(72, 219, 233, .08);
}
footer > p { max-width: 1220px; line-height: 1.6; }

@media (max-width: 760px) {
  .league-breadcrumbs {
    margin-bottom: 9px;
    padding: 7px 10px;
    font-size: .72rem;
  }
  .league-page-jumps { align-items: stretch; }
  .league-page-jumps a { justify-content: center; }
  .next-work { align-items: flex-start; padding: 24px 18px; }
  .footer-links { gap: 6px; }
  .footer-links a { min-height: 32px; font-size: .72rem; }
}

/* Dragon and objective reference */
.objectives-page main { width: min(1220px, calc(100% - 32px)); margin: 24px auto 70px; }
.objectives-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
  gap: 30px;
  align-items: end;
  min-height: 360px;
  padding: 44px;
  border: 1px solid rgba(64, 218, 231, .25);
  border-bottom: 3px solid #49dce8;
  border-radius: 8px;
  background: linear-gradient(105deg, rgba(4, 10, 17, .97), rgba(11, 25, 33, .9) 54%, rgba(10, 16, 25, .58)), url('/league/champion/shyvana/splash.jpg') 68% 26% / cover;
}
.objectives-hero h1 { max-width: 800px; margin: 6px 0 12px; color: #f8fbff; font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: .96; }
.objectives-hero > div > p:last-of-type { max-width: 720px; color: #c2d0da; font-size: 1.02rem; line-height: 1.62; }
.objectives-hero .objective-path { display: grid; grid-template-columns: 1fr; gap: 0; padding: 18px; border: 1px solid rgba(225, 177, 67, .38); border-left: 4px solid #dfad43; border-radius: 7px; background: rgba(6, 10, 16, .92); }
.objective-path > div { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 11px; align-items: center; }
.objective-path-label {
  margin-bottom: 10px;
  color: #eacb86;
  font-size: .62rem;
  font-weight: 950;
  text-transform: uppercase;
}
.objective-path > div > b { display: grid; place-items: center; width: 40px; height: 40px; margin: 0; border: 1px solid rgba(225, 177, 67, .55); border-radius: 50%; color: #ffe7a5; background: #271d0b; font-size: .78rem; }
.objective-path > div:last-child > b { border-color: rgba(84, 220, 232, .55); color: #a4f6fb; background: #0b2930; }
.objective-path span, .objective-path strong { display: block; }
.objective-path strong { margin-bottom: 2px; color: #f7f2e4; font-size: .84rem; }
.objective-path span { color: #9eafbb; font-size: .72rem; line-height: 1.35; }
.objective-path > i { width: 1px; height: 14px; margin-left: 20px; background: linear-gradient(#d6a94b, #51d9e4); }
.objectives-hero-actions, .objectives-jumps, .dragon-lens > div { display: flex; flex-wrap: wrap; gap: 9px; }
.objectives-hero-actions { margin-top: 22px; }
.objectives-hero-actions a, .objectives-jumps a, .objective-boundary a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(70, 221, 233, .45);
  border-radius: 999px;
  color: #e8fdff;
  background: #0b2b34;
  font-weight: 850;
  text-decoration: none;
}
.objectives-hero-actions a:last-child { border-color: rgba(225, 177, 67, .5); color: #ffe7a5; background: #281e0d; }
.objectives-jumps { align-items: center; margin: 18px 0 26px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 7px; background: #0c141d; }
.objectives-jumps > span { margin-right: 4px; color: #8095a5; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.objectives-jumps a { min-height: 34px; padding: 0 13px; font-size: .76rem; }
.dragon-lens, .dragon-section, .soul-elder, .contest-check, .objective-boundary { margin: 26px 0; }
.dragon-lens, .contest-check, .objective-boundary { padding: 28px; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; background: #0b121a; }
.dragon-lens > header { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.dragon-lens h2, .dragon-section h2, .contest-check h2 { margin: 3px 0 8px; }
.dragon-lens > header > p { max-width: 560px; margin: 0; color: #99adbb; line-height: 1.5; }
.dragon-lens > div { margin-top: 20px; }
.dragon-lens button {
  --lens: #55dce7;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--lens) 48%, #263541);
  border-radius: 5px;
  color: color-mix(in srgb, var(--lens) 72%, #d8e2e8);
  background: color-mix(in srgb, var(--lens) 7%, #0b141d);
  box-shadow: inset 0 -2px color-mix(in srgb, var(--lens) 9%, transparent);
  font: inherit;
  font-size: .71rem;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}
.dragon-lens button[data-dragon-lens="damage"] { --lens: #ef765b; }
.dragon-lens button[data-dragon-lens="durability"] { --lens: #d8ad59; }
.dragon-lens button[data-dragon-lens="sustain"] { --lens: #58cdaa; }
.dragon-lens button[data-dragon-lens="ultimate"] { --lens: #82cdea; }
.dragon-lens button[data-dragon-lens="tempo"] { --lens: #9b86ee; }
.dragon-lens button:is(:hover, :focus-visible) { border-color: var(--lens); color: #fff; background: color-mix(in srgb, var(--lens) 13%, #0b141d); }
.dragon-lens button.active {
  border-color: var(--lens);
  color: #f7fdff;
  background: color-mix(in srgb, var(--lens) 20%, #0a141c);
  box-shadow: inset 0 -3px color-mix(in srgb, var(--lens) 28%, transparent), 0 0 0 2px color-mix(in srgb, var(--lens) 13%, transparent);
}
.dragon-lens button.active::before {
  content: "✓";
  display: inline-grid;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--lens) 70%, white);
  border-radius: 3px;
  color: #fff;
  background: color-mix(in srgb, var(--lens) 25%, #081018);
  font-size: .68rem;
  line-height: 1;
}
.dragon-lens-result { display: flex; align-items: center; gap: 10px; min-height: 42px; margin: 16px 0 0; padding: 10px 13px; border-left: 3px solid #55dce7; color: #9fb1be; background: #071018; font-size: .78rem; }
.dragon-lens-result strong { flex: 0 0 auto; color: #eafcff; }
.dragon-section { scroll-margin-top: 86px; }
.dragon-section > .section-heading { display: grid; grid-template-columns: minmax(250px, .42fr) minmax(0, .58fr); gap: 28px; align-items: end; margin-bottom: 18px; }
.dragon-section > .section-heading h2 { margin-bottom: 0; }
.dragon-section > .section-heading > p:last-child { color: #9dafbd; line-height: 1.55; }
.dragon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dragon-card { --dragon: #58dce8; min-width: 0; scroll-margin-top: 90px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-top: 3px solid var(--dragon); border-radius: 8px; background: linear-gradient(150deg, color-mix(in srgb, var(--dragon) 10%, #0d151f), #0c131c 52%); transition: opacity .2s ease, transform .2s ease, border-color .2s ease; }
.dragon-card.is-infernal { --dragon: #ef6b4a; }.dragon-card.is-mountain { --dragon: #d2a451; }.dragon-card.is-ocean { --dragon: #4cc9ad; }
.dragon-card.is-cloud { --dragon: #8cd7ef; }.dragon-card.is-hextech { --dragon: #8b78f0; }.dragon-card.is-chemtech { --dragon: #9ac653; }
.dragon-card.is-muted { opacity: .32; }.dragon-card.is-match { transform: translateY(-3px); border-color: var(--dragon); }
.dragon-card > header { display: grid; grid-template-columns: 62px minmax(0, 1fr) 78px; gap: 13px; align-items: center; padding: 17px; border-bottom: 1px solid rgba(255,255,255,.08); }
.dragon-mark { display: grid; place-items: center; align-content: center; width: 58px; height: 58px; border: 1px solid color-mix(in srgb, var(--dragon) 70%, transparent); border-radius: 50%; color: var(--dragon); background: color-mix(in srgb, var(--dragon) 12%, #070c12); }
.dragon-mark > b { font-size: 1.28rem; line-height: 1; }
.dragon-mark > small { margin-top: 3px; color: var(--dragon); font-size: .48rem; font-weight: 950; letter-spacing: .08em; }
.dragon-card header small { color: var(--dragon); font-size: .67rem; font-weight: 900; text-transform: uppercase; }
.dragon-card h3 { margin: 3px 0 0; color: #f5f9fc; font-size: 1.35rem; }
.dragon-kind-badge {
  display: inline-grid;
  min-width: 0;
  min-height: 32px;
  place-items: center;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--dragon) 60%, transparent);
  border-radius: 5px;
  color: var(--dragon);
  background: color-mix(in srgb, var(--dragon) 10%, #091018);
  font-size: .54rem;
  font-weight: 950;
  line-height: 1.15;
  text-transform: uppercase;
}
.dragon-card header > b:not(.dragon-kind-badge), .objective-number { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid color-mix(in srgb, var(--dragon) 60%, transparent); border-radius: 50%; color: var(--dragon); background: #091018; }
.dragon-reward { display: grid; gap: 4px; margin: 16px; padding: 14px; border-left: 4px solid var(--dragon); background: rgba(3, 7, 11, .42); }
.dragon-reward span, .dragon-card dt { color: var(--dragon); font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.dragon-reward strong { color: #f5fafc; }
.dragon-card dl { display: grid; gap: 0; margin: 0; padding: 0 16px 17px; }
.dragon-card dl > div { padding: 13px 0; border-top: 1px solid rgba(255,255,255,.07); }
.dragon-card dl > .dragon-strong { margin-inline: -8px; padding-inline: 8px; border-left: 3px solid #51d9a6; background: rgba(48, 167, 121, .06); }
.dragon-card dl > .dragon-limit { margin-inline: -8px; padding-inline: 8px; border-left: 3px solid #d39a55; background: rgba(185, 123, 54, .06); }
.dragon-card .dragon-strong dt { color: #71e5b7; }
.dragon-card .dragon-limit dt { color: #e6b576; }
.dragon-card dd { margin: 5px 0 0; color: #afbec9; font-size: .84rem; line-height: 1.55; }
.dragon-solo-guide {
  margin: 30px 0;
  overflow: hidden;
  scroll-margin-top: 90px;
  border: 1px solid rgba(75, 215, 225, .25);
  border-top: 3px solid #50d9e4;
  border-radius: 8px;
  background:
    radial-gradient(circle at 92% 0, rgba(98, 93, 224, .15), transparent 31%),
    linear-gradient(145deg, #091820, #0b121a 55%);
}
.dragon-solo-guide > header {
  display: grid;
  grid-template-columns: minmax(300px, .48fr) minmax(0, .52fr);
  gap: 30px;
  align-items: end;
  padding: 28px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.dragon-solo-guide h2 { margin: 4px 0 0; color: #f4fbfd; font-size: clamp(1.8rem, 4vw, 3.15rem); line-height: 1.02; }
.dragon-solo-guide > header > p { margin: 0; color: #a7bac4; line-height: 1.62; }
.dragon-solo-verdict {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  margin: 18px;
  padding: 20px;
  border: 1px solid rgba(83, 219, 229, .28);
  border-left: 4px solid #53dbe5;
  border-radius: 7px;
  background: linear-gradient(105deg, rgba(21, 91, 106, .26), rgba(20, 17, 55, .5));
}
.dragon-solo-icon { display: grid; width: 88px; height: 88px; place-items: center; border: 1px solid rgba(83, 219, 229, .45); border-radius: 7px; background: #071119; }
.dragon-solo-icon img { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 8px 15px rgba(56, 205, 191, .35)); }
.dragon-solo-verdict small, .dragon-solo-verdict strong { display: block; }
.dragon-solo-verdict small { color: #67dfe8; font-size: .67rem; font-weight: 950; text-transform: uppercase; }
.dragon-solo-verdict strong { margin-top: 5px; color: #f4fcfd; font-size: 1.25rem; }
.dragon-solo-verdict p { max-width: 760px; margin: 7px 0 0; color: #a8bbc5; font-size: .84rem; line-height: 1.55; }
.dragon-solo-verdict > b { min-width: 112px; padding: 11px 14px; border: 1px solid rgba(231, 182, 88, .45); border-radius: 999px; color: #ffe4a7; background: rgba(62, 42, 11, .7); font-size: .72rem; text-align: center; text-transform: uppercase; }
.dragon-role-solo-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin: 0 18px; background: rgba(107, 143, 158, .18); }
.dragon-role-solo-grid article { --role: #53dbe5; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 11px; align-content: start; min-width: 0; padding: 18px 14px; border-top: 3px solid var(--role); background: #0c151e; }
.dragon-role-solo-grid .is-jungle { --role: #65d5a4; }.dragon-role-solo-grid .is-bot { --role: #e3b45e; }.dragon-role-solo-grid .is-support { --role: #7ccbe9; }.dragon-role-solo-grid .is-mid { --role: #a88af2; }.dragon-role-solo-grid .is-top { --role: #e27b72; }
.dragon-role-solo-grid article > i { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid color-mix(in srgb, var(--role) 60%, transparent); border-radius: 6px; color: var(--role); background: color-mix(in srgb, var(--role) 10%, #091018); font-size: 1.05rem; }
.dragon-role-solo-grid span { color: var(--role); font-size: .64rem; font-weight: 950; text-transform: uppercase; }
.dragon-role-solo-grid h3 { margin: 4px 0 8px; color: #f0f7fa; font-size: .92rem; line-height: 1.25; }
.dragon-role-solo-grid p { margin: 0; color: #9eafb9; font-size: .74rem; line-height: 1.52; }
.dragon-role-solo-grid strong { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--role) 22%, transparent); color: color-mix(in srgb, var(--role) 78%, white); font-size: .68rem; line-height: 1.4; }
.dragon-solo-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px; }
.dragon-solo-checks > section { --check: #67dda9; overflow: hidden; border: 1px solid color-mix(in srgb, var(--check) 26%, transparent); border-left: 4px solid var(--check); border-radius: 7px; background: #0b151b; }
.dragon-solo-checks > .is-stop { --check: #e2a454; }
.dragon-solo-checks header { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 13px; align-items: center; padding: 16px 18px; border-bottom: 1px solid color-mix(in srgb, var(--check) 18%, transparent); background: color-mix(in srgb, var(--check) 6%, #0b151b); }
.dragon-solo-checks header > i { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid color-mix(in srgb, var(--check) 52%, transparent); border-radius: 6px; color: var(--check); font-size: 1.15rem; }
.dragon-solo-checks small { color: var(--check); font-size: .65rem; font-weight: 950; text-transform: uppercase; }
.dragon-solo-checks h3 { margin: 4px 0 0; color: #f1f8fa; font-size: 1.08rem; }
.dragon-solo-checks ul { display: grid; gap: 0; margin: 0; padding: 4px 18px 14px; list-style: none; }
.dragon-solo-checks li { position: relative; padding: 11px 8px 11px 25px; border-top: 1px solid rgba(255,255,255,.06); color: #a6b7c0; font-size: .78rem; line-height: 1.45; }
.dragon-solo-checks li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 8px; height: 8px; border: 2px solid var(--check); border-radius: 50%; }
.dragon-practice-note { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center; margin: 0 18px 20px; padding: 16px 18px; border: 1px solid rgba(166, 135, 238, .3); border-left: 4px solid #a687ee; border-radius: 7px; background: rgba(31, 24, 57, .62); }
.dragon-practice-note > i { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(166, 135, 238, .55); border-radius: 6px; color: #cab7ff; font-size: 1.2rem; }
.dragon-practice-note strong { color: #eee8ff; }.dragon-practice-note p { margin: 5px 0 0; color: #aba5bd; font-size: .78rem; line-height: 1.55; }
.soul-elder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; scroll-margin-top: 90px; }
.soul-elder article { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 17px; padding: 28px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: #101823; }
.soul-elder .soul-card { border-top: 3px solid #b28aff; background: linear-gradient(145deg, #18152b, #101823 56%); }
.soul-elder .elder-card { border-top: 3px solid #e6b85c; background: linear-gradient(145deg, #2a1c0d, #101823 56%); }
.soul-card .objective-number { color: #c4a8ff; border-color: #7459b3; }.elder-card .objective-number { color: #f1cd7b; border-color: #8f6d2d; }
.soul-elder h2 { margin: 3px 0 9px; }.soul-elder p { color: #b2c1cc; line-height: 1.55; }
.soul-elder strong { display: inline-block; margin-top: 8px; color: #fff0bd; }
.elder-guide {
  margin: 26px 0;
  overflow: hidden;
  border: 1px solid rgba(230, 184, 92, .3);
  border-radius: 8px;
  background: #0b121a;
  scroll-margin-top: 90px;
}
.elder-guide-heading {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 28px;
  border-bottom: 1px solid rgba(230, 184, 92, .22);
  background: linear-gradient(120deg, rgba(85, 48, 15, .72), rgba(22, 17, 31, .9) 58%, rgba(8, 18, 28, .96));
}
.elder-guide-art { display: grid; place-items: center; width: 112px; height: 112px; border: 1px solid rgba(241, 205, 123, .45); border-radius: 8px; background: rgba(14, 10, 5, .72); }
.elder-guide-art img { width: 98px; height: 98px; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(230, 184, 92, .3)); }
.elder-guide-heading h2 { margin: 4px 0 8px; color: #fff8e4; font-size: clamp(1.45rem, 2.2vw, 2rem); }
.elder-guide-heading p:last-child { max-width: 760px; margin: 0; color: #b9c4ca; line-height: 1.55; }
.elder-guide-heading > strong { display: grid; min-width: 150px; padding: 18px; border: 1px solid rgba(241, 205, 123, .42); border-radius: 7px; color: #fff0bd; background: rgba(38, 25, 8, .82); font-size: 1.28rem; text-align: center; }
.elder-guide-heading > strong small { margin-bottom: 5px; color: #d7b970; font-size: .66rem; text-transform: uppercase; }
.elder-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(230, 184, 92, .16); }
.elder-stat-grid article { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; min-width: 0; padding: 20px 18px; background: #0e1720; }
.elder-stat-grid i { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(230, 184, 92, .38); border-radius: 6px; color: #f1cd7b; background: rgba(65, 42, 12, .55); font-size: 1rem; }
.elder-stat-grid small, .elder-stat-grid strong { display: block; }.elder-stat-grid small { color: #c5a65c; font-size: .64rem; font-weight: 900; text-transform: uppercase; }
.elder-stat-grid strong { margin-top: 4px; color: #f7f1df; font-size: .96rem; line-height: 1.25; }.elder-stat-grid p { margin: 7px 0 0; color: #9fafb8; font-size: .76rem; line-height: 1.5; }
.elder-timing-grid, .elder-use-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 22px 22px 0; }
.elder-timing-grid article { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 15px; padding: 20px; border: 1px solid rgba(255,255,255,.09); border-left: 3px solid var(--elder-mode); border-radius: 7px; background: #111a24; }
.elder-timing-grid .is-standard { --elder-mode: #54dce7; }.elder-timing-grid .is-swift { --elder-mode: #b28aff; }
.elder-timing-grid .league-step-number { width: 46px; height: 46px; color: #061217; border-color: var(--elder-mode); background: var(--elder-mode); font-size: .9rem; }
.elder-timing-grid h3 { margin: 3px 0 7px; color: #eff7f9; font-size: 1.05rem; }.elder-timing-grid p:not(.eyebrow) { margin: 0; color: #a8b7c0; font-size: .8rem; line-height: 1.55; }
.elder-timing-grid strong { display: block; margin-top: 10px; color: color-mix(in srgb, var(--elder-mode) 72%, white); font-size: .76rem; }
.elder-use-grid article { --elder-use: #58d7a2; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-top: 3px solid var(--elder-use); border-radius: 7px; background: #101923; }
.elder-use-grid article:last-child { --elder-use: #f06f8d; }
.elder-use-grid header { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 13px; align-items: center; padding: 17px 18px 12px; }
.elder-use-grid header i { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid color-mix(in srgb, var(--elder-use) 55%, transparent); border-radius: 6px; color: var(--elder-use); }
.elder-use-grid small { color: var(--elder-use); font-size: .65rem; font-weight: 900; text-transform: uppercase; }.elder-use-grid h3 { margin: 3px 0 0; color: #eef7f8; font-size: 1rem; }
.elder-use-grid ul { display: grid; gap: 0; margin: 0; padding: 0 18px 15px; list-style: none; }.elder-use-grid li { position: relative; padding: 10px 6px 10px 22px; border-top: 1px solid rgba(255,255,255,.06); color: #a8b6be; font-size: .79rem; line-height: 1.45; }
.elder-use-grid li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 7px; height: 7px; border: 2px solid var(--elder-use); border-radius: 50%; }
.elder-source-note { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin: 22px; padding: 16px; border: 1px solid rgba(230, 184, 92, .22); border-radius: 7px; background: rgba(47, 31, 12, .38); }
.elder-source-note > i { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(230,184,92,.4); border-radius: 6px; color: #f1cd7b; }.elder-source-note strong { color: #f6e6b8; }.elder-source-note p { margin: 4px 0 0; color: #acb8bd; font-size: .76rem; line-height: 1.5; }
.contest-check { scroll-margin-top: 90px; }.contest-check > header { max-width: 780px; }
.contest-check > header > p:last-child { color: #9dafbd; }
.contest-check ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.contest-check li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; padding: 16px; border: 1px solid rgba(78, 220, 232, .15); border-radius: 7px; background: #111b25; }
.contest-check li > b { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #54dce7; border-radius: 50%; color: #061217; background: #54dce7; }
.contest-check li strong, .contest-check li span { display: block; }.contest-check li strong { color: #eef8fb; }.contest-check li span { margin-top: 5px; color: #9eafbc; font-size: .8rem; line-height: 1.5; }
.objective-boundary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; border-left: 4px solid #d9ad52; }
.objective-boundary > strong { color: #f2d488; }.objective-boundary > p { margin: 0; color: #aebdc8; line-height: 1.5; }
.objective-boundary > a { white-space: nowrap; }
@media (max-width: 860px) {
  .objectives-hero, .soul-elder { grid-template-columns: 1fr; }
  .elder-guide-heading { grid-template-columns: 88px minmax(0, 1fr); }.elder-guide-art { width: 88px; height: 88px; }.elder-guide-art img { width: 76px; height: 76px; }.elder-guide-heading > strong { grid-column: 1 / -1; min-width: 0; }
  .elder-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .elder-source-note { grid-template-columns: 44px minmax(0, 1fr); }.elder-source-note > a { grid-column: 1 / -1; justify-content: center; }
  .objectives-hero { min-height: 0; padding: 30px 24px; background-position: 60% 24%; }
  .dragon-lens > header { align-items: flex-start; flex-direction: column; }
  .dragon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dragon-section > .section-heading { grid-template-columns: 1fr; gap: 5px; }
  .dragon-solo-guide > header { grid-template-columns: 1fr; gap: 8px; }
  .dragon-role-solo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dragon-role-solo-grid article:last-child { grid-column: 1 / -1; }
  .objective-boundary { grid-template-columns: 1fr; }
  .objective-boundary > a { justify-self: start; }
}
@media (max-width: 620px) {
  .objectives-page main { width: min(100% - 20px, 1220px); margin-top: 12px; }
  .objectives-hero { padding: 23px 17px; }
  .objectives-hero h1 { font-size: 2.45rem; }
  .objectives-hero aside { display: none; }
  .objectives-jumps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .objectives-jumps::-webkit-scrollbar { display: none; }
  .objectives-jumps > span, .objectives-jumps a { flex: 0 0 auto; }
  .dragon-lens, .contest-check, .objective-boundary { padding: 19px 15px; }
  .dragon-lens > div { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
  .dragon-lens > div::-webkit-scrollbar { display: none; }
  .dragon-lens button { flex: 0 0 auto; }
  .dragon-lens-result { align-items: flex-start; flex-direction: column; gap: 3px; }
  .dragon-grid, .contest-check ol { grid-template-columns: 1fr; }
  .dragon-solo-guide > header { padding: 22px 17px; }
  .dragon-solo-verdict { grid-template-columns: 68px minmax(0, 1fr); gap: 13px; margin: 14px; padding: 15px; }
  .dragon-solo-icon { width: 64px; height: 64px; }.dragon-solo-icon img { width: 58px; height: 58px; }
  .dragon-solo-verdict > b { grid-column: 1 / -1; justify-self: start; }
  .dragon-role-solo-grid { grid-template-columns: 1fr; margin: 0 14px; }
  .dragon-role-solo-grid article:last-child { grid-column: auto; }
  .dragon-solo-checks { grid-template-columns: 1fr; padding: 14px; }
  .dragon-practice-note { margin: 0 14px 16px; }
  .dragon-card.is-muted { display: none; }
  .soul-elder article { grid-template-columns: 38px minmax(0, 1fr); padding: 20px 16px; }
}

/* Objective guide visual system */
.dragon-visual-rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: -8px 0 26px;
}
.dragon-visual-rail a {
  --dragon: #58dce8;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--dragon) 36%, #24313c);
  border-bottom: 3px solid var(--dragon);
  border-radius: 6px;
  color: #eaf8fb;
  background: linear-gradient(145deg, color-mix(in srgb, var(--dragon) 12%, #101923), #0a1119 70%);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.dragon-visual-rail a:is(:hover, :focus-visible) {
  transform: translateY(-3px);
  border-color: var(--dragon);
  background: color-mix(in srgb, var(--dragon) 16%, #0b141d);
}
.dragon-visual-rail .is-infernal { --dragon: #ef6b4a; }
.dragon-visual-rail .is-mountain { --dragon: #d2a451; }
.dragon-visual-rail .is-ocean { --dragon: #4cc9ad; }
.dragon-visual-rail .is-cloud { --dragon: #8cd7ef; }
.dragon-visual-rail .is-hextech { --dragon: #8b78f0; }
.dragon-visual-rail .is-chemtech { --dragon: #9ac653; }
.dragon-visual-rail img {
  width: 56px;
  height: 56px;
  padding: 6px;
  object-fit: contain;
  border: 1px solid color-mix(in srgb, var(--dragon) 54%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--dragon) 9%, #070d13);
  filter: drop-shadow(0 7px 10px color-mix(in srgb, var(--dragon) 24%, transparent));
}
.dragon-visual-rail span,
.dragon-visual-rail strong,
.dragon-visual-rail small { display: block; min-width: 0; }
.dragon-visual-rail strong {
  overflow: hidden;
  color: #f6fbfd;
  font-size: .8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dragon-visual-rail small {
  margin-top: 4px;
  overflow: hidden;
  color: #91a5b3;
  font-size: .62rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.objectives-page .objective-path .league-step-number,
.objectives-page .contest-check .league-step-number,
.objectives-page .soul-elder .league-step-number {
  border-color: rgba(225, 177, 67, .72) !important;
  color: #fff0bd !important;
  background: linear-gradient(145deg, #44300d, #191309) !important;
  box-shadow: inset 0 -3px rgba(225, 177, 67, .22), 0 8px 18px rgba(0,0,0,.24) !important;
}
.objectives-page .objective-path > div:last-child .league-step-number,
.objectives-page .contest-check .league-step-number {
  border-color: rgba(72, 219, 233, .72) !important;
  color: #e8fdff !important;
  background: linear-gradient(145deg, #0b3340, #071c26) !important;
  box-shadow: inset 0 -3px rgba(72, 219, 233, .24), 0 8px 18px rgba(0,0,0,.24) !important;
}
.dragon-card > header {
  grid-template-columns: 76px minmax(0, 1fr) 78px;
  min-height: 106px;
  padding: 14px 16px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--dragon) 12%, transparent), transparent 60%),
    #0a121a;
}
.dragon-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid color-mix(in srgb, var(--dragon) 60%, transparent);
  border-radius: 6px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--dragon) 20%, transparent), transparent 67%),
    #070d13;
}
.dragon-art img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px color-mix(in srgb, var(--dragon) 36%, transparent));
}
.dragon-art small {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 3px 5px;
  border: 1px solid color-mix(in srgb, var(--dragon) 52%, transparent);
  border-radius: 3px;
  color: #f8fdff !important;
  background: rgba(3, 8, 12, .9);
  font-size: .48rem !important;
  line-height: 1;
  letter-spacing: .05em;
}
.dragon-card > header > .league-step-number {
  border-color: color-mix(in srgb, var(--dragon) 78%, transparent) !important;
  color: #f7fdff !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--dragon) 38%, #13202a), #071018) !important;
  box-shadow: inset 0 -3px color-mix(in srgb, var(--dragon) 24%, transparent), 0 8px 18px rgba(0,0,0,.24) !important;
}
.dragon-card h3 { font-size: 1.42rem; line-height: 1.12; }
.dragon-reward {
  margin: 0;
  padding: 15px 16px;
  border-left: 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: color-mix(in srgb, var(--dragon) 8%, #071018);
}
.dragon-reward strong { font-size: .93rem; line-height: 1.35; }
.dragon-card dl { padding: 3px 16px 17px; }
.dragon-card dl > div { min-height: 95px; }
.soul-elder article { grid-template-columns: 72px minmax(0, 1fr); }
.soul-elder .objective-number { align-self: start; }
.soul-card .objective-number {
  border-color: #8e6bd1 !important;
  color: #f0e7ff !important;
  background: linear-gradient(145deg, #38245e, #171125) !important;
}
.elder-art {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
}
.elder-art > img {
  width: 64px;
  height: 64px;
  padding: 5px;
  object-fit: contain;
  border: 1px solid rgba(230, 184, 92, .5);
  border-radius: 6px;
  background: #171006;
  filter: drop-shadow(0 8px 12px rgba(230, 184, 92, .22));
}
.elder-card .objective-number {
  border-color: #a47b2f !important;
  color: #fff0bd !important;
  background: linear-gradient(145deg, #44300d, #191309) !important;
}
.contest-check li {
  align-items: start;
  min-height: 126px;
  padding: 18px;
  border-left: 3px solid rgba(78, 220, 232, .45);
}
.contest-check li strong { font-size: .94rem; }
.contest-check li span { font-size: .84rem; }

@media (max-width: 1080px) {
  .dragon-visual-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .dragon-visual-rail {
    grid-template-columns: repeat(6, minmax(154px, 1fr));
    overflow-x: auto;
    padding: 2px 0 8px;
    scrollbar-width: thin;
  }
  .dragon-card > header { grid-template-columns: 68px minmax(0, 1fr) 72px; }
  .dragon-art { width: 64px; height: 64px; }
  .dragon-art img { width: 58px; height: 58px; }
  .soul-elder article { grid-template-columns: 48px minmax(0, 1fr); }
  .elder-art > img { display: none; }
  .elder-guide-heading { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 20px 16px; }.elder-guide-art { width: 64px; height: 64px; }.elder-guide-art img { width: 56px; height: 56px; }
  .elder-stat-grid, .elder-timing-grid, .elder-use-grid { grid-template-columns: 1fr; }.elder-timing-grid, .elder-use-grid { padding: 14px 14px 0; }
  .elder-source-note { margin: 14px; }.elder-stat-grid article { min-height: 0; }.elder-timing-grid article { grid-template-columns: 44px minmax(0, 1fr); padding: 16px; }
  .dragon-card dl > div, .contest-check li { min-height: 0; }
}

/* Voidgrubs, Baron Nashor and major-objective comparison */
.objective-queue-rules {
  margin: 26px 0;
  scroll-margin-top: 90px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: #0b121a;
}
.objective-queue-rules > header {
  display: grid;
  grid-template-columns: minmax(280px, .48fr) minmax(0, .52fr);
  gap: 28px;
  align-items: end;
  margin-bottom: 18px;
}
.objective-queue-rules h2 { margin: 4px 0 0; }
.objective-queue-rules > header > p {
  margin: 0;
  color: #9dafbd;
  line-height: 1.55;
}
.objective-queue-rules > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.objective-queue-rules article {
  padding: 20px;
  border: 1px solid rgba(255,255,255,.09);
  border-top: 3px solid #55dce7;
  border-radius: 7px;
  background: #101923;
}
.objective-queue-rules article.is-swift {
  border-top-color: #d39d51;
  background: linear-gradient(145deg, rgba(58, 38, 13, .4), #101923 58%);
}
.objective-queue-rules article > span {
  color: #68e2eb;
  font-size: .66rem;
  font-weight: 950;
  text-transform: uppercase;
}
.objective-queue-rules article.is-swift > span { color: #e8bd76; }
.objective-queue-rules h3 {
  margin: 5px 0 14px;
  color: #f4f9fb;
  font-size: 1.3rem;
}
.objective-queue-rules dl { display: grid; gap: 0; margin: 0; }
.objective-queue-rules dl > div {
  display: grid;
  grid-template-columns: minmax(120px, .38fr) minmax(0, .62fr);
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.07);
}
.objective-queue-rules dt {
  color: #d7e5eb;
  font-size: .76rem;
  font-weight: 900;
}
.objective-queue-rules dd {
  margin: 0;
  color: #9dafbd;
  font-size: .78rem;
  line-height: 1.45;
}
.voidgrub-section {
  --voidgrub: #b76bea;
  margin: 30px 0;
  overflow: hidden;
  scroll-margin-top: 90px;
  border: 1px solid rgba(183, 107, 234, .27);
  border-top: 3px solid var(--voidgrub);
  border-radius: 8px;
  background:
    radial-gradient(circle at 10% 0, rgba(183, 107, 234, .13), transparent 32%),
    linear-gradient(145deg, #141023, #0b121a 56%);
}
.voidgrub-heading {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 28px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.voidgrub-heading h2 {
  margin: 3px 0 7px;
  color: #faf6ff;
  font-size: clamp(2rem, 4vw, 3.25rem);
}
.voidgrub-heading p:last-child {
  max-width: 760px;
  margin: 0;
  color: #b8aec6;
  line-height: 1.6;
}
.voidgrub-heading > strong {
  display: grid;
  min-width: 112px;
  min-height: 76px;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(183, 107, 234, .45);
  border-radius: 7px;
  color: #f5e8ff;
  background: rgba(50, 27, 67, .66);
  font-size: 1.15rem;
}
.voidgrub-heading > strong small {
  margin-bottom: 5px;
  color: #c9a5df;
  font-size: .62rem;
  text-transform: uppercase;
}
.voidgrub-art {
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  border: 1px solid rgba(183, 107, 234, .55);
  border-radius: 7px;
  background:
    radial-gradient(circle, rgba(183, 107, 234, .22), transparent 67%),
    #090b13;
}
.voidgrub-art img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(183, 107, 234, .4));
}
.voidgrub-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  padding: 18px;
}
.voidgrub-progress article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(183, 107, 234, .2);
  border-radius: 7px;
  background: rgba(9, 12, 21, .83);
}
.voidgrub-progress > i {
  align-self: center;
  height: 2px;
  background: linear-gradient(90deg, rgba(183,107,234,.18), #b76bea, rgba(183,107,234,.18));
}
.voidgrub-section .league-step-number {
  border-color: rgba(183, 107, 234, .72) !important;
  color: #f8ebff !important;
  background: linear-gradient(145deg, #4e2669, #1c1028) !important;
  box-shadow: inset 0 -3px rgba(183, 107, 234, .24), 0 8px 18px rgba(0,0,0,.24) !important;
}
.voidgrub-progress span {
  color: #c58ee7;
  font-size: .66rem;
  font-weight: 900;
  text-transform: uppercase;
}
.voidgrub-progress h3,
.voidgrub-read h3 {
  margin: 5px 0 7px;
  color: #f6f0fa;
  font-size: 1rem;
}
.voidgrub-progress p,
.voidgrub-read p,
.voidgrub-read li,
.voidgrub-warning span {
  color: #aaa0b7;
  font-size: .82rem;
  line-height: 1.55;
}
.voidgrub-read {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 18px 18px;
}
.voidgrub-read article {
  padding: 20px;
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid rgba(183, 107, 234, .55);
  border-radius: 7px;
  background: rgba(8, 12, 19, .68);
}
.voidgrub-read h3 { font-size: 1.22rem; }
.voidgrub-read ul { display: grid; gap: 7px; margin: 12px 0 0; padding-left: 18px; }
.voidgrub-read strong {
  display: inline-block;
  margin: 8px 0 0;
  color: #e9d2f7;
}
.voidgrub-warning {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin: 0 18px 20px;
  padding: 15px 17px;
  border: 1px solid rgba(224, 162, 80, .26);
  border-left: 4px solid #d5a04d;
  border-radius: 7px;
  background: rgba(38, 25, 11, .5);
}
.voidgrub-warning b { color: #f1cb88; }

.herald-section {
  --herald: #a565dc;
  margin: 30px 0;
  overflow: hidden;
  scroll-margin-top: 90px;
  border: 1px solid rgba(165, 101, 220, .25);
  border-top: 3px solid var(--herald);
  border-radius: 8px;
  background:
    radial-gradient(circle at 90% 0, rgba(165, 101, 220, .12), transparent 30%),
    #0b121a;
}
.herald-section > header {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 28px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.herald-section h2 {
  margin: 3px 0 7px;
  color: #faf6ff;
  font-size: clamp(2rem, 4vw, 3.25rem);
}
.herald-section header p:last-child {
  max-width: 760px;
  margin: 0;
  color: #b5a9c2;
  line-height: 1.6;
}
.herald-section header > strong {
  display: grid;
  min-width: 96px;
  min-height: 76px;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(165, 101, 220, .45);
  border-radius: 7px;
  color: #f4e5ff;
  background: rgba(45, 24, 62, .66);
  font-size: 1.2rem;
}
.herald-section header > strong small {
  margin-bottom: 5px;
  color: #c3a0dd;
  font-size: .62rem;
  text-transform: uppercase;
}
.herald-art {
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  border: 1px solid rgba(165, 101, 220, .55);
  border-radius: 7px;
  background: radial-gradient(circle, rgba(165, 101, 220, .2), transparent 67%), #090b13;
}
.herald-art img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(165, 101, 220, .38));
}
.herald-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 18px;
}
.herald-flow article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(165, 101, 220, .18);
  border-left: 3px solid rgba(165, 101, 220, .58);
  border-radius: 7px;
  background: rgba(9, 12, 21, .8);
}
.herald-section .league-step-number {
  border-color: rgba(165, 101, 220, .7) !important;
  color: #f7eaff !important;
  background: linear-gradient(145deg, #482661, #1b1027) !important;
  box-shadow: inset 0 -3px rgba(165, 101, 220, .24), 0 8px 18px rgba(0,0,0,.24) !important;
}
.herald-flow span,
.herald-flow strong { display: block; }
.herald-flow strong {
  margin-bottom: 5px;
  color: #f5eff9;
  font-size: .9rem;
}
.herald-flow span,
.herald-section > aside span {
  color: #aaa0b7;
  font-size: .82rem;
  line-height: 1.55;
}
.herald-section > aside {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin: 0 18px 20px;
  padding: 15px 17px;
  border: 1px solid rgba(224, 162, 80, .26);
  border-left: 4px solid #d5a04d;
  border-radius: 7px;
  background: rgba(38, 25, 11, .5);
}
.herald-section > aside b { color: #f1cb88; }

.baron-section {
  --baron: #d858dc;
  margin: 30px 0;
  overflow: hidden;
  scroll-margin-top: 90px;
  border: 1px solid rgba(216, 88, 220, .28);
  border-top: 3px solid var(--baron);
  border-radius: 8px;
  background:
    radial-gradient(circle at 92% 0, rgba(216, 88, 220, .14), transparent 32%),
    linear-gradient(145deg, #151023, #0b121a 54%);
}
.baron-heading {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 28px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.baron-heading h2 {
  margin: 3px 0 7px;
  color: #fbf5ff;
  font-size: clamp(2rem, 4vw, 3.25rem);
}
.baron-heading p:last-child {
  max-width: 770px;
  margin: 0;
  color: #b9aeca;
  line-height: 1.6;
}
.baron-heading > strong {
  display: grid;
  min-width: 96px;
  min-height: 76px;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(216, 88, 220, .45);
  border-radius: 7px;
  color: #ffe6ff;
  background: rgba(66, 19, 69, .62);
  font-size: 1.3rem;
}
.baron-heading > strong small {
  margin-bottom: 5px;
  color: #c99dcc;
  font-size: .62rem;
  text-transform: uppercase;
}
.baron-art {
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  border: 1px solid rgba(216, 88, 220, .55);
  border-radius: 7px;
  background:
    radial-gradient(circle, rgba(216, 88, 220, .23), transparent 67%),
    #090b13;
}
.baron-art img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 8px 16px rgba(216, 88, 220, .42));
}
.baron-rewards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 18px;
}
.baron-rewards article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(216, 88, 220, .18);
  border-left: 3px solid rgba(216, 88, 220, .66);
  border-radius: 7px;
  background: rgba(10, 13, 23, .84);
}
.baron-section .league-step-number,
.objective-comparison .league-step-number {
  border-color: rgba(216, 88, 220, .7) !important;
  color: #ffe9ff !important;
  background: linear-gradient(145deg, #57205a, #220d2b) !important;
  box-shadow: inset 0 -3px rgba(216, 88, 220, .22), 0 8px 18px rgba(0,0,0,.24) !important;
}
.baron-rewards span,
.baron-forms small,
.baron-plan aside > span {
  color: #d793dc;
  font-size: .66rem;
  font-weight: 900;
  text-transform: uppercase;
}
.baron-rewards h3 {
  margin: 5px 0 7px;
  color: #f7f1fa;
  font-size: 1rem;
}
.baron-rewards p,
.baron-forms p,
.baron-plan li span,
.baron-plan aside li {
  color: #a99fb7;
  font-size: .82rem;
  line-height: 1.55;
}
.baron-fact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-top: 1px solid rgba(216, 88, 220, .18); border-bottom: 1px solid rgba(216, 88, 220, .18); background: rgba(216, 88, 220, .16); }
.baron-fact-grid article { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; min-width: 0; padding: 19px 17px; background: rgba(9, 13, 22, .96); }
.baron-fact-grid i { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(216, 88, 220, .4); border-radius: 6px; color: #f19af4; background: rgba(71, 22, 74, .5); }
.baron-fact-grid small, .baron-fact-grid strong { display: block; }.baron-fact-grid small { color: #d793dc; font-size: .63rem; font-weight: 900; text-transform: uppercase; }.baron-fact-grid strong { margin-top: 4px; color: #fff1ff; font-size: .94rem; line-height: 1.3; }.baron-fact-grid p { margin: 7px 0 0; color: #aa9db8; font-size: .75rem; line-height: 1.5; }
.baron-wave-guide { margin: 18px; overflow: hidden; border: 1px solid rgba(95, 221, 228, .22); border-radius: 7px; background: rgba(8, 18, 26, .78); }
.baron-wave-guide > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 22px; border-bottom: 1px solid rgba(95, 221, 228, .18); background: linear-gradient(110deg, rgba(18, 67, 73, .35), rgba(47, 20, 58, .25)); }
.baron-wave-guide h3 { margin: 4px 0 0; color: #eefcff; font-size: 1.25rem; }.baron-wave-guide > header > strong { display: grid; min-width: 110px; padding: 12px 15px; border: 1px solid rgba(95, 221, 228, .35); border-radius: 6px; color: #b9fbff; background: rgba(8, 38, 43, .65); text-align: center; }.baron-wave-guide > header > strong small { margin-bottom: 3px; color: #6ddde4; font-size: .62rem; text-transform: uppercase; }
.baron-wave-math { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 16px; }.baron-wave-math article { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 13px; padding: 17px; border: 1px solid rgba(95, 221, 228, .16); border-left: 3px solid #5fdde4; border-radius: 7px; background: #101923; }
.baron-wave-math .league-step-number { width: 48px; height: 48px; font-size: .82rem; }.baron-wave-math small { color: #6ddde4; font-size: .64rem; font-weight: 900; text-transform: uppercase; }.baron-wave-math h4 { margin: 4px 0 6px; color: #eef9fb; font-size: 1rem; }.baron-wave-math p { margin: 0; color: #9eafb8; font-size: .77rem; line-height: 1.5; }
.baron-wave-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 16px 16px; }.baron-wave-rules article { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 11px; padding: 15px; border: 1px solid rgba(255,255,255,.08); border-radius: 7px; background: rgba(15, 23, 33, .88); }.baron-wave-rules i { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(216, 88, 220, .35); border-radius: 6px; color: #ed91f0; }.baron-wave-rules strong { color: #f4eef7; font-size: .86rem; }.baron-wave-rules p { margin: 5px 0 0; color: #9faab3; font-size: .73rem; line-height: 1.5; }
.baron-minion-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 16px 16px; }
.baron-minion-types article { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 11px; min-width: 0; padding: 15px; border: 1px solid rgba(255,255,255,.09); border-top: 3px solid var(--baron-minion-accent, #5fdde4); border-radius: 7px; background: linear-gradient(150deg, color-mix(in srgb, var(--baron-minion-accent, #5fdde4) 12%, #101722), #0e151e 58%); }
.baron-minion-types article.is-melee { --baron-minion-accent: #63d4ff; }.baron-minion-types article.is-caster { --baron-minion-accent: #ba82ff; }.baron-minion-types article.is-cannon { --baron-minion-accent: #f1bd55; }.baron-minion-types article.is-super { --baron-minion-accent: #ed6fbe; }
.baron-minion-types i { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid color-mix(in srgb, var(--baron-minion-accent) 65%, transparent); border-radius: 6px; color: var(--baron-minion-accent); background: color-mix(in srgb, var(--baron-minion-accent) 12%, transparent); }
.baron-minion-types small { color: var(--baron-minion-accent); font-size: .62rem; font-weight: 900; text-transform: uppercase; }.baron-minion-types h4 { margin: 4px 0 6px; color: #f4f7fa; font-size: .88rem; line-height: 1.3; }.baron-minion-types p { margin: 0; color: #9faab4; font-size: .73rem; line-height: 1.5; }
.baron-wave-guide > aside { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 11px; align-items: center; margin: 0 16px 16px; padding: 14px 16px; border: 1px solid rgba(232, 180, 85, .26); border-left: 3px solid #e8b455; border-radius: 7px; background: rgba(46, 31, 10, .44); }.baron-wave-guide > aside i { color: #f0c66f; font-size: 1.1rem; }.baron-wave-guide > aside p { margin: 0; color: #bdb6a8; font-size: .77rem; line-height: 1.5; }.baron-wave-guide > aside strong { color: #f6dfaa; }
.baron-pit-rules { padding: 28px; border-block: 1px solid rgba(232, 180, 85, .16); background: radial-gradient(circle at 90% 0, rgba(232, 180, 85, .08), transparent 38%), rgba(9, 12, 19, .64); }
.baron-pit-rules > header { display: grid; grid-template-columns: minmax(0, .8fr) minmax(280px, 1.2fr); gap: 24px; align-items: end; margin-bottom: 18px; }.baron-pit-rules > header .eyebrow { grid-column: 1; }.baron-pit-rules > header h3 { grid-column: 1; margin: 3px 0 0; color: #fff2d5; font-size: 1.35rem; line-height: 1.25; }.baron-pit-rules > header > p:last-child { grid-column: 2; grid-row: 1 / span 2; margin: 0; color: #b5ac9b; font-size: .82rem; line-height: 1.6; }
.baron-pit-rules > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }.baron-pit-rules article { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 13px; min-width: 0; padding: 18px; border: 1px solid rgba(232, 180, 85, .2); border-radius: 7px; background: linear-gradient(145deg, rgba(60, 39, 12, .35), rgba(14, 18, 27, .96) 48%); }.baron-pit-rules .league-step-number { width: 44px; height: 44px; color: #241604 !important; background: linear-gradient(145deg, #ffd77e, #d99c35) !important; }.baron-pit-rules small { color: #e8b455; font-size: .62rem; font-weight: 900; text-transform: uppercase; }.baron-pit-rules h4 { margin: 4px 0 7px; color: #f8f1e4; font-size: .94rem; line-height: 1.35; }.baron-pit-rules p { margin: 0; color: #aca69c; font-size: .75rem; line-height: 1.55; }
.baron-forms {
  padding: 28px;
  border-block: 1px solid rgba(255,255,255,.08);
  background: rgba(5, 8, 14, .44);
}
.baron-forms > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 17px;
}
.baron-forms > header h3,
.baron-plan h3 {
  margin: 4px 0 0;
  color: #f7f3fa;
  font-size: 1.45rem;
  overflow-wrap: anywhere;
}
.baron-forms > header > p {
  max-width: 560px;
  margin: 0;
}
.baron-forms > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.baron-forms article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 13px;
  min-width: 0;
  min-height: 158px;
  padding: 18px;
  border: 1px solid rgba(163, 122, 185, .22);
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(85, 39, 98, .18), rgba(11, 17, 25, .82));
}
.baron-form-mark {
  display: grid;
  width: fit-content;
  max-width: 100%;
  min-height: 40px;
  padding: 7px 10px;
  place-items: center;
  border: 1px solid rgba(216, 88, 220, .58);
  border-radius: 6px;
  color: #ffe7ff;
  background: #35133d;
  font-size: .62rem;
  font-weight: 950;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-align: center;
  text-transform: uppercase;
}
.baron-forms article > div { min-width: 0; }
.baron-forms h4 {
  margin: 4px 0 7px;
  color: #f7f3fa;
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.baron-forms article p { overflow-wrap: anywhere; }
.baron-plan {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(250px, .45fr);
  gap: 18px;
  padding: 28px;
}
.baron-plan ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.baron-plan li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(216, 88, 220, .16);
  border-radius: 7px;
  background: rgba(8, 12, 19, .66);
}
.baron-plan li span,
.baron-plan li strong { display: block; }
.baron-plan li strong {
  margin-bottom: 4px;
  color: #f4edf7;
  font-size: .88rem;
}
.baron-plan aside {
  padding: 20px;
  border: 1px solid rgba(224, 162, 80, .28);
  border-left: 4px solid #d5a04d;
  border-radius: 7px;
  background: rgba(38, 25, 11, .5);
}
.baron-plan aside > span { color: #efc57f; }
.baron-plan aside ul { display: grid; gap: 10px; margin: 14px 0 0; padding-left: 18px; }
.baron-plan aside li { display: list-item; padding: 0; border: 0; background: transparent; }
.baron-siege-plan { margin: 0 28px 28px; overflow: hidden; border: 1px solid rgba(95, 221, 228, .22); border-radius: 8px; background: #0b131d; }
.baron-siege-plan > header { display: grid; grid-template-columns: minmax(0, .8fr) minmax(300px, 1.2fr); gap: 24px; align-items: end; padding: 22px; border-bottom: 1px solid rgba(95, 221, 228, .16); background: linear-gradient(110deg, rgba(18, 67, 73, .3), rgba(47, 20, 58, .25)); }.baron-siege-plan > header h3 { margin: 4px 0 0; color: #f1fbfd; font-size: 1.35rem; }.baron-siege-plan > header > p { margin: 0; color: #a5b5be; font-size: .82rem; line-height: 1.6; }
.baron-siege-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(95,221,228,.14); }.baron-siege-timeline article { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 13px; min-width: 0; padding: 20px; background: #101923; }.baron-siege-timeline .league-step-number { width: 54px !important; min-width: 54px !important; height: 54px !important; min-height: 54px !important; font-size: .72rem !important; }.baron-siege-timeline small { color: #6ddde4; font-size: .62rem; font-weight: 900; text-transform: uppercase; }.baron-siege-timeline h4 { margin: 4px 0 7px; color: #eef9fb; font-size: .94rem; line-height: 1.35; }.baron-siege-timeline p { margin: 0; color: #9eafb8; font-size: .75rem; line-height: 1.55; }
.baron-siege-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; }.baron-siege-sides article { --siege-accent: #5fdde4; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; min-width: 0; padding: 19px; border: 1px solid color-mix(in srgb, var(--siege-accent) 30%, transparent); border-left: 4px solid var(--siege-accent); border-radius: 7px; background: linear-gradient(145deg, color-mix(in srgb, var(--siege-accent) 10%, #101722), #0e151e 55%); }.baron-siege-sides article.is-defending { --siege-accent: #e8b455; }.baron-siege-sides i { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid color-mix(in srgb, var(--siege-accent) 55%, transparent); border-radius: 6px; color: var(--siege-accent); background: color-mix(in srgb, var(--siege-accent) 10%, transparent); }.baron-siege-sides small { color: var(--siege-accent); font-size: .63rem; font-weight: 900; text-transform: uppercase; }.baron-siege-sides h4 { margin: 4px 0 9px; color: #f3f6f8; font-size: 1rem; }.baron-siege-sides ul { display: grid; gap: 7px; margin: 0; padding-left: 18px; }.baron-siege-sides li { color: #a6b0b7; font-size: .76rem; line-height: 1.5; }
.baron-siege-plan > aside { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; margin: 0 16px 16px; padding: 15px 17px; border: 1px solid rgba(123, 223, 169, .25); border-left: 3px solid #67d6a0; border-radius: 7px; background: rgba(15, 51, 35, .42); }.baron-siege-plan > aside i { color: #7be0aa; font-size: 1.2rem; }.baron-siege-plan > aside p { margin: 0; color: #b3c7bc; font-size: .78rem; line-height: 1.55; }.baron-siege-plan > aside strong { color: #d7f5e4; }
.objective-comparison {
  margin: 26px 0;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: radial-gradient(circle at 50% 0, rgba(95,221,228,.07), transparent 32%), #0b121a;
}
.objective-comparison > header { display: grid; grid-template-columns: minmax(0, .75fr) minmax(300px, 1.25fr); gap: 28px; align-items: end; margin-bottom: 18px; }.objective-comparison h2 { margin: 4px 0 0; }.objective-comparison > header > p { margin: 0; color: #9dafbd; font-size: .84rem; line-height: 1.6; }
.objective-choice-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.objective-choice-cards > article { --choice-accent: #d858dc; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: start; min-width: 0; padding: 20px; border: 1px solid color-mix(in srgb, var(--choice-accent) 28%, transparent); border-top: 3px solid var(--choice-accent); border-radius: 7px; background: linear-gradient(150deg, color-mix(in srgb, var(--choice-accent) 11%, #111923), #0f1721 55%); }.objective-choice-cards > article.is-soul { --choice-accent: #9b7bea; }.objective-choice-cards > article.is-baron { --choice-accent: #dc68df; }.objective-choice-cards > article.is-elder { --choice-accent: #e0ad4c; }
.objective-choice-cards article.is-soul .league-step-number {
  border-color: #8e6bd1 !important;
  color: #f0e7ff !important;
  background: linear-gradient(145deg, #38245e, #171125) !important;
}
.objective-choice-cards article.is-elder .league-step-number {
  border-color: #a47b2f !important;
  color: #fff0bd !important;
  background: linear-gradient(145deg, #44300d, #191309) !important;
}
.objective-choice-cards small { color: var(--choice-accent); font-size: .63rem; font-weight: 900; text-transform: uppercase; }.objective-choice-cards h3 { margin: 4px 0 8px; color: #f1f6f8; font-size: 1rem; line-height: 1.3; }.objective-choice-cards p { margin: 0; color: #a4b1b9; font-size: .76rem; line-height: 1.55; }.objective-choice-cards dl { display: grid; gap: 1px; margin: 15px 0 0; background: rgba(255,255,255,.08); }.objective-choice-cards dl > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 10px; padding: 8px 9px; background: rgba(8,13,20,.82); }.objective-choice-cards dt { color: #7f929e; font-size: .64rem; text-transform: uppercase; }.objective-choice-cards dd { margin: 0; color: #dce7eb; font-size: .71rem; font-weight: 800; text-align: right; }
.objective-choice-checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }.objective-choice-checks article { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 11px; min-width: 0; padding: 15px; border: 1px solid rgba(95,221,228,.14); border-radius: 7px; background: #101923; }.objective-choice-checks i { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(95,221,228,.35); border-radius: 6px; color: #6ddde4; background: rgba(26,82,89,.25); }.objective-choice-checks strong { display: block; color: #edf6f9; font-size: .84rem; }.objective-choice-checks p { margin: 5px 0 0; color: #98a9b3; font-size: .72rem; line-height: 1.5; }
.objective-comparison > aside { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 12px; padding: 15px 17px; border: 1px solid rgba(224,173,76,.25); border-left: 3px solid #e0ad4c; border-radius: 7px; background: rgba(55,38,12,.4); }.objective-comparison > aside i { color: #e9bd68; font-size: 1.15rem; }.objective-comparison > aside p { margin: 0; color: #b9b3a6; font-size: .78rem; line-height: 1.55; }.objective-comparison > aside strong { color: #f5dfad; }

@media (max-width: 900px) {
  .objective-queue-rules > header { grid-template-columns: 1fr; gap: 7px; }
  .objective-queue-rules > div { grid-template-columns: 1fr; }
  .voidgrub-progress {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .voidgrub-progress > i { width: 2px; height: 14px; margin-left: 20px; }
  .voidgrub-read { grid-template-columns: 1fr; }
  .herald-flow { grid-template-columns: 1fr; }
  .baron-rewards,
  .baron-forms > div { grid-template-columns: 1fr; }
  .baron-fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .baron-wave-rules { grid-template-columns: 1fr; }
  .baron-minion-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .baron-pit-rules > header { grid-template-columns: 1fr; gap: 8px; align-items: start; }.baron-pit-rules > header > p:last-child { grid-column: 1; grid-row: auto; }.baron-pit-rules > div { grid-template-columns: 1fr; }
  .baron-siege-plan > header { grid-template-columns: 1fr; gap: 8px; align-items: start; }.baron-siege-timeline { grid-template-columns: 1fr; }.baron-siege-sides { grid-template-columns: 1fr; }
  .objective-comparison > header { grid-template-columns: 1fr; gap: 8px; align-items: start; }.objective-choice-cards { grid-template-columns: 1fr; }.objective-choice-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .baron-rewards article,
  .baron-forms article { min-height: 0; }
  .baron-plan { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .objective-queue-rules { padding: 20px 15px; }
  .objective-queue-rules dl > div { grid-template-columns: 1fr; gap: 4px; }
  .voidgrub-heading {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 13px;
    padding: 20px 16px;
  }
  .voidgrub-art { width: 64px; height: 64px; }
  .voidgrub-art img { width: 56px; height: 56px; }
  .voidgrub-heading > strong {
    grid-column: 1 / -1;
    min-height: 58px;
  }
  .voidgrub-progress { padding: 12px; }
  .voidgrub-read { padding: 0 12px 12px; }
  .voidgrub-warning {
    grid-template-columns: 1fr;
    gap: 5px;
    margin: 0 12px 14px;
  }
  .herald-section > header {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 13px;
    padding: 20px 16px;
  }
  .herald-art { width: 64px; height: 64px; }
  .herald-art img { width: 56px; height: 56px; }
  .herald-section header > strong {
    grid-column: 1 / -1;
    min-height: 58px;
  }
  .herald-flow { padding: 12px; }
  .herald-section > aside {
    grid-template-columns: 1fr;
    gap: 5px;
    margin: 0 12px 14px;
  }
  .baron-heading {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 13px;
    padding: 20px 16px;
  }
  .baron-art { width: 64px; height: 64px; }
  .baron-art img { width: 56px; height: 56px; }
  .baron-heading > strong {
    grid-column: 1 / -1;
    min-height: 58px;
  }
  .baron-rewards { padding: 12px; }
  .baron-fact-grid, .baron-wave-math { grid-template-columns: 1fr; }
  .baron-wave-guide { margin: 12px; }.baron-wave-guide > header { grid-template-columns: 1fr; padding: 17px; }.baron-wave-guide > header > strong { min-width: 0; }.baron-wave-math { padding: 12px; }.baron-wave-rules { padding: 0 12px 12px; }.baron-minion-types { grid-template-columns: 1fr; padding: 0 12px 12px; }.baron-wave-guide > aside { margin: 0 12px 12px; }
  .baron-pit-rules { padding: 20px 15px; }.baron-pit-rules article { grid-template-columns: 42px minmax(0, 1fr); padding: 15px; }
  .baron-siege-plan { margin: 0 12px 12px; }.baron-siege-plan > header { padding: 18px 16px; }.baron-siege-timeline article { grid-template-columns: 66px minmax(0, 1fr); padding: 16px; }.baron-siege-timeline .league-step-number { width: 62px !important; min-width: 62px !important; height: 48px !important; min-height: 48px !important; font-size: .62rem !important; white-space: nowrap; }.baron-siege-sides { padding: 12px; }.baron-siege-sides article { grid-template-columns: 40px minmax(0, 1fr); padding: 16px; }.baron-siege-plan > aside { margin: 0 12px 12px; }
  .baron-forms,
  .baron-plan,
  .objective-comparison { padding: 20px 15px; }
  .baron-forms > header { align-items: flex-start; flex-direction: column; gap: 8px; }
  .baron-plan ol,
  .objective-comparison > div { grid-template-columns: 1fr; }
  .objective-choice-checks { grid-template-columns: 1fr; }.objective-choice-cards > article { padding: 17px; }.objective-choice-cards dl > div { grid-template-columns: 1fr; gap: 4px; }.objective-choice-cards dd { text-align: left; }
}

/* Jungle monsters and pathing */
.jungle-page main{width:min(1480px,calc(100% - 32px));margin:0 auto;padding-bottom:72px}
.jungle-hero{position:relative;min-height:clamp(390px,46vw,610px);overflow:hidden;border:1px solid #294153;border-radius:8px;background:#07100f;margin-top:14px;isolation:isolate}
.jungle-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.jungle-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,8,13,.96),rgba(4,12,17,.82) 34%,rgba(4,12,17,.18) 70%);z-index:0}
.jungle-hero>div{position:relative;z-index:1;display:flex;min-height:inherit;max-width:720px;flex-direction:column;justify-content:center;padding:clamp(36px,6vw,88px)}
.jungle-hero h1{max-width:680px;margin:8px 0 16px;font-size:clamp(40px,5vw,76px);line-height:1.02;letter-spacing:0}.jungle-hero p:not(.eyebrow){max-width:650px;margin:0;color:#d5e2e8;font-size:clamp(17px,1.6vw,22px);line-height:1.55}
.jungle-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.jungle-hero-actions a,.jungle-next a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:1px solid #3e7480;border-radius:999px;background:#0b2025;color:#9df4ef;font-weight:800;text-decoration:none}
.jungle-hero-actions a:first-child{border-color:#e7ad42;background:#31230d;color:#ffe2a0}.jungle-hero-actions a:hover,.jungle-hero-actions a:focus-visible,.jungle-next a:hover,.jungle-next a:focus-visible{border-color:#5ef2e7;background:#12343a;color:#fff}
.jungle-jumps{margin-top:18px}.jungle-start,.jungle-route-builder,.jungle-atlas,.jungle-rules,.jungle-system-grid,.jungle-next{margin-top:28px}
.jungle-start>header,.jungle-route-builder>header,.jungle-rules>header{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:18px}.jungle-start>header h2,.jungle-route-builder>header h2,.jungle-rules>header h2,.jungle-next h2{margin:4px 0 0;font-size:clamp(28px,3vw,44px)}
.jungle-start>header>p,.jungle-route-builder>header>p,.jungle-rules>header>p{max-width:620px;margin:0;color:#9fb1bd;line-height:1.6}.jungle-start>div{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.jungle-start article{position:relative;min-height:190px;padding:24px 24px 24px 82px;border:1px solid #263b47;border-radius:7px;background:#0d161e}.jungle-start article .league-step-number{position:absolute;left:22px;top:24px}.jungle-start h3{margin:0 0 8px;font-size:22px}.jungle-start article p{margin:0;color:#aebdc6;line-height:1.65}
.jungle-route-builder{padding:clamp(20px,3vw,38px);border:1px solid #28434c;border-radius:8px;background:#09151b}.jungle-route-controls{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.8fr);gap:16px}
.jungle-route-controls fieldset{display:flex;flex-wrap:wrap;gap:9px;padding:14px;border:1px solid #283d48;border-radius:7px;background:#0c1921}.jungle-route-controls legend{padding:0 8px;color:#8ea5b2;font-size:12px;font-weight:900;text-transform:uppercase}
.jungle-route-controls fieldset:last-child{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.jungle-route-controls button{display:flex;min-width:150px;min-height:58px;flex:1;flex-direction:column;gap:5px;align-items:flex-start;justify-content:center;padding:13px 15px;border:1px solid #344b58;border-radius:6px;background:#111e27;color:#e8f0f4;text-align:left;cursor:pointer}.jungle-route-controls button strong{font-size:15px;line-height:1.25}.jungle-route-controls button small{display:block;color:#9eb0ba;font-size:12px;line-height:1.35}
.jungle-route-controls button[aria-pressed=true]{border-color:#51e4dc;background:#123035;box-shadow:inset 0 -3px #51e4dc}.jungle-route-controls fieldset:last-child button[aria-pressed=true]{border-color:#e8ad45;background:#30250f;box-shadow:inset 0 -3px #e8ad45}
.jungle-route-controls .is-route{border-top:3px solid #47dcd4}.jungle-route-controls .is-half{border-top:3px solid #7d8fff}.jungle-route-controls .is-orientation{border-top:3px solid #e8ad45}
.jungle-route-selection{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px;overflow:hidden;border:1px solid #334d59;border-radius:7px;background:#0b171e}
.jungle-route-selection>div{position:relative;min-width:0;padding:17px 20px;border-right:1px solid #2b414c}
.jungle-route-selection>div:last-child{border-right:0}.jungle-route-selection>div.is-start{background:linear-gradient(135deg,#17372f,#10242a)}
.jungle-route-selection span,.jungle-route-selection strong,.jungle-route-selection small{display:block}.jungle-route-selection span{color:#7f96a2;font-size:11px;font-weight:950;letter-spacing:.04em;text-transform:uppercase}
.jungle-route-selection strong{margin-top:4px;overflow-wrap:anywhere;color:#effafa;font-size:21px;line-height:1.25}.jungle-route-selection .is-start strong{color:#7ff5d9}
.jungle-route-selection small{margin-top:5px;color:#93a7b1;font-size:12px;line-height:1.4}
.jungle-route-output{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(0,2fr);gap:18px;margin-top:20px}.jungle-route-copy,.jungle-route-output aside{padding:22px;border:1px solid #2d4651;border-radius:7px;background:#0e1b23}
.jungle-route-copy span,.jungle-route-output aside>strong{color:#eab34f;font-size:12px;font-weight:900;text-transform:uppercase}.jungle-route-copy h3{margin:5px 0 8px;font-size:29px}.jungle-route-copy p,.jungle-route-output aside p{margin:0;color:#afc0c9;line-height:1.6}
.jungle-route-output ol{display:flex;grid-column:2;grid-row:1/span 2;align-items:stretch;gap:8px;padding:0;margin:0;list-style:none;overflow-x:auto;scrollbar-color:#385665 transparent}.jungle-route-output li{display:flex;min-width:145px;flex:1;align-items:center;gap:10px;padding:15px;border:1px solid #2c414c;border-radius:7px;background:#111d26}.jungle-route-output li .league-step-number{flex:0 0 auto}.jungle-route-output li span{min-width:0}.jungle-route-output li strong,.jungle-route-output li small{display:block}.jungle-route-output li small{margin-top:3px;color:#8297a2;font-size:11px}.jungle-route-output aside{border-color:#655024;background:#1b180f}
.jungle-atlas .section-heading{margin-bottom:18px}.jungle-camp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.jungle-camp{--camp:#55d9d3;overflow:hidden;border:1px solid #2c414c;border-left:4px solid var(--camp);border-radius:7px;background:#0d171f}
.jungle-camp.is-blue{--camp:#4c9dff}.jungle-camp.is-green{--camp:#58c67d}.jungle-camp.is-slate{--camp:#9a9fb3}.jungle-camp.is-amber{--camp:#e3a94b}.jungle-camp.is-red{--camp:#f0605f}.jungle-camp.is-stone{--camp:#bd9b6b}.jungle-camp.is-cyan{--camp:#55e3dc}
.jungle-camp>header{display:flex;align-items:center;gap:14px;padding:18px 20px;border-bottom:1px solid #243641;background:#101c23}.jungle-camp>header>span{display:grid;width:48px;height:48px;place-items:center;border:1px solid var(--camp);border-radius:50%;background:#081117;color:var(--camp);font-size:20px;font-weight:950}.jungle-camp header small{color:var(--camp);font-size:11px;font-weight:900;text-transform:uppercase}.jungle-camp h3{margin:2px 0 0;font-size:23px}
.jungle-camp dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0}.jungle-camp dl div{padding:18px 20px;border-right:1px solid #22343e;border-bottom:1px solid #22343e}.jungle-camp dl div:nth-child(2n){border-right:0}.jungle-camp dl div:nth-last-child(-n+2){border-bottom:0}.jungle-camp dt{color:#849ba7;font-size:11px;font-weight:900;text-transform:uppercase}.jungle-camp dd{margin:6px 0 0;color:#d5e1e7;line-height:1.5}
.jungle-rules{padding:clamp(20px,3vw,38px);border:1px solid #33444c;border-radius:8px;background:#0b141a}.jungle-rules>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.jungle-rules article{padding:24px;border:1px solid #32464f;border-radius:7px;background:#101b22}.jungle-rules article.is-swift{border-color:#65502f;background:#1b1811}.jungle-rules article>span{color:#57ddd5;font-size:11px;font-weight:900;text-transform:uppercase}.jungle-rules article.is-swift>span{color:#edb650}.jungle-rules h3{margin:4px 0 15px;font-size:28px}.jungle-rules dl{margin:0}.jungle-rules dl div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-top:1px solid #293a43}.jungle-rules dt{color:#8fa2ad}.jungle-rules dd{margin:0;color:#edf4f6;font-weight:800;text-align:right}.jungle-source-note{margin:15px 0 0;color:#8fa3ad;font-size:13px}
.jungle-system-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.jungle-system-grid>article{padding:clamp(22px,3vw,34px);border:1px solid #2a404a;border-radius:8px;background:#0d171f}.jungle-system-grid h2{margin:4px 0 18px;font-size:clamp(26px,3vw,38px)}.jungle-system-grid ol,.jungle-check-list{display:grid;gap:9px;padding:0;margin:0;list-style:none}.jungle-system-grid ol li,.jungle-check-list li{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid #2b3e47;border-radius:6px;background:#111d24}.jungle-system-grid li span{min-width:0;color:#9fb1ba;line-height:1.45}.jungle-system-grid li strong{display:block;color:#edf4f6}.jungle-check-list li:before{content:"✓";display:grid;width:30px;height:30px;flex:0 0 30px;place-items:center;border-radius:50%;background:#123a37;color:#64ede3;font-weight:950}.jungle-no-gank{margin:14px 0 0;padding:16px;border-left:3px solid #e8ad45;background:#1d190f;color:#b8c4ca;line-height:1.55}.jungle-no-gank strong{display:block;color:#ffe0a0}
.jungle-next{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:clamp(24px,4vw,44px);border:1px solid #2f4a52;border-radius:8px;background:#0c1b20}.jungle-next>div:first-child{max-width:720px}.jungle-next p:not(.eyebrow){color:#a9bbc4;line-height:1.6}.jungle-next>div:last-child{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px}
@media(max-width:980px){.jungle-start>header,.jungle-route-builder>header,.jungle-rules>header{align-items:flex-start;flex-direction:column}.jungle-start>div{grid-template-columns:1fr}.jungle-start article{min-height:0}.jungle-route-controls{grid-template-columns:1fr}.jungle-route-output{grid-template-columns:1fr}.jungle-route-output ol{grid-column:1;grid-row:auto}.jungle-camp-grid{grid-template-columns:1fr}.jungle-next{align-items:flex-start;flex-direction:column}.jungle-next>div:last-child{justify-content:flex-start}}
@media(max-width:720px){.jungle-page main{width:min(100% - 20px,1480px)}.jungle-hero{min-height:530px}.jungle-hero>img{object-position:62% center}.jungle-hero:after{background:linear-gradient(0deg,rgba(2,8,13,.98),rgba(3,10,14,.84) 55%,rgba(3,10,14,.22))}.jungle-hero>div{justify-content:flex-end;padding:28px 20px}.jungle-hero h1{font-size:40px}.jungle-route-builder,.jungle-rules{padding:16px}.jungle-route-controls fieldset{flex-direction:column}.jungle-route-controls button{width:100%}.jungle-route-output ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}.jungle-route-output li{min-width:0}.jungle-camp dl{grid-template-columns:1fr}.jungle-camp dl div,.jungle-camp dl div:nth-child(2n),.jungle-camp dl div:nth-last-child(-n+2){border-right:0;border-bottom:1px solid #22343e}.jungle-camp dl div:last-child{border-bottom:0}.jungle-rules>div,.jungle-system-grid{grid-template-columns:1fr}.jungle-rules dl div{align-items:flex-start;flex-direction:column;gap:4px}.jungle-rules dd{text-align:left}}

/* Jungle planner v2: illustrated camps and numbered map path */
.jungle-page main *,
.jungle-page main *::before,
.jungle-page main *::after{box-sizing:border-box}
.jungle-page main :where(section,article,header,div,fieldset,li,span,p,h1,h2,h3,dd){min-width:0}
.jungle-page main :where(h1,h2,h3,p,dd,small,strong,em,a,button){overflow-wrap:anywhere}
.jungle-page main [id]{scroll-margin-top:96px}
.jungle-camp-icon{display:block;width:64px;height:64px;flex:0 0 64px;background-image:url("/league/assets/jungle-camp-icons-v2.webp");background-repeat:no-repeat;background-size:400% 200%;filter:drop-shadow(0 5px 9px rgba(0,0,0,.55))}
.jungle-camp-icon.icon-blue{background-position:0 0}
.jungle-camp-icon.icon-gromp{background-position:33.333% 0}
.jungle-camp-icon.icon-wolves{background-position:66.666% 0}
.jungle-camp-icon.icon-raptors{background-position:100% 0}
.jungle-camp-icon.icon-red{background-position:0 100%}
.jungle-camp-icon.icon-krugs{background-position:33.333% 100%}
.jungle-camp-icon.icon-scuttle{background-position:66.666% 100%}
.jungle-route-output{display:block;margin-top:20px}
.jungle-route-map{position:relative;width:min(100%,760px);aspect-ratio:560/1000;margin-inline:auto;overflow:hidden;border:1px solid #34515d;border-radius:7px;background:#071016;isolation:isolate}
.jungle-route-map::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(3,9,13,.28),rgba(3,9,13,.06) 55%,rgba(3,9,13,.28));pointer-events:none}
.jungle-route-map>img{position:absolute;top:22%;left:-39.285%;width:178.571%;height:56%;max-width:none;object-fit:fill;object-position:center;filter:saturate(.9) brightness(.72);transform:rotate(-90deg);transition:transform .75s cubic-bezier(.2,.75,.2,1)}
.jungle-route-map.is-red-orientation>img{transform:rotate(90deg)}
.jungle-route-map>svg{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none}
.jungle-route-map polyline{fill:none;stroke:#65f2e6;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 7px rgba(40,220,217,.9));stroke-dasharray:18 9;animation:jungle-route-flow 10s linear infinite}
@keyframes jungle-route-flow{to{stroke-dashoffset:-108}}
@media(prefers-reduced-motion:reduce){.jungle-route-map polyline{animation:none}}
.jungle-map-marker{position:absolute;left:var(--x);top:var(--y);z-index:3;display:grid;width:72px;height:72px;place-items:center;transform:translate(-50%,-50%);border:2px solid #77fff3;border-radius:50%;background:#071319;box-shadow:0 0 0 5px rgba(4,15,20,.72),0 0 24px rgba(55,226,217,.55)}
.jungle-map-marker>.jungle-camp-icon{width:58px;height:58px;flex-basis:58px}
.jungle-map-marker>b{position:absolute;top:-12px;left:-12px;z-index:2;display:grid;width:34px;height:34px;place-items:center;border:2px solid #fff;border-radius:50%;background:#e8ad45;color:#101419;font-size:16px;font-weight:950;box-shadow:0 4px 12px rgba(0,0,0,.55)}
.jungle-map-marker>em{position:absolute;top:calc(100% + 10px);left:50%;width:max-content;max-width:150px;padding:5px 9px;transform:translateX(-50%);border:1px solid #4a6974;border-radius:4px;background:rgba(4,13,18,.94);color:#f2f8fa;font-size:12px;font-style:normal;font-weight:900;text-align:center}
.jungle-map-key{position:absolute;top:12px;left:50%;z-index:4;display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid #48616b;border-radius:5px;background:rgba(4,13,18,.92);color:#c8d6dc;font-size:12px;font-weight:800;transform:translateX(-50%)}
.jungle-map-key b{display:grid;width:24px;height:24px;place-items:center;border-radius:50%;background:#e8ad45;color:#111820}.jungle-map-key i{display:block;width:28px;border-top:3px dashed #65f2e6}
.jungle-route-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:12px;margin-top:12px}
.jungle-route-summary .jungle-route-copy,.jungle-route-summary aside{padding:18px 20px}
.jungle-route-summary .jungle-route-copy h3{font-size:clamp(24px,2.5vw,34px)}
.jungle-route-output>ol{display:grid;grid-column:auto;grid-row:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px;overflow:visible}
.jungle-route-output>ol>li{display:grid;min-width:0;min-height:124px;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:10px;padding:14px}
.jungle-route-output>ol .jungle-camp-icon{width:54px;height:54px;flex-basis:54px}
.jungle-route-output>ol li small{font-size:12px;line-height:1.45}
.jungle-atlas .section-heading{align-items:end}
.jungle-camp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.jungle-camp{display:flex;min-height:100%;flex-direction:column}
.jungle-camp>header{min-height:106px;padding:16px 18px}
.jungle-camp>header>.jungle-camp-icon{width:72px;height:72px;flex-basis:72px;border:0;border-radius:0;background-color:transparent;background-image:url("/league/assets/jungle-camp-icons-v2.webp");background-repeat:no-repeat;background-size:400% 200%}
.jungle-camp h3{font-size:22px;line-height:1.15}
.jungle-camp dl{display:flex;flex:1;flex-direction:column}
.jungle-camp dl div,
.jungle-camp dl div:nth-child(2n),
.jungle-camp dl div:nth-last-child(-n+2){padding:14px 18px;border-right:0;border-bottom:1px solid #22343e}
.jungle-camp dl div:last-child{border-bottom:0}
.jungle-camp dl .is-action{border-left:3px solid var(--camp);background:color-mix(in srgb,var(--camp) 8%,#0d171f)}
.jungle-camp dl .is-action dt{color:var(--camp)}
.jungle-camp dl .is-action dd{color:#f0f6f8;font-weight:750}
.jungle-camp dl .is-timer{margin-top:auto;background:#091219}
.jungle-camp dl .is-timer dd{color:#ffe0a0;font-weight:850}
.jungle-start article,.jungle-system-grid>article,.jungle-rules article{overflow:hidden}
.jungle-system-grid ol li,.jungle-check-list li{align-items:flex-start}
.jungle-system-grid li span{display:block}
@media(max-width:1180px){
  .jungle-camp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jungle-route-output>ol{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:800px){
  .jungle-route-map{width:min(100%,620px)}
  .jungle-route-selection{grid-template-columns:1fr}
  .jungle-route-selection>div{border-right:0;border-bottom:1px solid #2b414c}
  .jungle-route-selection>div:last-child{border-bottom:0}
  .jungle-route-summary{grid-template-columns:1fr}
  .jungle-map-marker{width:58px;height:58px}
  .jungle-map-marker>.jungle-camp-icon{width:46px;height:46px;flex-basis:46px}
  .jungle-map-marker>b{top:-10px;left:-10px;width:29px;height:29px;font-size:14px}
  .jungle-map-marker>em{display:none}
  .jungle-map-key{top:8px}
}
@media(max-width:640px){
  .jungle-hero{min-height:500px}
  .jungle-hero h1{font-size:clamp(34px,10vw,42px)}
  .jungle-hero-actions{display:grid;grid-template-columns:1fr}
  .jungle-route-controls fieldset{padding:11px}
  .jungle-route-controls fieldset:last-child{grid-template-columns:1fr}
  .jungle-route-map{width:100%}
  .jungle-route-output>ol,.jungle-camp-grid{grid-template-columns:1fr}
  .jungle-route-output>ol>li{min-height:0;grid-template-columns:auto auto minmax(0,1fr)}
  .jungle-camp>header{min-height:94px}
  .jungle-camp>header>.jungle-camp-icon{width:62px;height:62px;flex-basis:62px}
  .jungle-map-key{font-size:10px}
  .jungle-map-key i{width:18px}
}

/* Jungle guide v3: route controls, epic monsters and stable number tiles */
.jungle-page .league-step-number {
  display: grid;
  width: 42px;
  height: 42px;
  min-width: 42px;
  place-items: center;
  border: 1px solid #5ee8df;
  border-radius: 6px;
  color: #eafffc;
  background: linear-gradient(145deg, #16454a, #0a2229);
  box-shadow: inset 0 -3px rgba(94,232,223,.2), 0 7px 16px rgba(0,0,0,.28);
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
}
.jungle-hero-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: min(700px, 100%);
  margin: 24px 0 0;
}
.jungle-hero-facts > div {
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid rgba(125,221,215,.25);
  border-radius: 6px;
  background: rgba(5,18,23,.8);
}
.jungle-hero-facts dt {
  color: #8ca5ae;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.jungle-hero-facts dd {
  margin: 5px 0 0;
  color: #f1fbfb;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
}
.jungle-start,
.jungle-route-builder,
.jungle-atlas,
.jungle-epics,
.jungle-plants,
.jungle-rules,
.jungle-system-grid,
.jungle-next,
.jungle-sources { margin-top: 30px; }
.jungle-route-controls {
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(240px, .55fr));
  align-items: stretch;
}
.jungle-route-controls fieldset:last-child {
  grid-column: auto;
  display: flex;
}
.jungle-route-controls .is-route {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top-color: #4de1d8;
}
.jungle-route-controls .is-route button:first-of-type { grid-column: 1 / -1; }
.jungle-route-controls .is-start { border-top: 3px solid #dc625c; }
.jungle-route-controls .is-orientation { border-top: 3px solid #e7ad42; }
.jungle-route-controls .is-start button[aria-pressed=true] {
  border-color: #f06e66;
  background: #351817;
  box-shadow: inset 0 -3px #f06e66;
}
.jungle-route-controls .is-start button[data-start=blue][aria-pressed=true] {
  border-color: #5b9eff;
  background: #111f38;
  box-shadow: inset 0 -3px #5b9eff;
}
.jungle-route-controls .is-orientation button[aria-pressed=true] {
  border-color: #e8ad45;
  background: #30250f;
  box-shadow: inset 0 -3px #e8ad45;
}
.jungle-route-output > ol > li {
  position: relative;
  overflow: hidden;
  border-top: 3px solid #4edfd7;
}
.jungle-route-output > ol > li::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -30px;
  width: 80px;
  height: 80px;
  border: 1px solid rgba(79,225,216,.12);
  transform: rotate(45deg);
}

/* Jungle pathing v5: shared square Rift map and compact route briefing */
.jungle-route-output {
  display: grid;
  grid-template-columns: minmax(390px, .92fr) minmax(0, 1.08fr);
  align-items: start;
  gap: 18px;
}
.jungle-route-map {
  position: sticky;
  top: 84px;
  width: 100%;
  aspect-ratio: 1;
  margin: 0;
  border-color: #41636e;
  background: #050d12;
  box-shadow: 0 18px 50px rgba(0,0,0,.34);
}
.jungle-route-map::after {
  background: linear-gradient(90deg,rgba(3,9,13,.24),rgba(3,9,13,.02) 48%,rgba(3,9,13,.22));
}
.jungle-route-map>img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
  filter: saturate(1.03) brightness(.76) contrast(1.04);
}
.jungle-route-map.is-red-orientation>img { transform: rotate(180deg); }
.jungle-route-map>svg { z-index: 3; }
.jungle-route-map polyline { stroke-width: 1.35; }
.jungle-route-map .jungle-map-marker { width:58px;height:58px; }
.jungle-route-map .jungle-map-marker>.jungle-camp-icon { width:46px;height:46px;flex-basis:46px; }
.jungle-route-map .jungle-map-marker>b { top:-9px;left:-9px;width:28px;height:28px;font-size:13px; }
.jungle-route-map .jungle-map-marker>em { top:calc(100% + 6px);max-width:118px;padding:4px 7px;font-size:10px; }
.jungle-route-details { min-width: 0; }
.jungle-route-summary { margin-top: 0; }
.jungle-route-output .jungle-route-details>ol {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  padding: 0;
  margin: 12px 0 0;
  list-style: none;
}
.jungle-route-output .jungle-route-details>ol>li {
  display: grid;
  min-width: 0;
  min-height: 112px;
  grid-template-columns: auto auto minmax(0,1fr);
  align-items: center;
  gap: 10px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid #2c414c;
  border-top: 3px solid #4edfd7;
  border-radius: 7px;
  background: #111d26;
}
.jungle-route-output .jungle-route-details>ol>li .jungle-camp-icon { width:54px;height:54px;flex-basis:54px; }
.jungle-route-output .jungle-route-details>ol>li strong,
.jungle-route-output .jungle-route-details>ol>li small { display:block;min-width:0;overflow-wrap:anywhere; }
.jungle-route-output .jungle-route-details>ol>li small { margin-top:4px;color:#8fa3ad;font-size:12px;line-height:1.42; }
.jungle-map-base {
  position:absolute;
  z-index:4;
  padding:6px 9px;
  border:1px solid #4a6470;
  border-radius:4px;
  background:rgba(4,13,18,.88);
  color:#cddce1;
  font-size:11px;
  font-weight:900;
}
.jungle-map-base.is-top { top:12px;right:12px; }
.jungle-map-base.is-bottom { bottom:12px;left:12px;border-color:#56d8d0;color:#91fff2; }
.jungle-route-boundary {
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:12px 0 0;
  padding:14px 16px;
  border:1px solid #705924;
  border-left:4px solid #e8ad45;
  border-radius:6px;
  background:#1b180f;
  color:#afad9f;
  line-height:1.5;
}
.jungle-route-boundary i { color:#efbd59;font-size:20px; }
.jungle-route-boundary strong { display:block;color:#fff1c6; }
@media(max-width:980px){
  .jungle-route-output{grid-template-columns:1fr}
  .jungle-route-map{position:relative;top:auto;width:min(100%,620px);margin-inline:auto}
}
@media(max-width:640px){
  .jungle-route-output .jungle-route-details>ol{grid-template-columns:1fr}
  .jungle-route-output .jungle-route-details>ol>li{min-height:0}
  .jungle-map-marker{width:48px;height:48px}
  .jungle-map-marker>.jungle-camp-icon{width:38px;height:38px;flex-basis:38px}
  .jungle-map-base{font-size:9px}
}
.jungle-camp > header > div { flex: 1; }
.jungle-camp > header > div > span {
  display: inline-flex;
  margin-top: 7px;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--camp) 44%, transparent);
  border-radius: 4px;
  color: #dce8eb;
  background: color-mix(in srgb, var(--camp) 10%, #081117);
  font-size: 11px;
  font-weight: 850;
}
.jungle-camp-members {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid #22343e;
  background: color-mix(in srgb, var(--camp) 7%, #091219);
}
.jungle-camp-members strong {
  color: var(--camp);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}
.jungle-camp-members span {
  color: #c8d7dc;
  font-size: 12px;
  line-height: 1.4;
}
.jungle-epics {
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid #3a3455;
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(72,37,101,.18), transparent 45%),
    #0b121a;
}
.jungle-epics .section-heading { margin-bottom: 18px; }
.jungle-epic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.jungle-epic-grid > article {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 0 18px;
  overflow: hidden;
  border: 1px solid #393c55;
  border-top: 3px solid #9a77de;
  border-radius: 7px;
  background: #101722;
}
.jungle-epic-grid > article:nth-child(3) { border-top-color: #e4774f; }
.jungle-epic-grid > article:nth-child(4) { border-top-color: #d6bd6f; }
.jungle-epic-grid > article:nth-child(5) {
  grid-column: 1 / -1;
  border-top-color: #d362db;
}
.jungle-epic-art {
  position: relative;
  display: grid;
  grid-row: 1 / span 3;
  min-height: 100%;
  place-items: center;
  border-right: 1px solid #303847;
  background: radial-gradient(circle, rgba(126,85,190,.26), transparent 67%), #090e16;
}
.jungle-epic-art img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.55));
}
.jungle-epic-art .league-step-number {
  position: absolute;
  top: 9px;
  left: 9px;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-color: #a985ed;
  background: #30214d;
  font-size: 13px;
}
.jungle-epic-copy { padding: 18px 18px 12px 0; }
.jungle-epic-copy h3 { margin: 0 0 5px; color: #f3effa; font-size: 22px; }
.jungle-epic-copy p,
.jungle-epic-grid aside p { margin: 0; color: #aeb8c7; line-height: 1.5; }
.jungle-epic-grid dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0 18px 14px 0;
}
.jungle-epic-grid dl > div {
  padding: 11px 12px;
  border: 1px solid #313b4a;
  border-radius: 5px;
  background: #0b121b;
}
.jungle-epic-grid dt {
  color: #9b83cb;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}
.jungle-epic-grid dd {
  margin: 4px 0 0;
  color: #edf1f7;
  font-size: 13px;
  font-weight: 800;
}
.jungle-epic-grid aside {
  margin: 0 18px 18px 0;
  padding: 12px 14px;
  border-left: 3px solid #d1a44d;
  background: rgba(54,41,17,.45);
}
.jungle-epic-grid aside strong {
  display: block;
  margin-bottom: 3px;
  color: #f2c977;
  font-size: 10px;
  text-transform: uppercase;
}
.jungle-removed-note {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) max-content;
  gap: 14px;
  align-items: center;
  margin-top: 12px;
  padding: 15px;
  border: 1px solid #3d4650;
  border-radius: 7px;
  background: #10171d;
}
.jungle-removed-note .league-step-number {
  border-color: #79858f;
  color: #cbd3d8;
  background: #232c33;
}
.jungle-removed-note strong { color: #eef3f5; }
.jungle-removed-note p { margin: 3px 0 0; color: #99aab2; line-height: 1.45; }
.jungle-removed-note a,
.jungle-sources a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 9px 13px;
  border: 1px solid #4d6873;
  border-radius: 999px;
  color: #a9f2ec;
  background: #10242b;
  font-weight: 850;
  text-decoration: none;
}
.jungle-plants {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid #315545;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(32,93,65,.18), transparent 48%), #0a1616;
}
.jungle-plants > header,
.jungle-sources {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}
.jungle-plants > header h2,
.jungle-sources h2 { margin: 4px 0 0; font-size: clamp(26px, 3vw, 40px); }
.jungle-plants > header > p,
.jungle-sources > div:first-child > p:not(.eyebrow) {
  max-width: 610px;
  margin: 0;
  color: #9eb2ad;
  line-height: 1.55;
}
.jungle-plants > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.jungle-plants article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  padding: 18px;
  border: 1px solid #2c4e40;
  border-radius: 7px;
  background: #0f201d;
}
.jungle-plants article:nth-child(2) .league-step-number {
  border-color: #5aa7e9;
  background: #132b42;
}
.jungle-plants article:nth-child(3) .league-step-number {
  border-color: #d68aa1;
  background: #3b2029;
}
.jungle-plants h3 { margin: 0 0 5px; }
.jungle-plants article strong { color: #80e0b0; font-size: 12px; }
.jungle-plants article p { margin: 7px 0 0; color: #a9bbb5; line-height: 1.5; }
.jungle-source-note {
  padding: 14px 16px;
  border-left: 3px solid #e8ad45;
  background: rgba(63,44,13,.35);
  color: #bac5ca;
  line-height: 1.5;
}
.jungle-source-note strong { color: #ffe2a1; }
.jungle-sources {
  padding: 24px;
  border: 1px solid #32434c;
  border-radius: 8px;
  background: #0c151b;
}
.jungle-sources > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

@media(max-width:1100px) {
  .jungle-route-controls { grid-template-columns: 1fr 1fr; }
  .jungle-route-controls .is-route { grid-column: 1 / -1; }
  .jungle-hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(max-width:820px) {
  .jungle-epic-grid { grid-template-columns: 1fr; }
  .jungle-epic-grid > article:nth-child(5) { grid-column: auto; }
  .jungle-plants > header,
  .jungle-sources { align-items: flex-start; flex-direction: column; }
  .jungle-plants > div { grid-template-columns: 1fr; }
  .jungle-sources > div:last-child { justify-content: flex-start; }
}
@media(max-width:640px) {
  .jungle-route-controls { grid-template-columns: 1fr; }
  .jungle-route-controls .is-route { grid-column: auto; grid-template-columns: 1fr; }
  .jungle-route-controls .is-route button:first-of-type { grid-column: auto; }
  .jungle-route-controls fieldset:last-child { display: flex; }
  .jungle-hero-facts { grid-template-columns: 1fr 1fr; }
  .jungle-hero-facts > div { min-height: 64px; padding: 10px; }
  .jungle-epics { padding: 16px 12px; }
  .jungle-epic-grid > article { grid-template-columns: 72px minmax(0, 1fr); gap: 0 12px; }
  .jungle-epic-art img { width: 60px; height: 60px; }
  .jungle-epic-copy { padding: 15px 12px 10px 0; }
  .jungle-epic-copy h3 { font-size: 19px; }
  .jungle-epic-grid dl { grid-template-columns: 1fr; padding-right: 12px; }
  .jungle-epic-grid aside { margin-right: 12px; }
  .jungle-removed-note { grid-template-columns: 42px minmax(0, 1fr); }
  .jungle-removed-note a { grid-column: 1 / -1; }
  .jungle-camp-members { grid-template-columns: 1fr; gap: 3px; }
}

/* v120: status-effect visual language and icon-led directory. */
.status-effects-page {
  --effect-color: #63dce5;
  --effect-rgb: 99, 220, 229;
}
.effect-tone-danger { --effect-color: #ff6f91; --effect-rgb: 255, 111, 145; }
.effect-tone-charm { --effect-color: #f58bd7; --effect-rgb: 245, 139, 215; }
.effect-tone-disrupt { --effect-color: #b591ff; --effect-rgb: 181, 145, 255; }
.effect-tone-hinder { --effect-color: #f0bd5d; --effect-rgb: 240, 189, 93; }
.effect-tone-protect { --effect-color: #59d8f2; --effect-rgb: 89, 216, 242; }
.effect-tone-counter { --effect-color: #6ed3af; --effect-rgb: 110, 211, 175; }
.effect-tone-sustain { --effect-color: #65df8c; --effect-rgb: 101, 223, 140; }
.effect-tone-vision { --effect-color: #6fa8ff; --effect-rgb: 111, 168, 255; }
.status-effects-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: #35536a;
  border-bottom-color: #6ee8f0;
  box-shadow: inset 0 0 0 1px rgba(112, 224, 236, .05), 0 18px 50px rgba(0, 0, 0, .22);
}
.status-effects-hero::after {
  position: absolute;
  z-index: -1;
  width: 220px;
  height: 220px;
  right: 42px;
  bottom: -112px;
  border: 1px solid rgba(108, 226, 236, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(111, 168, 255, .035), 0 0 0 68px rgba(181, 145, 255, .025);
  content: "";
}
.status-effects-hero h1 {
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .46);
}
.status-effects-hero aside article {
  position: relative;
  background: rgba(12, 27, 39, .78);
}
.status-effects-hero aside article::before {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: #69e3eb;
  box-shadow: 0 0 12px rgba(105, 227, 235, .72);
  content: "";
}
.status-effects-hero aside article:nth-child(2)::before { background: #bd93ff; box-shadow: 0 0 12px rgba(189, 147, 255, .72); }
.status-effects-hero aside article:nth-child(3)::before { background: #f0bd5d; box-shadow: 0 0 12px rgba(240, 189, 93, .72); }
.status-effects-hero aside strong { margin-left: 2px; }
.status-effect-primer > div { gap: 12px; }
.status-effect-primer article {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  min-height: 164px;
  padding: 20px;
  border-top: 1px solid #2a3947;
  border-left: 3px solid var(--primer-color, #58dce5);
  background: linear-gradient(135deg, rgba(var(--primer-rgb, 88, 220, 229), .11), #0d1721 48%);
}
.status-effect-primer article.is-danger { --primer-color: #ff6f91; --primer-rgb: 255, 111, 145; }
.status-effect-primer article.is-hinder { --primer-color: #f0bd5d; --primer-rgb: 240, 189, 93; }
.status-effect-primer article.is-protect { --primer-color: #59d8f2; --primer-rgb: 89, 216, 242; }
.status-effect-primer article.is-vision { --primer-color: #8f9dff; --primer-rgb: 143, 157, 255; }
.status-effect-primer article:nth-child(n) { border-top-color: #2a3947; }
.status-effect-primer .effect-symbol {
  width: 46px;
  height: 46px;
  margin: 0;
  border-color: color-mix(in srgb, var(--primer-color) 55%, #263845);
  color: var(--primer-color);
  background: rgba(var(--primer-rgb), .12);
  box-shadow: inset 0 0 18px rgba(var(--primer-rgb), .08);
  font-size: 1.18rem;
}
.status-effect-primer article small {
  display: block;
  margin-bottom: 5px;
  color: var(--primer-color);
  font-size: .59rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.status-effect-primer strong { font-size: 1rem; }
.status-effect-primer article p { font-size: .77rem; }
.status-effect-filters {
  gap: 8px;
  padding: 2px 1px 9px;
  scrollbar-color: #4a6673 transparent;
  scrollbar-width: thin;
}
.status-effect-filters button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding-inline: 12px 14px;
  transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}
.status-effect-filters button i {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: #6edfe7;
  font-size: .68rem;
  font-style: normal;
  line-height: 1;
  opacity: .82;
}
.status-effect-filters button.is-danger i { color: #ff7897; }
.status-effect-filters button.is-charm i { color: #f58bd7; }
.status-effect-filters button.is-disrupt i { color: #b591ff; }
.status-effect-filters button.is-hinder i { color: #f0bd5d; }
.status-effect-filters button.is-protect i { color: #59d8f2; }
.status-effect-filters button.is-counter i { color: #6ed3af; }
.status-effect-filters button.is-sustain i { color: #65df8c; }
.status-effect-filters button.is-vision i { color: #7baeff; }
.status-effect-filters button:is(:hover, :focus-visible) {
  border-color: #5b7a89;
  color: #f2f8fb;
  background: #14232e;
  transform: translateY(-1px);
}
.status-effect-filters button[aria-pressed="true"] i {
  color: inherit;
  background: rgba(255, 255, 255, .08);
}
.status-effect-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}
.status-effect-grid > article {
  position: relative;
  align-self: start;
  overflow: hidden;
  padding: 18px;
  border-color: rgba(var(--effect-rgb), .28);
  border-left: 1px solid rgba(var(--effect-rgb), .28);
  border-top: 3px solid var(--effect-color);
  background:
    linear-gradient(145deg, rgba(var(--effect-rgb), .105), rgba(13, 23, 33, .96) 36%),
    #0d1721;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
}
.status-effect-grid > article::after {
  position: absolute;
  width: 92px;
  height: 92px;
  top: -52px;
  right: -45px;
  border: 1px solid rgba(var(--effect-rgb), .14);
  border-radius: 50%;
  content: "";
}
.status-effect-grid > article.is-selected {
  border-color: var(--effect-color);
  box-shadow: 0 0 0 2px rgba(var(--effect-rgb), .16), 0 12px 30px rgba(0, 0, 0, .22);
}
.status-effect-card-heading {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center !important;
  gap: 12px !important;
}
.status-effect-card-icon,
.status-effect-dialog-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(var(--effect-rgb), .55);
  border-radius: 6px;
  color: var(--effect-color) !important;
  background: rgba(var(--effect-rgb), .12);
  box-shadow: inset 0 0 20px rgba(var(--effect-rgb), .08);
  font-size: 1.2rem !important;
  font-weight: 900;
}
.status-effect-card-heading > div { min-width: 0; }
.status-effect-card-heading small {
  display: block;
  color: var(--effect-color);
  font-size: .58rem;
  font-weight: 900;
  text-transform: uppercase;
}
.status-effect-grid .status-effect-card-heading h3 {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  color: #f4f8fb;
  font-size: 1.08rem;
  line-height: 1.15;
}
.status-effect-grid .status-effect-card-heading > b {
  display: grid;
  justify-items: end;
  color: #8196a5;
  font-size: .56rem;
  font-weight: 800;
  text-transform: uppercase;
}
.status-effect-grid .status-effect-card-heading > b strong {
  color: var(--effect-color);
  font-size: 1.05rem;
  line-height: 1;
}
.status-effect-grid article > p {
  min-height: 58px;
  margin: 15px 0 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(var(--effect-rgb), .13);
  color: #a3b5c1;
  font-size: .77rem;
}
.status-effect-champions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.status-effect-champions a,
.status-effect-all a,
.status-effect-dialog-list a {
  grid-template-columns: 38px minmax(0, 1fr) 27px;
  gap: 9px;
  min-height: 50px;
  padding: 6px;
  border: 1px solid transparent;
  background: rgba(15, 29, 40, .9);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.status-effect-champions a:is(:hover, :focus-visible),
.status-effect-all a:is(:hover, :focus-visible),
.status-effect-dialog-list a:is(:hover, :focus-visible) {
  border-color: rgba(var(--effect-rgb), .38);
  background: rgba(var(--effect-rgb), .1);
  transform: translateY(-1px);
}
.status-effect-champions img,
.status-effect-all img,
.status-effect-dialog-list img {
  width: 38px;
  height: 38px;
  border-color: rgba(var(--effect-rgb), .42);
}
.status-effect-champions strong,
.status-effect-all strong,
.status-effect-dialog-list strong { color: #f0f6f9; font-size: .74rem; }
.status-effect-champions small,
.status-effect-all small,
.status-effect-dialog-list small { color: #879daa; font-size: .6rem; }
.status-effect-champions a > b,
.status-effect-all a > b,
.status-effect-dialog-list a > b {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(var(--effect-rgb), .44);
  border-radius: 5px;
  color: var(--effect-color);
  background: rgba(var(--effect-rgb), .08);
  font-size: .64rem;
}
.status-effect-grid article > button {
  justify-content: space-between;
  gap: 10px;
  border-color: rgba(var(--effect-rgb), .42);
  color: #eaf8fa;
  background: rgba(var(--effect-rgb), .09);
}
.status-effect-grid article > button b {
  display: grid;
  min-width: 27px;
  height: 24px;
  place-items: center;
  padding-inline: 6px;
  border-radius: 999px;
  color: #071016;
  background: var(--effect-color);
  font-size: .62rem;
}
.status-effect-grid article > button::after { content: "→"; }
.status-effect-dialog {
  border-color: rgba(var(--effect-rgb), .5);
  background: #09131c;
}
.status-effect-dialog::backdrop {
  background: rgba(2, 6, 11, .86);
  backdrop-filter: blur(4px);
}
.status-effect-dialog > header {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 42px;
  align-items: center;
  border-bottom-color: rgba(var(--effect-rgb), .25);
  background: linear-gradient(110deg, rgba(var(--effect-rgb), .13), #0d1923 45%);
}
.status-effect-dialog-icon {
  width: 52px;
  height: 52px;
  font-size: 1.3rem !important;
}
.status-effect-dialog > header > div { min-width: 0; }
.status-effect-dialog > header > div > span { color: var(--effect-color); }
.status-effect-dialog-list { gap: 8px; padding: 18px; }
.champion-effect-grid > article {
  border-color: #2d404e;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .1);
}
.champion-effect-grid > article.is-selected {
  border-color: #63dde6;
  box-shadow: 0 0 0 2px rgba(99, 221, 230, .13);
}
.champion-effect-heading {
  position: relative;
  border-bottom: 1px solid #293b48;
  background: linear-gradient(110deg, #132635, #101a25);
}
.champion-effect-heading::after {
  position: absolute;
  width: 3px;
  top: 10px;
  bottom: 10px;
  left: 0;
  border-radius: 0 3px 3px 0;
  background: #65dfe7;
  content: "";
}
.champion-effect-heading img {
  width: 52px;
  height: 52px;
  border-color: #537080;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
}
.champion-effect-heading > b {
  border-color: #4a6876;
  color: #071016;
  background: #68dfe7;
}
.champion-effect-grid article > div > a {
  grid-template-columns: 30px minmax(0, 1fr) 24px;
  border: 1px solid transparent;
  background: rgba(var(--effect-rgb), .055);
}
.champion-effect-grid article > div > a:is(:hover, :focus-visible) {
  border-color: rgba(var(--effect-rgb), .35);
  background: rgba(var(--effect-rgb), .1);
}
.champion-effect-grid article > div > a > b {
  border-color: rgba(var(--effect-rgb), .42);
  color: var(--effect-color);
  background: rgba(var(--effect-rgb), .09);
}
.champion-effect-grid article > div > a > i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: var(--effect-color);
  font-size: .67rem;
  font-style: normal;
}
.status-effects-note {
  border-color: rgba(240, 189, 93, .26);
  border-left-color: #f0bd5d;
  background: linear-gradient(100deg, rgba(240, 189, 93, .08), #111821 36%);
}
@media (max-width: 1120px) {
  .status-effect-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .status-effect-primer > div,
  .status-effect-grid,
  .champion-effect-grid { grid-template-columns: 1fr; }
  .status-effect-primer article { min-height: 0; }
}
@media (max-width: 520px) {
  .status-effects-hero::after { display: none; }
  .status-effect-champions { grid-template-columns: 1fr; }
  .status-effect-card-heading { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 9px !important; }
  .status-effect-card-icon { width: 42px; height: 42px; }
  .status-effect-dialog > header {
    grid-template-columns: 44px minmax(0, 1fr) 38px;
    gap: 10px;
    padding: 14px;
  }
  .status-effect-dialog-icon { width: 44px; height: 44px; }
  .status-effect-dialog > header button { width: 38px; height: 38px; flex-basis: 38px; }
}

/* v122: gap-free effect directory and practical control comparison. */
.status-action-matrix {
  margin-top: 28px;
  padding: 28px 0;
  border-top: 1px solid rgba(130, 157, 178, .18);
}
.status-action-matrix > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.status-action-matrix h2 {
  margin: 4px 0 7px;
  color: #f3f8fb;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1;
}
.status-action-matrix > header p:last-child {
  max-width: 760px;
  margin: 0;
  color: #93a8b6;
  line-height: 1.55;
}
.status-action-matrix > header > a {
  display: inline-flex;
  min-height: 40px;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 14px;
  border: 1px solid #496876;
  border-radius: 999px;
  color: #dff9fb;
  background: #122630;
  font-size: .69rem;
  font-weight: 900;
  text-decoration: none;
}
.status-action-table-wrap {
  overflow: hidden;
  border: 1px solid #304452;
  border-radius: 7px;
  background: #0c1620;
}
.status-action-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.status-action-table-wrap th,
.status-action-table-wrap td {
  padding: 13px 14px;
  border-right: 1px solid #263744;
  border-bottom: 1px solid #263744;
  text-align: center;
}
.status-action-table-wrap tr:last-child > * { border-bottom: 0; }
.status-action-table-wrap tr > *:last-child { border-right: 0; }
.status-action-table-wrap thead th {
  color: #859ba9;
  background: #101d28;
  font-size: .61rem;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.status-action-table-wrap thead th:first-child {
  width: 31%;
  text-align: left;
}
.status-action-table-wrap tbody th {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  color: #f1f6f9;
  background: linear-gradient(100deg, rgba(var(--effect-rgb), .11), rgba(14, 25, 35, .7));
  text-align: left;
}
.status-action-table-wrap tbody th i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(var(--effect-rgb), .48);
  border-radius: 5px;
  color: var(--effect-color);
  background: rgba(var(--effect-rgb), .1);
  font-size: .88rem;
  font-style: normal;
}
.status-action-table-wrap tbody th span { min-width: 0; font-size: .78rem; }
.status-action-table-wrap tbody th small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #8095a4;
  font-size: .57rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-action-table-wrap td {
  position: relative;
  color: #a7b8c3;
  background: #0d1822;
  font-size: .67rem;
  font-weight: 900;
}
.status-action-table-wrap td::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #748996;
  content: "";
}
.status-action-table-wrap td[data-state="open"] { color: #83e6ac; }
.status-action-table-wrap td[data-state="open"]::before { background: #60da8e; box-shadow: 0 0 9px rgba(96, 218, 142, .42); }
.status-action-table-wrap td[data-state="blocked"] { color: #ff8ba4; }
.status-action-table-wrap td[data-state="blocked"]::before { background: #ff6f91; box-shadow: 0 0 9px rgba(255, 111, 145, .38); }
.status-action-table-wrap td[data-state="limited"] { color: #edc873; }
.status-action-table-wrap td[data-state="limited"]::before { background: #eab859; }
.status-action-table-wrap td[data-state="answer"] { color: #70dce8; }
.status-action-table-wrap td[data-state="answer"]::before { background: #58d5e4; }
.status-action-table-wrap td[data-state="caution"] { color: #c5a4ff; }
.status-action-table-wrap td[data-state="caution"]::before { background: #aa7ff2; }
.status-action-note {
  margin: 9px 0 0;
  color: #8196a5;
  font-size: .67rem;
  line-height: 1.5;
}
.status-action-note b { color: #b4c6d0; }
.status-effect-results {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -2px 0 14px;
  padding: 8px 10px 8px 14px;
  border: 1px solid #2b3e4b;
  border-radius: 6px;
  color: #8fa4b2;
  background: #0d1822;
  font-size: .67rem;
  font-weight: 800;
}
.status-effect-results b {
  margin-right: 4px;
  color: #6de1e9;
  font-size: .9rem;
}
.status-effect-results button {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid #45636f;
  border-radius: 999px;
  color: #ddf7f9;
  background: #122831;
  font-size: .62rem;
  font-weight: 900;
}
.status-effect-grid {
  display: block;
  column-count: 3;
  column-gap: 14px;
}
.status-effect-grid > article {
  display: inline-block;
  width: 100%;
  margin: 0 0 14px;
  break-inside: avoid;
  vertical-align: top;
}
.status-effect-grid > article[hidden],
.champion-effect-grid > article[hidden] {
  display: none !important;
}
@media (max-width: 1120px) {
  .status-effect-grid { column-count: 2; }
}
@media (max-width: 720px) {
  .status-action-matrix > header { align-items: flex-start; flex-direction: column; }
  .status-effect-grid { column-count: 1; }
}
@media (max-width: 560px) {
  .status-action-table-wrap th,
  .status-action-table-wrap td { padding: 10px 5px; }
  .status-action-table-wrap thead th { font-size: .51rem; }
  .status-action-table-wrap thead th:first-child { width: 36%; }
  .status-action-table-wrap tbody th {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 7px;
  }
  .status-action-table-wrap tbody th i { width: 30px; height: 30px; }
  .status-action-table-wrap tbody th span { font-size: .67rem; }
  .status-action-table-wrap tbody th small { font-size: .5rem; }
  .status-action-table-wrap td { font-size: .56rem; }
  .status-action-table-wrap td::before { display: block; margin: 0 auto 4px; }
}

/* v123: progressive champion mechanic browser. */
.champion-effect-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid #2d414e;
  border-radius: 7px;
  background: #0d1822;
}
.champion-effect-modes {
  display: flex;
  min-width: 0;
  gap: 7px;
  overflow-x: auto;
  scrollbar-color: #456370 transparent;
  scrollbar-width: thin;
}
.champion-effect-modes button {
  display: inline-flex;
  min-height: 38px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 0 13px 0 8px;
  border: 1px solid #354b58;
  border-radius: 999px;
  color: #9fb2be;
  background: #111e28;
  font-size: .66rem;
  font-weight: 900;
}
.champion-effect-modes button i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(var(--effect-rgb), .42);
  border-radius: 50%;
  color: var(--effect-color);
  background: rgba(var(--effect-rgb), .09);
  font-size: .65rem;
  font-style: normal;
}
.champion-effect-modes button:is(:hover, :focus-visible) {
  border-color: rgba(var(--effect-rgb), .58);
  color: #edf8fa;
  background: rgba(var(--effect-rgb), .09);
}
.champion-effect-modes button[aria-pressed="true"] {
  border-color: var(--effect-color);
  color: #f2fbfc;
  background: rgba(var(--effect-rgb), .14);
  box-shadow: inset 0 -2px 0 var(--effect-color);
}
.champion-effect-toolbar > p {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 4px;
  margin: 0;
  color: #8197a6;
  font-size: .62rem;
  font-weight: 800;
}
.champion-effect-toolbar > p strong {
  color: #6fe1e9;
  font-size: 1rem;
}
.champion-effect-toolbar > p b { color: #b8c8d1; }
.champion-effect-more {
  display: flex;
  justify-content: center;
  padding-top: 18px;
}
.champion-effect-more[hidden] { display: none; }
.champion-effect-more button {
  display: inline-flex;
  min-width: 230px;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 10px 0 18px;
  border: 1px solid #47707b;
  border-radius: 999px;
  color: #e5fafd;
  background: #12303a;
  font-size: .69rem;
  font-weight: 900;
}
.champion-effect-more button:is(:hover, :focus-visible) {
  border-color: #68e0e8;
  background: #163c45;
}
.champion-effect-more button b {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: #092027;
  background: #69dfe7;
  font-size: .75rem;
}
@media (max-width: 760px) {
  .champion-effect-toolbar { align-items: stretch; flex-direction: column; }
  .champion-effect-toolbar > p { padding-inline: 4px; }
}

/* v124: long-page navigation and champion-aware effect search. */
.status-page-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid #2d414e;
  border-radius: 7px;
  background: #2d414e;
}
.status-page-nav a {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 66px;
  padding: 10px 14px;
  color: #edf7fa;
  background: #0d1822;
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.status-page-nav a:is(:hover, :focus-visible) { background: #142630; }
.status-page-nav a i {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border: 1px solid #456570;
  border-radius: 5px;
  color: #68dfe7;
  background: #102730;
  font-size: .63rem;
  font-style: normal;
  font-weight: 900;
}
.status-page-nav a:nth-child(2) i { border-color: #705d92; color: #c4a6f5; background: #211b30; }
.status-page-nav a:nth-child(3) i { border-color: #806a3c; color: #edc56f; background: #2b2518; }
.status-page-nav a:nth-child(4) i { border-color: #39725d; color: #78dda9; background: #142a23; }
.status-page-nav span { min-width: 0; }
.status-page-nav strong,
.status-page-nav small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-page-nav strong { font-size: .72rem; }
.status-page-nav small { margin-top: 3px; color: #8197a5; font-size: .59rem; }
.status-effect-browser header label > small {
  color: #728a99;
  font-size: .59rem;
  line-height: 1.4;
}
.status-effect-grid article > p { min-height: 0; }
@media (max-width: 760px) {
  .status-page-nav { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 430px) {
  .status-page-nav a { min-height: 60px; padding: 9px; }
  .status-page-nav a i { width: 31px; height: 31px; }
}

/* v126: status-effect counterplay and quick-answer sections. */
.status-page-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.status-page-nav a:nth-child(5) i { border-color: #39725d; color: #78dda9; background: #142a23; }
.status-counterplay,
.status-effect-faq {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid #2c404d;
  border-radius: 8px;
  background: #0b151e;
}
.status-counterplay > header,
.status-effect-faq > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border-bottom: 1px solid #293d49;
  background: linear-gradient(100deg, #102531, #121927 55%, #171626);
}
.status-counterplay > header h2,
.status-effect-faq > header h2 {
  margin: 2px 0 5px;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
}
.status-counterplay > header p,
.status-effect-faq > header p {
  max-width: 760px;
  margin: 0;
  color: #9db0bc;
  line-height: 1.55;
}
.status-counterplay > header > a {
  display: inline-flex;
  min-height: 38px;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 15px;
  border: 1px solid #4b7780;
  border-radius: 999px;
  color: #dffbfc;
  background: #12303a;
  font-size: .68rem;
  font-weight: 900;
}
.status-counterplay > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.status-counterplay article {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 255px;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
  padding: 20px;
  border-right: 1px solid #293d49;
  background: linear-gradient(155deg, rgba(var(--effect-rgb), .11), transparent 55%);
}
.status-counterplay article:last-child { border-right: 0; }
.status-counterplay article > span {
  color: rgba(var(--effect-rgb), .72);
  font-size: .62rem;
  font-weight: 950;
}
.status-counterplay article > i {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(var(--effect-rgb), .55);
  border-radius: 7px;
  color: var(--effect-color);
  background: rgba(var(--effect-rgb), .12);
  box-shadow: 0 0 22px rgba(var(--effect-rgb), .1);
  font-size: 1.15rem;
  font-style: normal;
}
.status-counterplay article small {
  color: var(--effect-color);
  font-size: .58rem;
  font-weight: 900;
  text-transform: uppercase;
}
.status-counterplay article h3 { margin: 4px 0 7px; font-size: 1rem; }
.status-counterplay article p {
  margin: 0;
  color: #91a5b2;
  font-size: .71rem;
  line-height: 1.55;
}
.status-counterplay article > b {
  align-self: end;
  padding-top: 11px;
  border-top: 1px solid rgba(var(--effect-rgb), .25);
  color: #c7d6dc;
  font-size: .61rem;
}
.status-effect-faq > div { padding: 10px 18px 18px; }
.status-effect-faq details { border-bottom: 1px solid #263a46; }
.status-effect-faq details:last-child { border-bottom: 0; }
.status-effect-faq summary {
  display: grid;
  min-height: 62px;
  grid-template-columns: 36px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}
.status-effect-faq summary::-webkit-details-marker { display: none; }
.status-effect-faq summary > span {
  color: #56dbe5;
  font-size: .62rem;
  font-weight: 950;
}
.status-effect-faq summary > strong { color: #e6eff2; font-size: .76rem; }
.status-effect-faq summary > i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #385360;
  border-radius: 50%;
  color: #72dfe6;
  font-style: normal;
  transition: transform .2s ease;
}
.status-effect-faq details[open] summary > i { transform: rotate(45deg); }
.status-effect-faq details > p {
  max-width: 920px;
  margin: -2px 40px 18px 48px;
  color: #97abb7;
  font-size: .72rem;
  line-height: 1.6;
}
@media (max-width: 1040px) {
  .status-page-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .status-counterplay > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-counterplay article:nth-child(2) { border-right: 0; }
  .status-counterplay article:nth-child(-n+2) { border-bottom: 1px solid #293d49; }
}
@media (max-width: 760px) {
  .status-page-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-counterplay > header,
  .status-effect-faq > header { align-items: flex-start; flex-direction: column; padding: 18px; }
}
@media (max-width: 560px) {
  .status-counterplay > div { grid-template-columns: 1fr; }
  .status-counterplay article {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid #293d49;
  }
  .status-counterplay article:last-child { border-bottom: 0; }
  .status-effect-faq > div { padding: 8px 14px 14px; }
  .status-effect-faq details > p { margin-left: 0; margin-right: 0; }
}

/* v127: effect facts and shareable directory state. */
.status-effect-results > div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.status-effect-results > div > small {
  position: absolute;
  right: 0;
  bottom: -22px;
  color: #73dfe6;
  font-size: .58rem;
  font-weight: 850;
  white-space: nowrap;
}
.status-effect-results [data-effect-share] {
  border-color: #385b68;
  color: #c8ebee;
  background: #10242d;
}
.status-effect-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 0 0 13px;
  overflow: hidden;
  border: 1px solid rgba(var(--effect-rgb), .22);
  border-radius: 6px;
  background: rgba(var(--effect-rgb), .18);
}
.status-effect-facts > span {
  display: block;
  min-width: 0;
  padding: 9px 10px;
  background: #0c1720;
}
.status-effect-facts > span + span { border-left: 1px solid rgba(var(--effect-rgb), .22); }
.status-effect-facts small,
.status-effect-facts b { display: block; }
.status-effect-facts small {
  margin-bottom: 3px;
  color: var(--effect-color);
  font-size: .5rem;
  font-weight: 950;
  text-transform: uppercase;
}
.status-effect-facts b {
  color: #c7d6dc;
  font-size: .58rem;
  line-height: 1.35;
}
@media (max-width: 520px) {
  .status-effect-results {
    align-items: flex-start;
    flex-direction: column;
  }
  .status-effect-results > div {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .status-effect-results > div > small {
    position: static;
    width: 100%;
  }
}

/* v128: clean status-effect detail routes. */
.status-effect-focus {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin-top: 18px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(var(--effect-rgb), .46);
  border-radius: 8px;
  background:
    linear-gradient(105deg, rgba(var(--effect-rgb), .15), transparent 48%),
    #0b151e;
  box-shadow: inset 4px 0 0 var(--effect-color);
}
.status-effect-focus-icon {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 1px solid rgba(var(--effect-rgb), .58);
  border-radius: 8px;
  color: var(--effect-color);
  background: rgba(var(--effect-rgb), .13);
  box-shadow: 0 0 28px rgba(var(--effect-rgb), .12);
  font-size: 1.8rem;
}
.status-effect-focus h2 {
  margin: 2px 0 6px;
  font-size: clamp(1.6rem, 3vw, 2.45rem);
}
.status-effect-focus > div > p:last-of-type {
  max-width: 760px;
  margin: 0;
  color: #9eb1bc;
  line-height: 1.55;
}
.status-effect-focus-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
}
.status-effect-focus-facts span {
  min-width: 145px;
  padding: 9px 11px;
  border: 1px solid rgba(var(--effect-rgb), .26);
  border-radius: 6px;
  background: rgba(var(--effect-rgb), .07);
}
.status-effect-focus-facts small,
.status-effect-focus-facts b { display: block; }
.status-effect-focus-facts small {
  color: var(--effect-color);
  font-size: .5rem;
  font-weight: 950;
  text-transform: uppercase;
}
.status-effect-focus-facts b {
  margin-top: 3px;
  color: #d9e5e8;
  font-size: .64rem;
}
.status-effect-focus > nav {
  display: grid;
  min-width: 168px;
  gap: 8px;
}
.status-effect-focus > nav a {
  display: inline-flex;
  min-height: 39px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid rgba(var(--effect-rgb), .48);
  border-radius: 999px;
  color: #e7f7f8;
  background: rgba(var(--effect-rgb), .1);
  font-size: .64rem;
  font-weight: 900;
  text-align: center;
}
.status-effect-focus > nav a:last-child {
  border-color: #354d59;
  color: #a9bec8;
  background: #101d26;
}
@media (max-width: 860px) {
  .status-effect-focus {
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: start;
  }
  .status-effect-focus-icon { width: 58px; height: 58px; }
  .status-effect-focus > nav {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 520px) {
  .status-effect-focus {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 13px;
    padding: 17px;
  }
  .status-effect-focus-icon { width: 46px; height: 46px; font-size: 1.15rem; }
  .status-effect-focus-facts { grid-column: 1 / -1; }
  .status-effect-focus-facts span { min-width: 0; width: 100%; }
  .status-effect-focus > nav { grid-template-columns: 1fr; }
}

/* v129: mechanic navigation and related-effect discovery. */
.status-effect-detail-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.status-effect-detail-pager a {
  display: grid;
  min-height: 58px;
  align-content: center;
  gap: 4px;
  padding: 10px 14px;
  border: 1px solid #2e4652;
  border-radius: 7px;
  color: #dcebed;
  background: #0d1922;
}
.status-effect-detail-pager a:last-child { text-align: right; }
.status-effect-detail-pager small {
  color: #6e8997;
  font-size: .52rem;
  font-weight: 900;
  text-transform: uppercase;
}
.status-effect-detail-pager strong {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: .68rem;
}
.status-effect-detail-pager a:last-child strong { justify-content: flex-end; }
.status-effect-detail-pager strong span { color: #66dfe7; }
.status-effect-card-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}
.status-effect-card-actions:has(button) { grid-template-columns: 1fr 1fr; }
.status-effect-card-actions > a,
.status-effect-card-actions > button {
  display: inline-flex;
  min-width: 0;
  min-height: 39px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid rgba(var(--effect-rgb), .4);
  border-radius: 999px;
  color: #e2f4f6;
  background: rgba(var(--effect-rgb), .08);
  font-size: .58rem;
  font-weight: 900;
  cursor: pointer;
}
.status-effect-card-actions > a b,
.status-effect-card-actions > button b {
  display: grid;
  min-width: 24px;
  height: 22px;
  place-items: center;
  padding-inline: 5px;
  border-radius: 999px;
  color: #071016;
  background: var(--effect-color);
  font-size: .58rem;
}
.status-effect-card-actions > :is(a, button):is(:hover, :focus-visible) {
  border-color: var(--effect-color);
  background: rgba(var(--effect-rgb), .14);
}
.status-related-effects {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid #2c414d;
  border-radius: 8px;
  background: #0b151e;
}
.status-related-effects > header h2 {
  margin: 2px 0 5px;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
}
.status-related-effects > header > p:last-child {
  margin: 0;
  color: #8fa5b1;
}
.status-related-effects > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.status-related-effects > div > a {
  display: grid;
  min-width: 0;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: start;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(var(--effect-rgb), .3);
  border-radius: 7px;
  color: #dfecef;
  background: linear-gradient(145deg, rgba(var(--effect-rgb), .09), #0c1821 65%);
}
.status-related-effects > div > a > i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(var(--effect-rgb), .44);
  border-radius: 6px;
  color: var(--effect-color);
  background: rgba(var(--effect-rgb), .1);
  font-style: normal;
}
.status-related-effects span { min-width: 0; }
.status-related-effects small,
.status-related-effects strong { display: block; }
.status-related-effects small {
  color: var(--effect-color);
  font-size: .5rem;
  font-weight: 900;
  text-transform: uppercase;
}
.status-related-effects strong {
  margin-top: 3px;
  overflow: hidden;
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-related-effects p {
  margin: 7px 0 0;
  color: #8399a6;
  font-size: .59rem;
  line-height: 1.45;
}
.status-related-effects > div > a > b {
  align-self: center;
  color: var(--effect-color);
}
@media (max-width: 1050px) {
  .status-related-effects > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .status-effect-card-actions:has(button) { grid-template-columns: 1fr; }
  .status-related-effects { padding: 17px; }
  .status-related-effects > div { grid-template-columns: 1fr; }
}
@media (max-width: 450px) {
  .status-effect-detail-pager { grid-template-columns: 1fr; }
  .status-effect-detail-pager > span { display: none; }
  .status-effect-detail-pager a:last-child { text-align: left; }
  .status-effect-detail-pager a:last-child strong { justify-content: flex-start; }
}

/* v130: user-selected status-effect comparison. */
.status-compare-tool {
  margin: 18px;
  overflow: hidden;
  border: 1px solid #304955;
  border-radius: 8px;
  background: #09141c;
}
.status-compare-tool > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid #293f4b;
  background: linear-gradient(100deg, #10242f, #141827);
}
.status-compare-tool > header span,
.status-compare-tool > header strong { display: block; }
.status-compare-tool > header span {
  color: #69dfe7;
  font-size: .54rem;
  font-weight: 950;
  text-transform: uppercase;
}
.status-compare-tool > header strong {
  margin-top: 3px;
  color: #eef6f8;
  font-size: .9rem;
}
.status-compare-tool > header p {
  margin: 4px 0 0;
  color: #879daa;
  font-size: .64rem;
}
.status-compare-tool > header button {
  min-height: 38px;
  flex: 0 0 auto;
  padding: 0 14px;
  border: 1px solid #4b7480;
  border-radius: 999px;
  color: #def8fa;
  background: #12303a;
  font-size: .62rem;
  font-weight: 900;
}
.status-compare-selectors {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
  align-items: end;
  gap: 12px;
  padding: 16px 18px;
}
.status-compare-selectors label span {
  display: block;
  margin-bottom: 6px;
  color: #8da3af;
  font-size: .56rem;
  font-weight: 900;
  text-transform: uppercase;
}
.status-compare-selectors select {
  width: 100%;
  min-height: 44px;
  padding: 0 38px 0 12px;
  border: 1px solid #3a5663;
  border-radius: 6px;
  color: #e6f0f2;
  background: #101d27;
  font-size: .7rem;
  font-weight: 800;
}
.status-compare-selectors > b {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #665184;
  border-radius: 50%;
  color: #c4a8ec;
  background: #201a2e;
  font-size: .6rem;
}
.status-compare-output {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #293f4b;
}
.status-compare-output article {
  display: grid;
  min-width: 0;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 13px;
  padding: 18px;
  background: linear-gradient(145deg, rgba(var(--effect-rgb), .1), transparent 55%);
}
.status-compare-output article + article { border-left: 1px solid #293f4b; }
.status-compare-output article > i {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(var(--effect-rgb), .5);
  border-radius: 7px;
  color: var(--effect-color);
  background: rgba(var(--effect-rgb), .11);
  font-size: 1.15rem;
  font-style: normal;
}
.status-compare-output article small {
  color: var(--effect-color);
  font-size: .53rem;
  font-weight: 950;
  text-transform: uppercase;
}
.status-compare-output article h3 { margin: 3px 0 6px; font-size: 1.05rem; }
.status-compare-output article p {
  margin: 0;
  color: #8fa4b0;
  font-size: .65rem;
  line-height: 1.5;
}
.status-compare-output dl {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 2px 0 0;
  overflow: hidden;
  border: 1px solid rgba(var(--effect-rgb), .22);
  border-radius: 6px;
  background: rgba(var(--effect-rgb), .2);
}
.status-compare-output dl div {
  min-width: 0;
  padding: 9px;
  background: #0d1922;
}
.status-compare-output dt {
  color: var(--effect-color);
  font-size: .48rem;
  font-weight: 950;
  text-transform: uppercase;
}
.status-compare-output dd {
  margin: 4px 0 0;
  color: #cedde1;
  font-size: .57rem;
  line-height: 1.35;
}
.status-compare-output article > a {
  display: inline-flex;
  min-height: 36px;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--effect-rgb), .4);
  border-radius: 999px;
  color: #e2f4f6;
  background: rgba(var(--effect-rgb), .08);
  font-size: .58rem;
  font-weight: 900;
}
.status-compare-status {
  min-height: 24px;
  margin: 0;
  padding: 5px 18px;
  color: #6edfe7;
  font-size: .56rem;
  text-align: right;
}
@media (max-width: 740px) {
  .status-compare-tool { margin: 14px; }
  .status-compare-tool > header { align-items: flex-start; flex-direction: column; }
  .status-compare-selectors { grid-template-columns: 1fr; }
  .status-compare-selectors > b { justify-self: center; }
  .status-compare-output { grid-template-columns: 1fr; }
  .status-compare-output article + article {
    border-top: 1px solid #293f4b;
    border-left: 0;
  }
}
@media (max-width: 440px) {
  .status-compare-output dl { grid-template-columns: 1fr; }
}

/* v131: focused mechanic champion roster. */
.status-selected-roster {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid rgba(var(--effect-rgb), .42);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(var(--effect-rgb), .1), transparent 32%),
    #0a141c;
}
.status-selected-roster > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 390px);
  align-items: end;
  gap: 24px;
  padding: 20px;
  border-bottom: 1px solid rgba(var(--effect-rgb), .24);
}
.status-selected-roster > header h2 {
  margin: 3px 0 6px;
  color: #f0f6f8;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}
.status-selected-roster > header > div > p:last-child {
  max-width: 760px;
  margin: 0;
  color: #91a5b1;
  font-size: .72rem;
  line-height: 1.55;
}
.status-selected-roster label span,
.status-selected-roster label small {
  display: block;
}
.status-selected-roster label span {
  margin-bottom: 6px;
  color: var(--effect-color);
  font-size: .55rem;
  font-weight: 950;
  text-transform: uppercase;
}
.status-selected-roster label input {
  width: 100%;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid rgba(var(--effect-rgb), .42);
  border-radius: 6px;
  color: #edf5f7;
  background: #0d1b24;
  font-size: .72rem;
}
.status-selected-roster label input:focus {
  border-color: var(--effect-color);
  outline: 2px solid rgba(var(--effect-rgb), .16);
}
.status-selected-roster label small {
  margin-top: 6px;
  color: #7f96a3;
  font-size: .56rem;
  text-align: right;
}
.status-selected-roster label small b { color: var(--effect-color); }
.status-selected-roster > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 16px;
}
.status-selected-roster > div > a {
  display: grid;
  min-width: 0;
  grid-template-columns: 50px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #263a45;
  border-radius: 7px;
  color: #e5eff2;
  background: #0f1b24;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.status-selected-roster > div > a[hidden] { display: none !important; }
.status-selected-roster > div > a:is(:hover, :focus-visible) {
  border-color: rgba(var(--effect-rgb), .68);
  background: rgba(var(--effect-rgb), .11);
  transform: translateY(-1px);
}
.status-selected-roster img {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(var(--effect-rgb), .42);
  border-radius: 6px;
  object-fit: cover;
}
.status-selected-roster a span { min-width: 0; }
.status-selected-roster a :is(small, strong, em) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-selected-roster a small {
  color: var(--effect-color);
  font-size: .48rem;
  font-weight: 950;
  text-transform: uppercase;
}
.status-selected-roster a strong {
  margin-top: 2px;
  font-size: .7rem;
}
.status-selected-roster a em {
  margin-top: 3px;
  color: #849aa7;
  font-size: .57rem;
  font-style: normal;
}
.status-selected-roster a > b {
  color: var(--effect-color);
  font-size: .8rem;
}
.status-selected-roster > p {
  margin: 0;
  padding: 24px;
  color: #91a5b1;
  text-align: center;
}
@media (max-width: 1050px) {
  .status-selected-roster > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .status-selected-roster > header { grid-template-columns: 1fr; gap: 14px; }
  .status-selected-roster > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .status-selected-roster > header { padding: 17px; }
  .status-selected-roster > div { grid-template-columns: 1fr; padding: 12px; }
}

/* v132: mechanic-specific detail hero. */
.status-effects-page.is-effect-detail .status-effects-hero h1 {
  max-width: 980px;
  font-size: clamp(2.35rem, 5vw, 5rem);
  line-height: .98;
  overflow-wrap: anywhere;
}
.status-effects-page.is-effect-detail .status-effects-hero aside strong {
  line-height: 1.08;
}
.status-effects-page.is-effect-detail .status-effects-hero aside article:nth-child(2) strong {
  color: #c7acf0;
  font-size: clamp(.72rem, 1.15vw, 1rem);
  overflow-wrap: anywhere;
}
.status-effects-page.is-effect-detail .status-effects-hero aside article:nth-child(3) strong {
  color: #f0bd5d;
}
@media (max-width: 620px) {
  .status-effects-page.is-effect-detail .status-effects-hero h1 {
    font-size: clamp(2.2rem, 12vw, 3.4rem);
  }
}

/* v133: queue-aware game modes reference. */
.game-modes-page {
  --mode-cyan: #56deec;
  --mode-gold: #f1c85d;
  --mode-violet: #b992f3;
  --mode-green: #75e39b;
  --mode-ice: #8fcdf6;
  --mode-rose: #ff87ad;
  background: #080d13;
}
.game-modes-page main {
  width: min(1440px, calc(100% - 32px));
  margin: 20px auto 72px;
}
.modes-hero {
  position: relative;
  min-height: clamp(420px, 62vh, 650px);
  overflow: hidden;
  border: 1px solid #263746;
  border-radius: 8px;
  background: #0c121a;
}
.modes-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 28%;
}
.modes-hero-shade {
  position: absolute;
  inset: 0;
  background: rgba(4, 9, 15, .66);
}
.modes-hero-copy {
  position: relative;
  z-index: 1;
  width: min(760px, 68%);
  padding: clamp(48px, 8vw, 110px) clamp(28px, 7vw, 96px) 54px;
}
.modes-hero-copy h1 {
  max-width: 760px;
  margin: 8px 0 18px;
  color: #fff;
  font-size: clamp(2.8rem, 6vw, 5.9rem);
  line-height: .96;
  letter-spacing: 0;
}
.modes-hero-copy > p:not(.eyebrow) {
  max-width: 680px;
  margin: 0;
  color: #c7d7df;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.65;
}
.modes-hero-copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.modes-hero-copy > div a,
.swift-rules > header > a,
.companion-mode-support > header > a,
.mode-sources nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid rgba(86, 222, 236, .45);
  border-radius: 999px;
  background: #10222b;
  color: #a9f4fa;
  font-size: .82rem;
  font-weight: 900;
  text-decoration: none;
}
.modes-hero-copy > div a:first-child {
  border-color: var(--mode-cyan);
  background: var(--mode-cyan);
  color: #071015;
}
.modes-hero > aside {
  position: absolute;
  right: clamp(18px, 4vw, 54px);
  bottom: 34px;
  z-index: 2;
  display: grid;
  gap: 10px;
  width: min(330px, 29%);
}
.modes-hero > aside article {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px;
  border: 1px solid rgba(185, 146, 243, .32);
  border-radius: 6px;
  background: rgba(7, 13, 20, .9);
}
.modes-hero > aside .league-step-number {
  flex: 0 0 44px;
}
.modes-hero > aside :is(small, strong) { display: block; }
.modes-hero > aside small {
  color: #8ba1ad;
  font-size: .62rem;
  text-transform: uppercase;
}
.modes-hero > aside strong {
  margin-top: 3px;
  color: #edf8fa;
  font-size: .84rem;
}
.modes-jumps {
  position: sticky;
  top: 68px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 34px;
  padding: 10px;
  overflow-x: auto;
  border: 1px solid #21313d;
  border-radius: 7px;
  background: rgba(8, 13, 19, .96);
  scrollbar-width: thin;
}
.modes-jumps span {
  padding: 0 9px;
  color: #788d99;
  font-size: .66rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}
.modes-jumps a {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid #293c49;
  border-radius: 999px;
  color: #bdd0d9;
  font-size: .74rem;
  font-weight: 850;
  text-decoration: none;
}
.modes-jumps a:is(:hover, :focus-visible) {
  border-color: var(--mode-cyan);
  color: #fff;
}
.mode-map-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 44px;
}
.mode-map-gallery a {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 15px;
  min-width: 0;
  padding: 14px;
  overflow: hidden;
  border: 1px solid #263743;
  border-radius: 8px;
  background: #0d151e;
  color: inherit;
  text-decoration: none;
}
.mode-map-gallery a:is(:hover, :focus-visible) {
  border-color: rgba(86, 222, 236, .68);
  background: #101b25;
}
.mode-map-gallery img {
  width: 96px;
  height: 96px;
  padding: 7px;
  border: 1px solid #2a3c49;
  border-radius: 7px;
  background: #091018;
  object-fit: contain;
}
.mode-map-gallery span {
  min-width: 0;
}
.mode-map-gallery :is(small, strong, em) {
  display: block;
}
.mode-map-gallery small {
  color: var(--mode-cyan);
  font-size: .61rem;
  font-weight: 900;
  text-transform: uppercase;
}
.mode-map-gallery strong {
  margin-top: 4px;
  color: #f2f8fa;
  font-size: 1rem;
}
.mode-map-gallery em {
  margin-top: 5px;
  color: #859aa5;
  font-size: .7rem;
  font-style: normal;
}
.mode-map-gallery > a > i {
  color: #647b87;
  font-size: 1.05rem;
}
.mode-finder,
.swift-rules,
.training-modes,
.special-modes,
.mode-comparison,
.companion-mode-support,
.mode-faq,
.mode-sources {
  margin-top: 44px;
}
.mode-finder > header,
.swift-rules > header,
.training-modes > header,
.special-modes > header,
.mode-comparison > header,
.companion-mode-support > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 18px;
}
.game-modes-page section > header h2,
.mode-sources h2 {
  margin: 4px 0 0;
  color: #f3f8fa;
  font-size: clamp(1.65rem, 3vw, 2.65rem);
  letter-spacing: 0;
}
.game-modes-page section > header > p,
.mode-sources > div > p:last-child {
  max-width: 610px;
  margin: 0;
  color: #8fa4af;
  line-height: 1.6;
}
.mode-finder > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.mode-finder > div a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 118px;
  padding: 17px;
  border: 1px solid #263743;
  border-radius: 7px;
  background: #0d151e;
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease;
}
.mode-finder > div a:is(:hover, :focus-visible) {
  border-color: rgba(86, 222, 236, .72);
  transform: translateY(-2px);
}
.mode-choice-icon,
.training-mode-icon {
  display: inline-grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border: 1px solid rgba(86, 222, 236, .38);
  border-radius: 7px;
  background: #102630;
  color: var(--mode-cyan);
  font-size: 1.35rem;
}
.mode-finder > div a:nth-child(2) .mode-choice-icon {
  border-color: rgba(117, 227, 155, .42);
  background: #10251d;
  color: var(--mode-green);
}
.mode-finder > div a:nth-child(3) .mode-choice-icon {
  border-color: rgba(241, 200, 93, .42);
  background: #27210f;
  color: var(--mode-gold);
}
.mode-finder > div a:nth-child(4) .mode-choice-icon {
  border-color: rgba(143, 205, 246, .42);
  background: #10212c;
  color: var(--mode-ice);
}
.mode-finder > div a:nth-child(5) .mode-choice-icon {
  border-color: rgba(255, 135, 173, .42);
  background: #28131d;
  color: var(--mode-rose);
}
.mode-finder > div a:nth-child(6) .mode-choice-icon {
  border-color: rgba(185, 146, 243, .42);
  background: #20172c;
  color: var(--mode-violet);
}
.mode-finder :is(small, strong, em) { display: block; }
.mode-finder small {
  color: var(--mode-cyan);
  font-size: .63rem;
  font-weight: 900;
  text-transform: uppercase;
}
.mode-finder strong {
  margin-top: 3px;
  color: #fff;
  font-size: 1.02rem;
}
.mode-finder em {
  margin-top: 5px;
  color: #8fa3ae;
  font-size: .75rem;
  font-style: normal;
  line-height: 1.45;
}
.mode-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 44px;
}
.mode-card {
  --mode-accent: var(--mode-cyan);
  overflow: hidden;
  border: 1px solid #263743;
  border-top: 4px solid var(--mode-accent);
  border-radius: 8px;
  background: #0d141d;
}
.mode-card.is-gold { --mode-accent: var(--mode-gold); }
.mode-card.is-violet { --mode-accent: var(--mode-violet); }
.mode-card.is-green { --mode-accent: var(--mode-green); }
.mode-card.is-ice { --mode-accent: var(--mode-ice); }
.mode-card.is-rose { --mode-accent: var(--mode-rose); }
.mode-card-art {
  position: relative;
  height: 176px;
  overflow: hidden;
  border-bottom: 1px solid #263743;
  background: #091018;
}
.mode-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mode-card:nth-child(-n+3) .mode-card-art img,
.mode-card:nth-child(5) .mode-card-art img {
  object-fit: contain;
  padding: 24px;
  background: #0a1219;
}
.mode-card-art::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(to top, rgba(7, 12, 18, .8), transparent 58%);
}
.mode-card-art > i {
  position: absolute;
  right: 17px;
  bottom: 15px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid color-mix(in srgb, var(--mode-accent) 58%, transparent);
  border-radius: 7px;
  background: rgba(7, 13, 20, .88);
  color: var(--mode-accent);
  font-size: 1.35rem;
}
.mode-card > header { padding: 24px 24px 20px; }
.mode-card > header > span {
  color: var(--mode-accent);
  font-size: .65rem;
  font-weight: 950;
}
.mode-card > header h2 {
  margin: 7px 0 7px;
  font-size: clamp(1.45rem, 2.5vw, 2.2rem);
}
.mode-card > header p {
  margin: 0;
  color: #99adb7;
  line-height: 1.5;
}
.mode-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid #24333f;
  border-bottom: 1px solid #24333f;
}
.mode-card dl div {
  min-width: 0;
  padding: 14px 18px;
  border-right: 1px solid #24333f;
  border-bottom: 1px solid #24333f;
}
.mode-card dl div:nth-child(even) { border-right: 0; }
.mode-card dl div:nth-last-child(-n+2) { border-bottom: 0; }
.mode-card dt {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #718894;
  font-size: .58rem;
  font-weight: 900;
  text-transform: uppercase;
}
.mode-card dt i {
  color: var(--mode-accent);
  font-size: .72rem;
}
.mode-card dd {
  margin: 4px 0 0;
  color: #e3edf1;
  font-size: .78rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.mode-card-read {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px;
}
.mode-card-read p {
  margin: 0;
  color: #8fa4af;
  font-size: .76rem;
  line-height: 1.55;
}
.mode-card-read b {
  display: block;
  margin-bottom: 5px;
  color: var(--mode-accent);
  font-size: .62rem;
  text-transform: uppercase;
}
.mode-ff-time {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  margin: 0 18px 18px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--mode-accent) 32%, #263743);
  border-radius: 7px;
  background: color-mix(in srgb, var(--mode-accent) 7%, #0a1118);
}
.mode-ff-time > i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--mode-accent) 15%, #111a22);
  color: var(--mode-accent);
  font-size: 1.05rem;
}
.mode-ff-time span,
.mode-ff-time :is(small, strong, em) { min-width: 0; }
.mode-ff-time :is(small, strong, em) { display: block; }
.mode-ff-time small {
  color: var(--mode-accent);
  font-size: .59rem;
  font-weight: 900;
  text-transform: uppercase;
}
.mode-ff-time strong {
  margin-top: 2px;
  color: #f4fafc;
  font-size: 1.18rem;
}
.mode-ff-time em {
  margin-top: 3px;
  color: #8fa4af;
  font-size: .7rem;
  font-style: normal;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.mode-card > footer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, .025);
}
.mode-card > footer span {
  color: var(--mode-accent);
  font-size: .62rem;
  font-weight: 900;
  text-transform: uppercase;
}
.mode-card > footer strong {
  color: #bdcbd2;
  font-size: .72rem;
  line-height: 1.45;
}
.swift-rules {
  padding: 26px;
  border: 1px solid rgba(117, 227, 155, .32);
  border-radius: 8px;
  background: #0b1715;
}
.swift-rules > header { align-items: center; }
.swift-rule-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.swift-rule-track article {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(117, 227, 155, .18);
  border-radius: 6px;
  background: #0c1318;
}
.swift-rule-track .league-step-number { margin-bottom: 15px; }
.swift-rule-track :is(small, strong) { display: block; }
.swift-rule-track small {
  color: var(--mode-green);
  font-size: .59rem;
  font-weight: 900;
  text-transform: uppercase;
}
.swift-rule-track small i {
  margin-right: 4px;
  font-size: .72rem;
}
.swift-rule-track strong {
  margin-top: 4px;
  color: #e9f7ee;
  font-size: .88rem;
}
.swift-rule-track p {
  margin: 8px 0 0;
  color: #8fa49b;
  font-size: .71rem;
  line-height: 1.5;
}
.training-modes > div,
.special-modes > div,
.companion-mode-support > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.training-modes article,
.special-modes article,
.companion-mode-support article {
  min-width: 0;
  padding: 19px;
  border: 1px solid #263743;
  border-radius: 7px;
  background: #0d151e;
}
.training-mode-icon {
  margin-bottom: 16px;
  border-color: rgba(185, 146, 243, .38);
  background: #20172c;
  color: var(--mode-violet);
}
.training-modes h3,
.special-modes h3,
.companion-mode-support h3 {
  margin: 0;
  color: #f2f7f9;
  font-size: 1.05rem;
}
.training-modes p,
.special-modes p,
.companion-mode-support p {
  margin: 8px 0 0;
  color: #8fa4af;
  font-size: .76rem;
  line-height: 1.55;
}
.training-modes article > strong {
  display: block;
  margin-top: 14px;
  color: var(--mode-violet);
  font-size: .65rem;
  text-transform: uppercase;
}
.special-modes > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.special-modes article {
  border-top: 3px solid var(--mode-gold);
}
.special-modes article.is-mayhem { border-top-color: var(--mode-ice); }
.special-modes article.is-rotating { border-top-color: var(--mode-rose); }
.special-mode-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  color: var(--mode-gold);
}
.special-mode-heading i {
  font-size: 1.05rem;
}
.special-mode-heading span {
  display: block;
  font-size: .6rem;
  font-weight: 900;
  text-transform: uppercase;
}
.special-modes article.is-mayhem .special-mode-heading { color: var(--mode-ice); }
.special-modes article.is-rotating .special-mode-heading { color: var(--mode-rose); }
.special-modes article > img {
  width: calc(100% + 38px);
  height: 150px;
  margin: -19px -19px 18px;
  border-bottom: 1px solid #263743;
  object-fit: cover;
}
.special-modes dl {
  display: grid;
  gap: 7px;
  margin: 16px 0 0;
}
.special-modes dl div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 9px;
  padding-top: 8px;
  border-top: 1px solid #253540;
}
.special-modes dt {
  color: #728894;
  font-size: .6rem;
  font-weight: 900;
  text-transform: uppercase;
}
.special-modes dd {
  margin: 0;
  color: #d4e0e5;
  font-size: .72rem;
  font-weight: 750;
}
.mode-table-wrap {
  overflow-x: auto;
  border: 1px solid #263743;
  border-radius: 7px;
  scrollbar-width: thin;
}
.mode-comparison table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  background: #0c141c;
}
.mode-comparison th,
.mode-comparison td {
  padding: 15px 17px;
  border-bottom: 1px solid #22323e;
  text-align: left;
}
.mode-comparison thead th {
  background: #111e27;
  color: #7fe2eb;
  font-size: .64rem;
  text-transform: uppercase;
}
.mode-comparison tbody th {
  color: #f2f7f9;
  font-size: .8rem;
}
.mode-comparison td {
  color: #9eb0b9;
  font-size: .74rem;
}
.mode-table-time {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid rgba(79, 220, 232, .35);
  border-radius: 5px;
  background: rgba(79, 220, 232, .08);
  color: var(--mode-cyan);
  font-size: .77rem;
}
.mode-table-time.is-swift {
  border-color: rgba(117, 227, 155, .35);
  background: rgba(117, 227, 155, .08);
  color: var(--mode-green);
}
.mode-table-time.is-aram {
  border-color: rgba(123, 203, 255, .35);
  background: rgba(123, 203, 255, .08);
  color: var(--mode-ice);
}
.mode-comparison tbody tr:last-child > * { border-bottom: 0; }
.companion-mode-support > div {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.companion-mode-support article { border-top: 3px solid #647681; }
.companion-mode-support article.is-full { border-top-color: var(--mode-green); }
.companion-mode-support article.is-partial { border-top-color: var(--mode-ice); }
.companion-mode-support article.is-test { border-top-color: var(--mode-violet); }
.companion-mode-support article.is-none { border-top-color: #74818a; }
.companion-mode-support article > span {
  display: block;
  margin-bottom: 7px;
  color: #8da2ad;
  font-size: .6rem;
  font-weight: 900;
  text-transform: uppercase;
}
.companion-mode-support article > i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border: 1px solid #31424e;
  border-radius: 6px;
  background: #111c25;
  color: #8da2ad;
  font-size: 1rem;
}
.companion-mode-support article.is-full > i { color: var(--mode-green); }
.companion-mode-support article.is-partial > i { color: var(--mode-ice); }
.companion-mode-support article.is-test > i { color: var(--mode-violet); }
.mode-votes {
  margin-top: 44px;
  padding: 26px;
  border: 1px solid #293a46;
  border-radius: 8px;
  background: #0a121a;
}
.mode-votes > header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 18px;
}
.mode-votes > header h2 { margin: 5px 0 0; }
.mode-votes > header > p {
  max-width: 470px;
  margin: 0;
  color: #8fa4af;
  line-height: 1.55;
}
.mode-vote-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.mode-vote-track article {
  min-width: 0;
  padding: 17px;
  border: 1px solid #293a46;
  border-top: 3px solid var(--mode-cyan);
  border-radius: 7px;
  background: #0e161f;
}
.mode-vote-track article.is-afk { border-top-color: var(--mode-violet); }
.mode-vote-track article.is-standard { border-top-color: var(--mode-gold); }
.mode-vote-track article.is-swift { border-top-color: var(--mode-green); }
.mode-vote-track article.is-aram { border-top-color: var(--mode-ice); }
.mode-vote-track .league-step-number { margin-bottom: 14px; }
.mode-vote-track :is(small, strong) { display: block; }
.mode-vote-track small {
  color: #7f96a2;
  font-size: .59rem;
  font-weight: 900;
  text-transform: uppercase;
}
.mode-vote-track strong {
  margin-top: 4px;
  color: #f4fafc;
  font-size: 1.25rem;
}
.mode-vote-track p {
  margin: 8px 0 0;
  color: #91a5af;
  font-size: .71rem;
  line-height: 1.55;
}
.mode-votes > footer {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #263743;
  border-radius: 7px;
  background: #101a23;
}
.mode-votes > footer > i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background: rgba(79, 220, 232, .1);
  color: var(--mode-cyan);
}
.mode-votes > footer p {
  margin: 0;
  color: #91a5af;
  font-size: .74rem;
  line-height: 1.5;
}
.mode-votes > footer strong { color: #eaf5f7; }
.mode-votes > footer a {
  color: var(--mode-cyan);
  font-size: .72rem;
  font-weight: 850;
  white-space: nowrap;
}
.mode-faq {
  display: grid;
  grid-template-columns: minmax(230px, .65fr) 1fr;
  gap: 10px 24px;
}
.mode-faq > header { grid-row: 1 / span 4; }
.mode-faq details {
  border: 1px solid #263743;
  border-radius: 6px;
  background: #0d151d;
}
.mode-faq summary {
  padding: 17px 19px;
  color: #e8f2f5;
  font-size: .84rem;
  font-weight: 850;
  cursor: pointer;
}
.mode-faq details p {
  margin: 0;
  padding: 0 19px 18px;
  color: #91a5af;
  line-height: 1.6;
}
.mode-sources {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 26px;
  border: 1px solid #2a3b47;
  border-radius: 8px;
  background: #101720;
}
.mode-sources > div { max-width: 680px; }
.mode-sources nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
@media (max-width: 1100px) {
  .mode-map-gallery { grid-template-columns: 1fr; }
  .swift-rule-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .training-modes > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .special-modes > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .companion-mode-support > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .game-modes-page main { width: min(100% - 20px, 1440px); }
  .modes-hero { min-height: 560px; }
  .modes-hero-copy {
    width: auto;
    padding: 48px 24px 170px;
  }
  .modes-hero > aside {
    right: 20px;
    bottom: 20px;
    left: 20px;
    grid-template-columns: 1fr 1fr;
    width: auto;
  }
  .mode-finder > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode-card-grid { grid-template-columns: 1fr; }
  .mode-votes > header { align-items: flex-start; flex-direction: column; }
  .mode-vote-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode-votes > footer { grid-template-columns: 38px minmax(0, 1fr); }
  .mode-votes > footer a { grid-column: 2; white-space: normal; }
  .mode-finder > header,
  .swift-rules > header,
  .training-modes > header,
  .special-modes > header,
  .mode-comparison > header,
  .companion-mode-support > header,
  .mode-sources { align-items: flex-start; flex-direction: column; }
  .mode-sources nav { justify-content: flex-start; }
  .mode-faq { grid-template-columns: 1fr; }
  .mode-faq > header { grid-row: auto; }
}
@media (max-width: 580px) {
  .modes-hero-copy h1 { font-size: clamp(2.5rem, 13vw, 3.8rem); }
  .modes-hero > aside { grid-template-columns: 1fr; }
  .modes-hero { min-height: 660px; }
  .modes-hero-copy { padding-bottom: 260px; }
  .modes-jumps { top: 59px; }
  .mode-finder > div,
  .mode-map-gallery,
  .training-modes > div,
  .special-modes > div,
  .companion-mode-support > div,
  .mode-vote-track { grid-template-columns: 1fr; }
  .mode-card dl,
  .mode-card-read { grid-template-columns: 1fr; }
  .mode-card dl div,
  .mode-card dl div:nth-child(even),
  .mode-card dl div:nth-last-child(-n+2) {
    border-right: 0;
    border-bottom: 1px solid #24333f;
  }
  .mode-card dl div:last-child { border-bottom: 0; }
  .mode-card > footer { grid-template-columns: 1fr; }
  .mode-votes { padding: 18px; }
  .mode-ff-time { grid-template-columns: 40px minmax(0, 1fr); }
  .mode-ff-time > i { width: 40px; height: 40px; }
  .swift-rules { padding: 18px; }
  .swift-rule-track { grid-template-columns: 1fr; }
  .mode-map-gallery a {
    grid-template-columns: 72px minmax(0, 1fr) 20px;
  }
  .mode-map-gallery img {
    width: 72px;
    height: 72px;
  }
}

/* Smurfing and alternate-account policy reference */
.accounts-policy-page {
  --accounts-cyan: #58d9e8;
  --accounts-green: #54d9a0;
  --accounts-gold: #e7bc58;
  --accounts-red: #ff7187;
}
.accounts-policy-page main { width: min(1180px, calc(100% - 32px)); }
.accounts-hero {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 0;
  background:
    linear-gradient(90deg, rgba(5, 15, 23, .98) 0%, rgba(8, 18, 28, .94) 56%, rgba(8, 15, 25, .68) 100%),
    url("/league/assets/vex-social-20260718.jpg") 82% center / cover no-repeat;
}
.accounts-hero::before {
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--accounts-cyan), #9e72f2 58%, var(--accounts-gold));
}
.accounts-hero .conduct-hero-copy {
  width: 100%;
  min-height: 390px;
  padding: 52px 46px 38px;
}
.accounts-hero .conduct-hero-actions .is-secondary {
  color: #c6e9ed;
  border-color: rgba(88, 217, 232, .4);
  background: rgba(9, 19, 26, .8);
}
.accounts-hero > .accounts-hero-verdict {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 0;
  border-top: 1px solid rgba(88, 217, 232, .2);
  background: rgba(88, 217, 232, .16);
}
.accounts-hero-verdict article {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 2px 12px;
  align-content: center;
  min-height: 124px;
  padding: 18px 20px;
  border: 0;
  border-top: 3px solid var(--accounts-cyan);
  background: rgba(8, 17, 24, .96);
}
.accounts-hero-verdict article.is-allowed { border-top-color: var(--accounts-green); }
.accounts-hero-verdict article.is-warning { border-top-color: var(--accounts-gold); }
.accounts-hero-verdict article.is-danger { border-top-color: var(--accounts-red); }
.accounts-hero-verdict i {
  grid-row: 1 / 4;
  align-self: center;
  color: var(--accounts-cyan);
  font-size: 1.65rem;
}
.accounts-hero-verdict .is-allowed i { color: var(--accounts-green); }
.accounts-hero-verdict .is-warning i { color: var(--accounts-gold); }
.accounts-hero-verdict .is-danger i { color: var(--accounts-red); }
.accounts-hero-verdict span {
  color: #8fa6b2;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.accounts-hero-verdict strong { color: #f4fbfc; font-size: 1.05rem; }
.accounts-hero-verdict p { margin: 3px 0 0; color: #a8bac2; font-size: .82rem; line-height: 1.45; }
.accounts-definition,
.accounts-regions,
.accounts-examples,
.accounts-linking {
  margin-top: 24px;
  border: 1px solid rgba(111, 151, 165, .2);
  background: linear-gradient(145deg, rgba(13, 23, 31, .98), rgba(9, 15, 21, .98));
}
.accounts-definition > header,
.accounts-regions > header,
.accounts-examples > header,
.accounts-linking > div:first-child {
  padding: 26px 28px 20px;
  border-bottom: 1px solid rgba(111, 151, 165, .16);
}
.accounts-definition h2,
.accounts-regions h2,
.accounts-examples h2,
.accounts-linking h2 {
  margin: 4px 0 8px;
  color: #f4fbfc;
  font-size: clamp(1.65rem, 3vw, 2.45rem);
  line-height: 1.08;
}
.accounts-definition header > p:last-child,
.accounts-regions header > p:last-child,
.accounts-examples header > p:last-child,
.accounts-linking > div:first-child > p:last-child {
  max-width: 850px;
  margin: 0;
  color: #a9bbc3;
  line-height: 1.6;
}
.accounts-definition-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
  padding: 24px 28px;
}
.accounts-definition-grid article {
  padding: 22px;
  border: 1px solid rgba(88, 217, 232, .22);
  background: rgba(14, 28, 36, .82);
}
.accounts-definition-grid article.is-smurf {
  border-color: rgba(255, 113, 135, .3);
  background: rgba(42, 17, 27, .58);
}
.accounts-definition-icon {
  display: grid;
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  place-items: center;
  border: 1px solid rgba(88, 217, 232, .35);
  color: var(--accounts-cyan);
  background: rgba(88, 217, 232, .09);
}
.is-smurf .accounts-definition-icon {
  border-color: rgba(255, 113, 135, .4);
  color: var(--accounts-red);
  background: rgba(255, 113, 135, .08);
}
.accounts-definition-grid article > span {
  color: var(--accounts-cyan);
  font-size: .72rem;
  font-weight: 850;
  text-transform: uppercase;
}
.accounts-definition-grid .is-smurf > span { color: #ff9eac; }
.accounts-definition-grid h3 { margin: 7px 0 9px; color: #f4fbfc; font-size: 1.3rem; }
.accounts-definition-grid p { margin: 0; color: #a9bbc3; line-height: 1.58; }
.accounts-not-equal {
  display: grid;
  align-content: center;
  justify-items: center;
  color: #899da7;
  text-align: center;
}
.accounts-not-equal strong { color: var(--accounts-gold); font-size: 3.2rem; line-height: 1; }
.accounts-not-equal span { margin-top: 8px; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.accounts-definition > aside,
.accounts-linking > aside {
  display: flex;
  gap: 10px;
  padding: 15px 28px;
  border-top: 1px solid rgba(231, 188, 88, .22);
  color: #b8c8ce;
  background: rgba(231, 188, 88, .06);
}
.accounts-definition > aside strong,
.accounts-linking > aside strong { flex: 0 0 auto; color: #f0cf7d; }
.accounts-region-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 28px;
}
.accounts-region-board > article {
  min-height: 180px;
  padding: 22px;
  border: 1px solid rgba(88, 217, 232, .2);
  background: rgba(11, 26, 35, .9);
}
.accounts-region-badge { display: flex; align-items: center; gap: 12px; color: var(--accounts-cyan); }
.accounts-region-badge i,
.accounts-region-badge strong { font-size: 2rem; }
.accounts-region-board article > span {
  display: block;
  margin-top: 18px;
  color: #f0f8fa;
  font-size: 1.12rem;
  font-weight: 800;
}
.accounts-region-board article > p { margin: 7px 0 0; color: #9eb1ba; line-height: 1.5; }
.accounts-region-owner { display: grid; justify-items: center; text-align: center; }
.accounts-region-owner img {
  width: 112px;
  height: 112px;
  border: 3px solid rgba(231, 188, 88, .64);
  box-shadow: 0 0 28px rgba(158, 114, 242, .22);
}
.accounts-region-owner span {
  margin-top: 12px;
  color: var(--accounts-gold);
  font-size: .72rem;
  font-weight: 850;
  text-transform: uppercase;
}
.accounts-region-owner strong { max-width: 190px; margin-top: 4px; color: #f4fbfc; line-height: 1.25; }
.accounts-region-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 28px 28px;
}
.accounts-region-rules article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(111, 151, 165, .18);
  background: rgba(8, 16, 22, .72);
}
.accounts-region-rules strong { color: #e8f5f7; }
.accounts-region-rules p { margin: 5px 0 0; color: #98acb5; font-size: .82rem; line-height: 1.45; }
.accounts-regions > aside {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  padding: 18px 28px;
  border-top: 1px solid rgba(88, 217, 232, .18);
  background: rgba(88, 217, 232, .05);
}
.accounts-regions > aside > i { color: var(--accounts-cyan); font-size: 1.6rem; }
.accounts-regions > aside strong { color: #edf9fa; }
.accounts-regions > aside p { margin: 4px 0 8px; color: #a2b5bd; line-height: 1.5; }
.accounts-regions > aside a,
.accounts-sources a { color: #71e4ef; font-weight: 750; }
.accounts-example-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 24px 28px 28px;
}
.accounts-example-grid article {
  min-height: 180px;
  padding: 19px;
  border: 1px solid rgba(84, 217, 160, .23);
  border-top: 4px solid var(--accounts-green);
  background: rgba(10, 31, 27, .56);
}
.accounts-example-grid article.is-risk {
  border-color: rgba(255, 113, 135, .25);
  border-top-color: var(--accounts-red);
  background: rgba(39, 15, 23, .54);
}
.accounts-example-grid span {
  display: flex;
  gap: 7px;
  align-items: center;
  color: #73e2ae;
  font-size: .7rem;
  font-weight: 850;
  text-transform: uppercase;
}
.accounts-example-grid .is-risk span { color: #ff96a6; }
.accounts-example-grid h3 { margin: 15px 0 8px; color: #f3fafb; font-size: 1.08rem; }
.accounts-example-grid p { margin: 0; color: #a2b5bd; font-size: .86rem; line-height: 1.55; }
.accounts-sources { margin-top: 24px; }
.accounts-link-diagram {
  display: grid;
  grid-template-columns: 1fr 150px 1fr;
  align-items: center;
  gap: 12px;
  padding: 26px 28px;
}
.accounts-link-diagram article {
  display: grid;
  min-height: 130px;
  place-items: center;
  border: 1px solid rgba(88, 217, 232, .23);
  color: #eaf7f8;
  background: rgba(12, 28, 37, .8);
}
.accounts-link-diagram article i { color: var(--accounts-cyan); font-size: 2.1rem; }
.accounts-link-diagram > div {
  display: grid;
  justify-items: center;
  gap: 5px;
  color: #9fb2ba;
  text-align: center;
}
.accounts-link-diagram > div i { color: var(--accounts-gold); font-size: 2rem; }
.accounts-link-diagram .is-enforcement {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(255, 113, 135, .3);
  color: #ffadba;
  background: rgba(255, 113, 135, .06);
}
.accounts-check,
.accounts-authority { margin-top: 24px; }
@media (max-width: 900px) {
  .accounts-definition-grid,
  .accounts-region-board { grid-template-columns: 1fr; }
  .accounts-not-equal { min-height: 70px; }
  .accounts-region-owner { grid-row: 1; }
  .accounts-example-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .accounts-policy-page main { width: min(100% - 20px, 1180px); }
  .accounts-hero .conduct-hero-copy {
    min-height: 0;
    padding: 42px 20px 26px;
  }
  .accounts-hero > .accounts-hero-verdict {
    grid-template-columns: 1fr;
    border-top: 1px solid rgba(88, 217, 232, .18);
  }
  .accounts-hero-verdict article { min-height: 104px; }
  .accounts-definition > header,
  .accounts-regions > header,
  .accounts-examples > header,
  .accounts-linking > div:first-child,
  .accounts-definition-grid,
  .accounts-region-board,
  .accounts-example-grid,
  .accounts-link-diagram { padding-left: 17px; padding-right: 17px; }
  .accounts-region-rules { grid-template-columns: 1fr; padding: 0 17px 20px; }
  .accounts-example-grid { grid-template-columns: 1fr; }
  .accounts-definition > aside,
  .accounts-linking > aside { display: grid; padding: 15px 17px; }
  .accounts-regions > aside { padding: 17px; }
  .accounts-link-diagram { grid-template-columns: 1fr; }
  .accounts-link-diagram > div:not(.is-enforcement) { min-height: 60px; }
  .accounts-link-diagram .is-enforcement { grid-column: 1; }
}

/* v110: keep copy-ready account explanations readable at every width. */
.accounts-copy {
  align-items: start;
}
.accounts-copy > div,
.accounts-copy .conduct-reply,
.accounts-copy .conduct-reply-options,
.accounts-copy .conduct-reply-options article,
.accounts-copy .conduct-reply-options blockquote {
  min-width: 0;
}
.accounts-copy .conduct-reply-options {
  grid-template-columns: 1fr;
}
.accounts-copy .conduct-reply-options article {
  display: grid;
  grid-template-columns: minmax(90px, .24fr) minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 17px;
}
.accounts-copy .conduct-reply-options blockquote {
  margin: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}
.accounts-copy .conduct-reply-options button:not(.conduct-copy-action) {
  align-self: center;
  max-width: 180px;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid rgba(88, 217, 232, .34);
  border-radius: 999px;
  color: #e9fcff;
  background: rgba(18, 95, 109, .24);
  font: inherit;
  font-size: .77rem;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
  cursor: pointer;
}
.accounts-copy .conduct-reply-options button:not(.conduct-copy-action):hover,
.accounts-copy .conduct-reply-options button:not(.conduct-copy-action):focus-visible {
  border-color: rgba(88, 217, 232, .72);
  background: rgba(31, 144, 160, .3);
}
@media (max-width: 900px) {
  .accounts-copy .conduct-reply-options article {
    grid-template-columns: minmax(90px, .2fr) minmax(0, 1fr) auto;
  }
}
@media (max-width: 620px) {
  .accounts-copy .conduct-reply {
    padding: 17px;
  }
  .accounts-copy .conduct-reply-options article {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 15px;
  }
  .accounts-copy .conduct-reply-options blockquote {
    margin: 2px 0 4px;
    font-size: .88rem;
  }
  .accounts-copy .conduct-reply-options button:not(.conduct-copy-action) {
    width: 100%;
    max-width: none;
  }
}

/* v107: keep the shared League header and its menus clear on narrow screens. */
@media (max-width: 760px) {
  .topbar {
    height: auto;
    min-height: 88px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 5px;
    padding: 7px 10px;
  }
  .topbar .brand {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 28px;
    padding-left: 4px;
  }
  .topbar .league-nav {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    gap: 2px;
  }
  .topbar .league-nav > a,
  .topbar .league-nav-more > summary,
  .topbar .league-language > summary {
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 0 4px;
  }
  .topbar .league-nav-more > div,
  .topbar .league-language > div {
    position: fixed;
    z-index: 90;
    top: 88px;
    right: 10px;
    left: 10px;
    min-width: 0;
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
  .topbar .league-nav-more > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .topbar .league-nav > a .league-nav-label {
    display: none;
  }
  .topbar .league-nav > a {
    gap: 0;
  }
  .topbar .league-nav > a > .bi {
    font-size: 16px;
  }
}

/* v108: faster game-mode comparison and connected map guides */
.mode-quick-compare,
.mode-system-guides {
  margin-top: 22px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(10, 15, 23, .92);
}
.mode-quick-compare > header,
.mode-system-guides > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 26px;
  padding: 28px 30px 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mode-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mode-quick-grid > article {
  --quick-accent: var(--mode-cyan);
  min-width: 0;
  padding: 24px;
  border-top: 4px solid var(--quick-accent);
  border-right: 1px solid rgba(255,255,255,.08);
}
.mode-quick-grid > article:last-child { border-right: 0; }
.mode-quick-grid .is-swift { --quick-accent: var(--mode-green); }
.mode-quick-grid .is-aram { --quick-accent: var(--mode-ice); }
.mode-quick-grid .is-arena { --quick-accent: var(--mode-rose); }
.mode-quick-title {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.mode-quick-title > i {
  display: grid;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--quick-accent) 55%, transparent);
  background: color-mix(in srgb, var(--quick-accent) 12%, #080d14);
  color: var(--quick-accent);
  font-size: 1.25rem;
}
.mode-quick-title span { min-width: 0; }
.mode-quick-title small {
  display: block;
  margin-bottom: 3px;
  color: var(--quick-accent);
  text-transform: uppercase;
  font-size: .68rem;
  font-weight: 900;
}
.mode-quick-title h3 {
  margin: 0;
  color: #f1f6f8;
  overflow-wrap: anywhere;
}
.mode-quick-grid dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 21px 0 18px;
  border: 1px solid rgba(255,255,255,.08);
}
.mode-quick-grid dl div {
  min-width: 0;
  padding: 12px;
  border-right: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.mode-quick-grid dl div:nth-child(even) { border-right: 0; }
.mode-quick-grid dl div:nth-last-child(-n+2) { border-bottom: 0; }
.mode-quick-grid dt {
  margin-bottom: 4px;
  color: #718991;
  text-transform: uppercase;
  font-size: .63rem;
  font-weight: 900;
}
.mode-quick-grid dd {
  margin: 0;
  color: #d6e4e7;
  font-size: .84rem;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.mode-quick-grid nav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.mode-quick-grid nav a {
  display: inline-flex;
  min-height: 37px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: #0c141d;
  color: #c8dadd;
  font-size: .78rem;
  font-weight: 850;
  text-decoration: none;
}
.mode-quick-grid nav a:first-child {
  border-color: color-mix(in srgb, var(--quick-accent) 55%, transparent);
  color: var(--quick-accent);
}
.mode-quick-compare > footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(58, 43, 16, .24);
}
.mode-quick-compare > footer i { color: var(--mode-gold); font-size: 1.25rem; }
.mode-quick-compare > footer p { margin: 0; color: #b7c7cb; line-height: 1.5; }
.mode-system-guides > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mode-system-guides > div > a {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 22px 24px;
  border-right: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: inherit;
  text-decoration: none;
}
.mode-system-guides > div > a:nth-child(even) { border-right: 0; }
.mode-system-guides > div > a:nth-last-child(-n+2) { border-bottom: 0; }
.mode-system-guides > div > a > i {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgba(74, 218, 231, .35);
  background: rgba(27, 105, 118, .12);
  color: #5ee1ea;
  font-size: 1.35rem;
}
.mode-system-guides > div > a:nth-child(2) > i { border-color: rgba(238, 191, 74, .35); background: rgba(99, 68, 12, .18); color: #efc85e; }
.mode-system-guides > div > a:nth-child(3) > i { border-color: rgba(187, 132, 255, .35); background: rgba(65, 28, 100, .17); color: #c99dff; }
.mode-system-guides > div > a:nth-child(4) > i { border-color: rgba(72, 224, 150, .35); background: rgba(13, 89, 58, .17); color: #63e5a8; }
.mode-system-guides span { min-width: 0; }
.mode-system-guides :is(small, strong, em) { display: block; }
.mode-system-guides small { color: #728a91; text-transform: uppercase; font-size: .67rem; font-weight: 900; }
.mode-system-guides strong { margin: 4px 0; color: #edf6f7; font-size: 1.02rem; }
.mode-system-guides em { color: #91a7ad; font-size: .84rem; font-style: normal; line-height: 1.45; }
.mode-system-guides > div > a > b {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.1);
  color: #a9bcc1;
  font-size: .72rem;
}
.mode-system-guides > div > a:is(:hover, :focus-visible) {
  background: rgba(58, 221, 227, .055);
}

@media (max-width: 1120px) {
  .mode-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode-quick-grid > article:nth-child(2) { border-right: 0; }
  .mode-quick-grid > article:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.08); }
}
@media (max-width: 720px) {
  .mode-quick-compare > header,
  .mode-system-guides > header { display: block; padding: 23px 20px 18px; }
  .mode-quick-compare > header > p,
  .mode-system-guides > header > p { margin-top: 10px; }
  .mode-quick-grid,
  .mode-system-guides > div { grid-template-columns: 1fr; }
  .mode-quick-grid > article,
  .mode-system-guides > div > a {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .mode-quick-compare > footer { align-items: flex-start; }
  .mode-system-guides > div > a { grid-template-columns: 48px minmax(0, 1fr); padding: 18px; }
  .mode-system-guides > div > a > i { width: 48px; height: 48px; }
  .mode-system-guides > div > a > b { display: none; }
}

/* v108: vision control guide */
.vision-page {
  --vision-cyan: #49dce7;
  --vision-green: #51e0a0;
  --vision-yellow: #f0c95b;
  --vision-rose: #ff6f9f;
  --vision-blue: #7cb6ff;
  background:
    linear-gradient(115deg, rgba(15, 45, 52, .34), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(79, 218, 165, .09), transparent 27%),
    #080d13;
}
.vision-page main {
  width: min(1480px, calc(100% - 32px));
  margin: 0 auto;
  padding-bottom: 72px;
}
.vision-hero {
  position: relative;
  min-height: clamp(510px, 65vh, 680px);
  overflow: hidden;
  border: 1px solid rgba(91, 222, 220, .24);
  background: #071018;
}
.vision-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.vision-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 10, 16, .97) 0%, rgba(4, 10, 16, .78) 48%, rgba(4, 10, 16, .22) 78%), linear-gradient(0deg, rgba(4, 10, 16, .82), transparent 48%);
}
.vision-hero-copy {
  position: relative;
  z-index: 1;
  width: min(760px, 68%);
  padding: clamp(60px, 8vw, 108px) clamp(28px, 6vw, 88px);
}
.vision-hero-copy h1 {
  max-width: 720px;
  margin: 8px 0 18px;
  color: #f3fbfc;
  font-size: clamp(2.65rem, 5vw, 5.6rem);
  line-height: .96;
  letter-spacing: 0;
}
.vision-hero-copy > p:not(.eyebrow) {
  max-width: 660px;
  color: #c7dce1;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.65;
}
.vision-hero-copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.vision-hero-copy > div a,
.vision-sources nav a,
.objective-vision > footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  padding: 10px 17px;
  border: 1px solid rgba(84, 222, 225, .44);
  background: rgba(10, 31, 39, .88);
  color: #bff9fb;
  font-weight: 800;
  text-decoration: none;
}
.vision-hero-copy > div a:first-child {
  border-color: var(--vision-cyan);
  background: var(--vision-cyan);
  color: #041015;
}
.vision-hero > aside {
  position: absolute;
  z-index: 2;
  right: clamp(20px, 4vw, 58px);
  bottom: 30px;
  display: grid;
  gap: 10px;
  width: min(420px, 31%);
}
.vision-hero > aside article {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(5, 12, 18, .9);
}
.vision-hero > aside :is(small, strong) { display: block; }
.vision-hero > aside small {
  margin-bottom: 3px;
  color: #88aab2;
  text-transform: uppercase;
  font-size: .7rem;
  font-weight: 800;
}
.vision-hero > aside strong {
  color: #e8f7f8;
  overflow-wrap: anywhere;
}
.vision-jumps {
  position: sticky;
  z-index: 12;
  top: 64px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 18px 0 22px;
  padding: 10px;
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(8, 14, 21, .94);
  scrollbar-width: thin;
}
.vision-jumps span,
.vision-jumps a {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 9px 14px;
}
.vision-jumps span {
  color: #79959d;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 900;
}
.vision-jumps a {
  border: 1px solid rgba(255,255,255,.1);
  background: #101923;
  color: #d7e7ea;
  font-weight: 800;
  text-decoration: none;
}
.vision-jumps a:is(:hover, :focus-visible) {
  border-color: var(--vision-cyan);
  color: var(--vision-cyan);
}
.vision-loop,
.vision-tools,
.deep-ward-guide,
.objective-vision,
.vision-state,
.vision-roles,
.vision-mistakes,
.vision-faq,
.vision-sources {
  margin-top: 22px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(10, 16, 24, .92);
}
.vision-loop > header,
.vision-tools > header,
.deep-ward-guide > header,
.objective-vision > header,
.vision-state > header,
.vision-roles > header,
.vision-mistakes > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 30px 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.vision-page section > header h2,
.vision-sources h2 {
  margin: 5px 0 0;
  color: #eef8fa;
  font-size: clamp(1.55rem, 2.4vw, 2.45rem);
}
.vision-page section > header > p,
.vision-sources > div > p:last-child {
  max-width: 640px;
  margin: 0;
  color: #92a9b0;
  line-height: 1.65;
}
.vision-loop > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.vision-loop article {
  position: relative;
  min-width: 0;
  padding: 26px;
  border-right: 1px solid rgba(255,255,255,.08);
}
.vision-loop article:last-child { border-right: 0; }
.vision-loop article > i {
  position: absolute;
  top: 27px;
  right: 24px;
  color: rgba(75, 220, 232, .58);
  font-size: 1.35rem;
}
.vision-loop article h3 { margin: 19px 0 8px; color: #ecf7f8; }
.vision-loop article p { margin: 0; color: #91a8af; line-height: 1.6; }
.vision-tools > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.vision-tools article {
  --tool-accent: var(--vision-cyan);
  min-width: 0;
  padding: 22px;
  border-right: 1px solid rgba(255,255,255,.08);
  border-top: 4px solid var(--tool-accent);
}
.vision-tools article:last-child { border-right: 0; }
.vision-tools article.is-yellow { --tool-accent: var(--vision-yellow); }
.vision-tools article.is-red { --tool-accent: #ff6e6e; }
.vision-tools article.is-pink { --tool-accent: var(--vision-rose); }
.vision-tools article.is-blue { --tool-accent: var(--vision-blue); }
.vision-tools article.is-green { --tool-accent: var(--vision-green); }
.vision-tool-icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.vision-tool-icon img {
  width: 64px;
  height: 64px;
  border: 2px solid color-mix(in srgb, var(--tool-accent) 65%, #fff 5%);
  background: #070b10;
}
.vision-tools article small {
  color: var(--tool-accent);
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 900;
}
.vision-tools article h3 { margin: 5px 0 10px; color: #f0f7f8; }
.vision-tools article p { color: #94a9af; line-height: 1.58; }
.vision-tools article > div:last-child > strong {
  display: block;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: #d8e9eb;
  font-size: .86rem;
  line-height: 1.45;
}
.faelight-guide {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  min-height: 420px;
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid rgba(99, 238, 179, .32);
  background: linear-gradient(120deg, #07140f, #0b151b 65%);
}
.faelight-art {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border-right: 1px solid rgba(99, 238, 179, .2);
  background:
    radial-gradient(circle at center, rgba(96, 255, 180, .23), transparent 15%),
    repeating-radial-gradient(circle at center, transparent 0 46px, rgba(88, 226, 169, .25) 47px 49px, transparent 50px 82px),
    linear-gradient(135deg, #07141a, #0b2118);
}
.faelight-art::before,
.faelight-art::after,
.faelight-art span {
  content: "";
  position: absolute;
  inset: 50%;
  width: 230px;
  height: 230px;
  translate: -50% -50%;
  border: 2px solid rgba(83, 255, 180, .68);
  border-radius: 50%;
  box-shadow: 0 0 38px rgba(73, 235, 174, .22);
}
.faelight-art::after { width: 154px; height: 154px; border-style: dashed; }
.faelight-art span { width: 78px; height: 78px; background: rgba(69, 229, 164, .12); }
.faelight-art i {
  position: absolute;
  inset: 50%;
  translate: -50% -50%;
  color: #86f7c5;
  font-size: 2.6rem;
}
.faelight-guide > div:last-child { padding: clamp(30px, 5vw, 66px); }
.faelight-guide h2 { margin: 7px 0 15px; color: #effbf5; font-size: clamp(1.8rem, 3vw, 3.15rem); }
.faelight-guide > div:last-child > p:not(.eyebrow) { color: #a7bdb3; line-height: 1.7; }
.faelight-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 24px 0;
}
.faelight-facts article { padding: 15px; border: 1px solid rgba(104, 236, 177, .2); background: rgba(4, 17, 13, .65); }
.faelight-facts :is(strong, span) { display: block; }
.faelight-facts strong { color: #7df0b7; font-size: 1.35rem; }
.faelight-facts span { margin-top: 4px; color: #8fa99c; font-size: .8rem; }
.faelight-guide ul { display: grid; gap: 9px; padding-left: 20px; color: #c6d8cf; line-height: 1.55; }
.deep-check-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.deep-check-grid article,
.vision-roles > div article {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 15px;
  min-width: 0;
  padding: 24px;
  border-right: 1px solid rgba(255,255,255,.08);
}
.deep-check-grid article:last-child { border-right: 0; }
.deep-check-grid h3,
.vision-roles h3 { margin: 2px 0 7px; color: #eaf5f6; }
.deep-check-grid p,
.vision-roles p { margin: 0; color: #91a7ad; line-height: 1.58; }
.deep-locations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(255,255,255,.08);
}
.deep-locations article { padding: 26px 30px; }
.deep-locations article:first-child { border-right: 1px solid rgba(255,255,255,.08); }
.deep-locations header { display: flex; align-items: center; gap: 11px; }
.deep-locations h3 { margin: 0; color: #edf7f8; }
.deep-locations i { color: var(--vision-green); font-size: 1.3rem; }
.deep-locations .is-bad i { color: #ff788a; }
.deep-locations ul { display: grid; gap: 9px; margin: 18px 0 0; padding-left: 21px; color: #a7bbc0; line-height: 1.55; }
.objective-vision-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.objective-vision-track article {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  padding: 24px;
  border-right: 1px solid rgba(255,255,255,.08);
}
.objective-vision-track article:last-child { border-right: 0; }
.objective-vision-track small { color: var(--vision-yellow); font-weight: 900; text-transform: uppercase; }
.objective-vision-track h3 { margin: 5px 0 8px; color: #f0f6f7; }
.objective-vision-track p { margin: 0; color: #91a6ad; line-height: 1.55; }
.objective-vision > footer {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(40, 32, 10, .28);
}
.objective-vision > footer > i { color: var(--vision-yellow); font-size: 1.4rem; }
.objective-vision > footer p { flex: 1; margin: 0; color: #c9d8da; line-height: 1.5; }
.vision-state > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vision-state article {
  --state-accent: var(--vision-cyan);
  min-width: 0;
  padding: 28px;
  border-top: 4px solid var(--state-accent);
  border-right: 1px solid rgba(255,255,255,.08);
}
.vision-state article:last-child { border-right: 0; }
.vision-state .is-ahead { --state-accent: var(--vision-green); }
.vision-state .is-even { --state-accent: var(--vision-yellow); }
.vision-state .is-behind { --state-accent: var(--vision-rose); }
.vision-state article > span { color: var(--state-accent); text-transform: uppercase; font-size: .75rem; font-weight: 900; }
.vision-state h3 { margin: 7px 0 10px; color: #eef7f8; font-size: 1.3rem; }
.vision-state p { margin: 0; color: #94a9af; line-height: 1.62; }
.vision-roles > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.vision-roles > div article { display: block; }
.vision-roles > div article:last-child { border-right: 0; }
.vision-roles .league-step-number { margin-bottom: 17px; }
.vision-mistakes > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.vision-mistakes article {
  min-width: 0;
  padding: 24px;
  border-right: 1px solid rgba(255,255,255,.08);
}
.vision-mistakes article:last-child { border-right: 0; }
.vision-mistakes i { display: block; margin-bottom: 16px; color: #ff7f97; font-size: 1.5rem; }
.vision-mistakes strong { color: #edf6f7; }
.vision-mistakes p { margin: 8px 0 0; color: #91a6ad; line-height: 1.5; }
.vision-faq {
  display: grid;
  grid-template-columns: minmax(260px, .62fr) minmax(0, 1.38fr);
  gap: 0;
}
.vision-faq > header { grid-row: 1 / span 5; padding: 28px 30px; border-right: 1px solid rgba(255,255,255,.08); }
.vision-faq details { padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,.08); }
.vision-faq details:last-child { border-bottom: 0; }
.vision-faq summary { cursor: pointer; color: #e8f4f5; font-weight: 850; }
.vision-faq details p { margin: 12px 0 0; color: #97adb3; line-height: 1.6; }
.vision-sources {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 28px 30px;
}
.vision-sources > div { max-width: 700px; }
.vision-sources nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

@media (max-width: 1120px) {
  .vision-tools > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vision-tools article { border-bottom: 1px solid rgba(255,255,255,.08); }
  .vision-tools article:last-child { grid-column: 1 / -1; }
  .vision-loop > div,
  .deep-check-grid,
  .objective-vision-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vision-loop article:nth-child(2),
  .deep-check-grid article:nth-child(2),
  .objective-vision-track article:nth-child(2) { border-right: 0; }
  .vision-loop article:nth-child(-n+2),
  .deep-check-grid article:nth-child(-n+2),
  .objective-vision-track article:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.08); }
  .vision-roles > div,
  .vision-mistakes > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .vision-page main { width: min(100% - 20px, 1480px); }
  .vision-hero { min-height: 650px; }
  .vision-hero-shade { background: linear-gradient(0deg, rgba(4, 10, 16, .97) 0%, rgba(4, 10, 16, .78) 62%, rgba(4, 10, 16, .34)); }
  .vision-hero-copy { width: auto; padding: 70px 24px 195px; }
  .vision-hero-copy h1 { font-size: clamp(2.55rem, 12vw, 4rem); }
  .vision-hero-copy > div a { flex: 1 1 180px; }
  .vision-hero > aside { right: 18px; bottom: 18px; left: 18px; width: auto; }
  .vision-jumps { top: 88px; }
  .vision-loop > header,
  .vision-tools > header,
  .deep-ward-guide > header,
  .objective-vision > header,
  .vision-state > header,
  .vision-roles > header,
  .vision-mistakes > header { display: block; padding: 23px 20px 18px; }
  .vision-page section > header > p { margin-top: 10px; }
  .vision-loop > div,
  .vision-tools > div,
  .deep-check-grid,
  .deep-locations,
  .objective-vision-track,
  .vision-state > div,
  .vision-roles > div,
  .vision-mistakes > div,
  .vision-faq { grid-template-columns: 1fr; }
  .vision-loop article,
  .vision-tools article,
  .deep-check-grid article,
  .deep-locations article,
  .objective-vision-track article,
  .vision-state article,
  .vision-roles > div article,
  .vision-mistakes article {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .vision-tools article:last-child { grid-column: auto; }
  .faelight-guide { grid-template-columns: 1fr; }
  .faelight-art { min-height: 300px; border-right: 0; border-bottom: 1px solid rgba(99, 238, 179, .2); }
  .faelight-guide > div:last-child { padding: 28px 22px; }
  .faelight-facts { grid-template-columns: 1fr; }
  .objective-vision > footer,
  .vision-sources { align-items: flex-start; flex-direction: column; }
  .vision-faq > header { grid-row: auto; padding: 24px 20px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .vision-sources { padding: 24px 20px; }
  .vision-sources nav { justify-content: flex-start; }
}

/* v109: interactive ward map and side rotation */
.vision-map-guide {
  --map-cyan: #5ce8ee;
  --map-yellow: #f2c95c;
  --map-pink: #ff6ba8;
  --map-blue: #6ca8ff;
  --map-green: #6ce4a6;
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid rgba(92, 232, 238, .26);
  background: #09121a;
}
.vision-map-guide > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  padding: 30px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(90deg, rgba(20, 72, 78, .25), transparent 55%),
    #0b1620;
}
.vision-map-guide > header h2 {
  margin: 5px 0 0;
  color: #f1fbfc;
  font-size: clamp(1.7rem, 2.8vw, 2.8rem);
}
.vision-map-guide > header > p {
  max-width: 620px;
  margin: 0;
  color: #9bb0b6;
  line-height: 1.65;
}
.vision-map-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(290px, .65fr);
  gap: 1px;
  background: rgba(255,255,255,.09);
}
.vision-map-controls fieldset {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 18px;
  border: 0;
  background: #0a141d;
}
.vision-map-controls fieldset.is-side {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vision-map-controls legend {
  grid-column: 1 / -1;
  padding: 0 0 9px;
  color: #79a3aa;
  font-size: .73rem;
  font-weight: 900;
  text-transform: uppercase;
}
.vision-map-controls button {
  display: flex;
  min-width: 0;
  min-height: 74px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #263b47;
  border-radius: 5px;
  background: #0e1b25;
  color: #c7d7db;
  text-align: left;
  cursor: pointer;
}
.vision-map-controls button :is(strong, small) {
  display: block;
  overflow-wrap: anywhere;
}
.vision-map-controls button strong {
  color: #eaf5f7;
  font-size: .87rem;
}
.vision-map-controls button small {
  margin-top: 4px;
  color: #7f989f;
  font-size: .7rem;
  line-height: 1.35;
}
.vision-map-controls button i {
  color: #6ca8ff;
  font-size: 1.25rem;
}
.vision-map-controls .is-side button:last-child i { color: #ff758a; }
.vision-map-controls button:is(:hover, :focus-visible) {
  border-color: #4d818a;
  background: #122630;
}
.vision-map-controls button[aria-pressed="true"] {
  border-color: var(--map-cyan);
  background: linear-gradient(145deg, rgba(35, 116, 124, .44), rgba(13, 31, 40, .96));
  box-shadow: inset 0 -3px rgba(92, 232, 238, .28);
}
.vision-map-controls button[aria-pressed="true"] strong { color: #c9fdff; }
.vision-map-layout {
  display: grid;
  grid-template-columns: minmax(420px, 1.35fr) minmax(330px, .65fr);
  min-height: 680px;
}
.vision-map-board {
  position: relative;
  align-self: stretch;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(circle at 20% 80%, rgba(57, 126, 183, .18), transparent 27%),
    radial-gradient(circle at 80% 20%, rgba(190, 55, 80, .13), transparent 27%),
    #050b10;
  isolation: isolate;
}
.vision-map-board::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(31, 100, 150, .08), transparent 42%, rgba(180, 49, 72, .07));
  pointer-events: none;
}
.vision-map-board > img {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter: saturate(.82) brightness(.64) contrast(1.12);
  transition: transform 1s cubic-bezier(.2, .72, .2, 1);
}
.vision-map-board.is-red-side > img { transform: rotate(180deg); }
.vision-map-board > svg {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.vision-map-landmarks {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.vision-map-landmarks > span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 205, 101, .72);
  border-radius: 50%;
  background: rgba(6, 13, 19, .8);
  box-shadow: 0 0 0 4px rgba(4, 12, 18, .48);
}
.vision-map-landmarks img { width: 30px; height: 30px; object-fit: contain; }
.vision-map-landmarks b {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  padding: 3px 6px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: rgba(5, 13, 19, .9);
  color: #ffd575;
  font-size: .58rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
.vision-map-landmarks .is-dragon { border-color: rgba(255, 113, 88, .8); }
.vision-map-landmarks .is-dragon b { color: #ff9a83; }
.vision-map-board polyline {
  fill: none;
  stroke: var(--map-cyan);
  stroke-width: .75;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2.2 1.5;
  filter: drop-shadow(0 0 1.2px rgba(92, 232, 238, .9));
  animation: vision-map-flow 9s linear infinite;
}
@keyframes vision-map-flow { to { stroke-dashoffset: -29.6; } }
.vision-map-marker {
  --marker: var(--map-yellow);
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 4;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 2px solid var(--marker);
  border-radius: 50%;
  background: #071119;
  color: var(--marker);
  box-shadow: 0 0 0 5px rgba(4, 12, 18, .78), 0 0 20px color-mix(in srgb, var(--marker) 45%, transparent);
  cursor: pointer;
}
.vision-map-marker.is-control { --marker: var(--map-pink); }
.vision-map-marker.is-sweep { --marker: #ff7c70; }
.vision-map-marker.is-deep { --marker: var(--map-green); }
.vision-map-marker.is-farsight { --marker: var(--map-blue); }
.vision-map-marker > b {
  position: absolute;
  top: -11px;
  left: -11px;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 2px solid #071119;
  border-radius: 50%;
  background: var(--marker);
  color: #061016;
  font-size: .78rem;
  font-weight: 950;
}
.vision-map-marker > i { font-size: 1.15rem; }
.vision-map-marker > span {
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  width: max-content;
  max-width: 150px;
  padding: 5px 8px;
  transform: translateX(-50%);
  border: 1px solid #38535f;
  border-radius: 4px;
  background: rgba(5, 13, 19, .94);
  color: #e9f5f7;
  font-size: .68rem;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.vision-map-marker:is(:hover, :focus-visible, [aria-pressed="true"]) {
  z-index: 6;
  transform: translate(-50%, -50%) scale(1.14);
  background: color-mix(in srgb, var(--marker) 20%, #071119);
  box-shadow: 0 0 0 6px rgba(4, 12, 18, .86), 0 0 30px color-mix(in srgb, var(--marker) 70%, transparent);
}
.vision-map-marker[aria-pressed="true"] > span {
  border-color: var(--marker);
  color: #fff;
  opacity: 1;
}
.vision-map-marker:is(:hover, :focus-visible) > span { opacity: 1; }
.vision-map-base {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: rgba(5, 13, 19, .88);
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
}
.vision-map-base.is-friendly { bottom: 16px; left: 16px; color: #79c4ff; }
.vision-map-base.is-opposing { top: 16px; right: 16px; color: #ff8296; }
.vision-map-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: linear-gradient(165deg, #0d1b25, #091119);
}
.vision-map-title { padding: 30px; }
.vision-map-title > span {
  display: inline-flex;
  padding: 5px 9px;
  border: 1px solid rgba(92, 232, 238, .38);
  border-radius: 4px;
  background: rgba(22, 81, 87, .3);
  color: #92f7f8;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
}
.vision-map-title h3 {
  margin: 12px 0 10px;
  color: #f1f8f9;
  font-size: clamp(1.7rem, 3vw, 2.8rem);
}
.vision-map-title p {
  margin: 0;
  color: #9eb2b8;
  line-height: 1.66;
}
.vision-map-move {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 13px;
  padding: 20px 30px;
  border-block: 1px solid rgba(255,255,255,.09);
  background: rgba(26, 93, 99, .13);
}
.vision-map-move > i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #3d737a;
  border-radius: 5px;
  color: var(--map-cyan);
}
.vision-map-move :is(small, strong) { display: block; }
.vision-map-move small {
  margin-bottom: 5px;
  color: #78a2a9;
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
}
.vision-map-move strong {
  color: #dcebed;
  font-size: .9rem;
  line-height: 1.5;
}
.vision-map-selected {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  padding: 28px 30px;
}
.vision-map-selected small {
  color: var(--map-yellow);
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
}
.vision-map-selected h4 {
  margin: 5px 0 8px;
  color: #f2f8fa;
  font-size: 1.28rem;
}
.vision-map-selected p {
  margin: 0;
  color: #9caeb4;
  line-height: 1.6;
}
.vision-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
  padding: 20px 30px 26px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.vision-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid #30454f;
  border-radius: 4px;
  background: #0a151e;
  color: #b9c9cd;
  font-size: .72rem;
  font-weight: 800;
}
.vision-map-legend .is-ward i { color: var(--map-yellow); }
.vision-map-legend .is-control i { color: var(--map-pink); }
.vision-map-legend .is-sweep i { color: #ff7c70; }
.vision-map-legend .is-deep i { color: var(--map-green); }
.vision-map-legend .is-farsight i { color: var(--map-blue); }
.vision-map-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px 0 0;
  list-style: none;
  background: rgba(255,255,255,.09);
}
.vision-map-steps li {
  min-width: 0;
  background: #09131c;
}
.vision-map-steps button {
  display: grid;
  width: 100%;
  height: auto !important;
  min-height: 158px;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 18px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.vision-map-steps :is(small, strong, em) { display: block; }
.vision-map-steps small {
  color: #6f929a;
  font-size: .67rem;
  font-weight: 900;
  text-transform: uppercase;
}
.vision-map-steps strong {
  margin-top: 5px;
  color: #e5f0f2;
  font-size: .86rem;
}
.vision-map-steps em {
  margin-top: 8px;
  color: #879ba1;
  font-size: .76rem;
  font-style: normal;
  line-height: 1.45;
}
.vision-map-steps li.is-selected {
  background: linear-gradient(150deg, rgba(27, 94, 100, .32), #0b1922);
  box-shadow: inset 0 3px var(--map-cyan);
}
.vision-map-steps li.is-selected small { color: var(--map-cyan); }
.vision-map-guide > footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 22px;
  border-top: 1px solid rgba(242, 201, 92, .2);
  background: rgba(51, 41, 12, .32);
}
.vision-map-guide > footer i {
  color: var(--map-yellow);
  font-size: 1.2rem;
}
.vision-map-guide > footer p {
  margin: 0;
  color: #cbd4d2;
  line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  .vision-map-board > img { transition: none; }
  .vision-map-board polyline { animation: none; }
}
@media (max-width: 1120px) {
  .vision-map-controls { grid-template-columns: 1fr; }
  .vision-map-layout { grid-template-columns: minmax(400px, 1fr) minmax(300px, .7fr); min-height: 600px; }
  .vision-map-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .vision-map-guide > header { display: block; padding: 24px 20px; }
  .vision-map-guide > header > p { margin-top: 11px; }
  .vision-map-controls fieldset { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; }
  .vision-map-controls fieldset button:first-of-type:last-of-type,
  .vision-map-controls fieldset > button:last-child:nth-child(even) { grid-column: 1 / -1; }
  .vision-map-controls fieldset.is-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vision-map-controls fieldset.is-side > button:last-child { grid-column: auto; }
  .vision-map-layout { grid-template-columns: 1fr; min-height: 0; }
  .vision-map-board { aspect-ratio: 1; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .vision-map-title,
  .vision-map-selected { padding: 24px 20px; }
  .vision-map-move { padding: 18px 20px; }
  .vision-map-legend { padding: 18px 20px 22px; }
  .vision-map-steps { grid-template-columns: 1fr; }
  .vision-map-steps button { height: auto !important; min-height: 132px; }
  .vision-map-marker > span { display: none; }
}
@media (max-width: 480px) {
  .vision-map-controls fieldset,
  .vision-map-controls fieldset.is-side { grid-template-columns: 1fr; }
  .vision-map-controls fieldset > button:last-child:nth-child(even),
  .vision-map-controls fieldset.is-side > button:last-child { grid-column: auto; }
  .vision-map-controls button { min-height: 66px; }
  .vision-map-marker { width: 40px; height: 40px; }
  .vision-map-marker > b { top: -9px; left: -9px; width: 23px; height: 23px; font-size: .7rem; }
  .vision-map-base { padding: 6px 7px; font-size: .61rem; }
  .vision-map-base.is-friendly { bottom: 9px; left: 9px; }
  .vision-map-base.is-opposing { top: 9px; right: 9px; }
}
/* Inhibitors */
.inhibitors-page{--inhib-purple:#b985ff;--inhib-pink:#ff6d9c;--inhib-cyan:#57dbe8;--inhib-green:#70e0a2;background:radial-gradient(circle at 88% 10%,rgba(99,54,156,.2),transparent 28%),#080b12}
.inhibitors-page main{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:34px 0 64px}
.inhibitor-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(330px,.72fr);min-height:520px;overflow:hidden;border:1px solid rgba(185,133,255,.28);background:linear-gradient(120deg,rgba(12,17,29,.98),rgba(19,12,31,.93));box-shadow:0 24px 70px rgba(0,0,0,.3)}
.inhibitor-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(87,219,232,.08),transparent 34%,rgba(185,133,255,.09));pointer-events:none}
.inhibitor-hero-copy{position:relative;z-index:2;align-self:center;padding:54px}
.inhibitor-hero-copy h1{max-width:760px;margin:10px 0 18px;font-size:clamp(2.5rem,5vw,5.2rem);line-height:.98;letter-spacing:0}
.inhibitor-hero-copy>p:last-of-type{max-width:680px;color:#b8c4d7;font-size:1.05rem;line-height:1.7}
.inhibitor-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:27px}
.inhibitor-hero-actions a{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:10px 15px;border:1px solid rgba(185,133,255,.38);background:#131927;color:#f6f8ff;text-decoration:none;font-weight:850}
.inhibitor-hero-actions a:hover,.inhibitor-hero-actions a:focus-visible{border-color:var(--inhib-cyan);background:#182334;color:#fff}
.inhibitor-hero-actions a i{color:var(--inhib-purple)}
.inhibitor-hero-visual{position:relative;min-height:520px;overflow:hidden;border-left:1px solid rgba(185,133,255,.18);background:#080c13}
.inhibitor-hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#100e1b 0,transparent 28%),linear-gradient(0deg,rgba(8,11,18,.38),transparent)}
.inhibitor-hero-visual>img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.08);opacity:.65}
.inhibitor-hero-visual>span{position:absolute;z-index:2;display:grid;grid-template-columns:34px auto;align-items:center;gap:8px;padding:7px 10px;border:1px solid rgba(185,133,255,.7);background:rgba(8,10,18,.9);color:#f0dcff;box-shadow:0 0 25px rgba(185,133,255,.28)}
.inhibitor-hero-visual>span i{display:grid;place-items:center;width:34px;height:34px;background:rgba(185,133,255,.16);color:var(--inhib-purple);font-size:1rem}.inhibitor-hero-visual>span b{font-size:.73rem;text-transform:uppercase}
.inhibitor-hero-visual .is-top{left:20%;top:20%}.inhibitor-hero-visual .is-mid{left:48%;top:48%}.inhibitor-hero-visual .is-bot{right:16%;bottom:18%}
.inhibitor-jumps{position:sticky;z-index:8;top:72px;display:flex;align-items:center;gap:7px;overflow-x:auto;margin:18px 0 28px;padding:10px;border:1px solid rgba(150,172,205,.2);background:rgba(9,13,22,.95);scrollbar-width:thin}
.inhibitor-jumps span{padding:0 8px;color:#7e8da7;font-size:.72rem;font-weight:900;text-transform:uppercase;white-space:nowrap}.inhibitor-jumps a{flex:0 0 auto;padding:8px 12px;border:1px solid transparent;color:#c7d1e1;text-decoration:none;font-size:.78rem;font-weight:850}.inhibitor-jumps a:hover,.inhibitor-jumps a:focus-visible{border-color:rgba(185,133,255,.5);background:#171326;color:#fff}
.inhibitor-basics,.inhibitor-plan,.inhibitor-lanes,.inhibitor-modes,.inhibitor-sources{margin-top:26px;border:1px solid rgba(150,172,205,.18);background:#0d121c}
.inhibitor-basics>header,.inhibitor-plan>header,.inhibitor-lanes>header,.inhibitor-modes>header,.inhibitor-sources>header{display:flex;align-items:end;justify-content:space-between;gap:28px;padding:30px;border-bottom:1px solid rgba(150,172,205,.16)}
.inhibitor-basics h2,.inhibitor-plan h2,.inhibitor-lanes h2,.inhibitor-modes h2,.inhibitor-sources h2{margin:6px 0 0;font-size:clamp(1.55rem,3vw,2.45rem)}.inhibitor-basics>header>p,.inhibitor-lanes>header>p,.inhibitor-modes>header>p,.inhibitor-sources>header>p{max-width:510px;margin:0;color:#93a1b7;line-height:1.65}
.inhibitor-basics>div{display:grid;grid-template-columns:repeat(4,1fr)}
.inhibitor-basics article{position:relative;display:grid;align-content:start;gap:16px;min-width:0;padding:28px;border-right:1px solid rgba(150,172,205,.14)}.inhibitor-basics article:last-child{border-right:0}.inhibitor-basics article>i{color:var(--inhib-purple);font-size:1.65rem}.inhibitor-basics article>span small,.inhibitor-basics article>span strong{display:block}.inhibitor-basics article>span small{margin-bottom:7px;color:var(--inhib-cyan);font-size:.69rem;font-weight:900;text-transform:uppercase}.inhibitor-basics article>span strong{font-size:1.02rem}.inhibitor-basics article p{margin:10px 0 0;color:#97a5ba;line-height:1.55}
.inhibitor-status{display:inline-flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid;font-size:.72rem;font-weight:900;text-transform:uppercase}.inhibitor-status.is-attack{border-color:rgba(255,109,156,.48);background:rgba(255,109,156,.1);color:#ff91b5}.inhibitor-status.is-defend{border-color:rgba(87,219,232,.45);background:rgba(87,219,232,.09);color:#74e9f3}
.inhibitor-plan-grid{display:grid;grid-template-columns:repeat(4,1fr)}.inhibitor-plan-grid article{display:flex;gap:17px;min-width:0;padding:27px;border-right:1px solid rgba(150,172,205,.14)}.inhibitor-plan-grid article:last-child{border-right:0}.inhibitor-plan-grid .league-step-number{flex:0 0 auto}.inhibitor-plan-grid strong{display:block;font-size:1rem}.inhibitor-plan-grid p{margin:8px 0 0;color:#97a5ba;line-height:1.58}
.inhibitor-plan>aside{display:flex;align-items:center;gap:15px;margin:0 27px 27px;padding:18px;border:1px solid rgba(255,109,156,.28);background:rgba(255,109,156,.07)}.inhibitor-plan>aside>i{color:var(--inhib-pink);font-size:1.35rem}.inhibitor-plan>aside p{margin:0}.inhibitor-plan>aside strong,.inhibitor-plan>aside span{display:block}.inhibitor-plan>aside span{margin-top:5px;color:#aeb9ca}
.inhibitor-plan.is-defence{border-color:rgba(87,219,232,.24);background:linear-gradient(135deg,#0d121c,rgba(11,28,35,.72))}
.inhibitor-lanes>div{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(150,172,205,.14)}.inhibitor-lanes article{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:30px;background:#0d121c}.inhibitor-lanes article.is-two{background:#121422}.inhibitor-lanes article.is-three{background:linear-gradient(135deg,#171122,#121327)}.inhibitor-lanes small,.inhibitor-lanes strong{display:block}.inhibitor-lanes small{margin-bottom:7px;color:var(--inhib-purple);font-size:.7rem;font-weight:900;text-transform:uppercase}.inhibitor-lanes strong{font-size:1.08rem}.inhibitor-lanes p{margin:10px 0 0;color:#9eacc0;line-height:1.6}
.inhibitor-modes>div{display:grid;grid-template-columns:repeat(3,1fr)}.inhibitor-modes article{display:grid;grid-template-columns:46px 1fr;gap:16px;padding:28px;border-right:1px solid rgba(150,172,205,.14)}.inhibitor-modes article:last-child{border-right:0}.inhibitor-modes article>i{display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(87,219,232,.35);background:rgba(87,219,232,.08);color:var(--inhib-cyan);font-size:1.2rem}.inhibitor-modes small,.inhibitor-modes strong{display:block}.inhibitor-modes small{color:#8291a8;font-size:.68rem;text-transform:uppercase}.inhibitor-modes strong{margin-top:4px;font-size:1.08rem}.inhibitor-modes p{margin:9px 0 0;color:#9eacc0;line-height:1.55}
.inhibitor-links{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}.inhibitor-links>a{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;min-width:0;padding:21px;border:1px solid rgba(185,133,255,.25);background:#101520;color:#edf2fa;text-decoration:none}.inhibitor-links>a:hover,.inhibitor-links>a:focus-visible{border-color:var(--inhib-purple);background:#161526}.inhibitor-links>a>i{display:grid;place-items:center;width:44px;height:44px;background:rgba(185,133,255,.11);color:var(--inhib-purple);font-size:1.15rem}.inhibitor-links small,.inhibitor-links strong,.inhibitor-links b{display:block}.inhibitor-links small{color:#8391a7;font-size:.66rem;text-transform:uppercase}.inhibitor-links strong{margin-top:3px}.inhibitor-links b{grid-column:2;margin-top:4px;color:var(--inhib-cyan);font-size:.72rem}
.inhibitor-sources>div{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:25px}.inhibitor-sources a{display:grid;grid-template-columns:40px 1fr;gap:13px;align-items:center;padding:17px;border:1px solid rgba(150,172,205,.17);background:#111722;color:#eef2f9;text-decoration:none}.inhibitor-sources a:hover,.inhibitor-sources a:focus-visible{border-color:var(--inhib-cyan)}.inhibitor-sources a>i{display:grid;place-items:center;width:40px;height:40px;background:rgba(87,219,232,.1);color:var(--inhib-cyan)}.inhibitor-sources strong,.inhibitor-sources small{display:block}.inhibitor-sources small{margin-top:4px;color:#8f9db3;line-height:1.4}
.turret-structure-order article strong a{color:inherit;text-decoration-color:rgba(87,219,232,.5);text-underline-offset:3px}.turret-structure-order article strong a:hover,.turret-structure-order article strong a:focus-visible{color:#57dbe8}
@media(max-width:980px){.inhibitor-hero{grid-template-columns:1fr}.inhibitor-hero-visual{min-height:390px;border-top:1px solid rgba(185,133,255,.18);border-left:0}.inhibitor-basics>div,.inhibitor-plan-grid{grid-template-columns:1fr 1fr}.inhibitor-basics article:nth-child(2),.inhibitor-plan-grid article:nth-child(2){border-right:0}.inhibitor-basics article:nth-child(-n+2),.inhibitor-plan-grid article:nth-child(-n+2){border-bottom:1px solid rgba(150,172,205,.14)}.inhibitor-lanes>div,.inhibitor-modes>div,.inhibitor-links,.inhibitor-sources>div{grid-template-columns:1fr}.inhibitor-modes article{border-right:0;border-bottom:1px solid rgba(150,172,205,.14)}.inhibitor-modes article:last-child{border-bottom:0}}
@media(max-width:640px){.inhibitors-page main{width:min(100% - 20px,1180px);padding-top:18px}.inhibitor-hero-copy{padding:30px 24px}.inhibitor-hero-copy h1{font-size:clamp(2.25rem,12vw,3.4rem)}.inhibitor-hero-actions{display:grid}.inhibitor-hero-actions a{justify-content:center}.inhibitor-hero-visual{min-height:310px}.inhibitor-hero-visual>span{grid-template-columns:28px auto;padding:5px 8px}.inhibitor-hero-visual>span i{width:28px;height:28px}.inhibitor-jumps{top:58px}.inhibitor-basics>header,.inhibitor-plan>header,.inhibitor-lanes>header,.inhibitor-modes>header,.inhibitor-sources>header{display:block;padding:23px}.inhibitor-basics>header>p,.inhibitor-lanes>header>p,.inhibitor-modes>header>p,.inhibitor-sources>header>p{margin-top:12px}.inhibitor-status{margin-top:14px}.inhibitor-basics>div,.inhibitor-plan-grid{grid-template-columns:1fr}.inhibitor-basics article,.inhibitor-plan-grid article{border-right:0;border-bottom:1px solid rgba(150,172,205,.14)}.inhibitor-basics article:last-child,.inhibitor-plan-grid article:last-child{border-bottom:0}.inhibitor-plan>aside{margin:0 18px 18px;align-items:flex-start}.inhibitor-lanes article{padding:24px}.inhibitor-sources>div{padding:18px}}

/* Minions, wave control and lane-role guides. */
.minions-page,.lanes-page{--mn-cyan:#57dbe8;--mn-gold:#f6c85f;--mn-green:#65dfa5;--mn-pink:#ff789f;--mn-purple:#bd90ff;background:#080b12;color:#edf3fb}.minions-page main,.lanes-page main{width:min(100% - 32px,1240px);margin:auto;padding:30px 0 72px}.minions-page h1,.minions-page h2,.minions-page h3,.lanes-page h1,.lanes-page h2,.lanes-page h3{letter-spacing:0}.minions-page p,.lanes-page p{overflow-wrap:anywhere}
.minion-hero,.lanes-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);min-height:500px;border:1px solid rgba(145,170,205,.2);background:#0d131e;overflow:hidden}.minion-hero-copy,.lanes-hero>div{display:flex;flex-direction:column;justify-content:center;padding:54px}.minion-hero h1,.lanes-hero h1{max-width:760px;margin:8px 0 18px;font-size:clamp(2.5rem,5.2vw,4.75rem);line-height:.98}.minion-hero-copy>p:last-of-type,.lanes-hero>div>p:last-of-type{max-width:690px;margin:0;color:#aab6c9;font-size:1.06rem;line-height:1.68}.minion-hero-copy>div,.lanes-hero nav{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}.minion-hero-copy a,.lanes-hero nav a{display:inline-flex;align-items:center;gap:8px;padding:11px 14px;border:1px solid rgba(87,219,232,.34);background:#101c28;color:#eafcff;text-decoration:none;font-weight:850}.minion-hero-copy a:hover,.lanes-hero nav a:hover{border-color:var(--mn-cyan);background:#152a36}
.minion-hero-map,.lanes-hero figure{position:relative;min-height:500px;margin:0;border-left:1px solid rgba(145,170,205,.18);background:radial-gradient(circle at 52% 48%,rgba(87,219,232,.12),transparent 58%),#080d15}.minion-hero-map img,.lanes-hero figure img{width:100%;height:100%;object-fit:cover;opacity:.78}.minion-hero-map span,.lanes-hero figure span{position:absolute;display:grid;gap:2px;padding:8px 11px;border:1px solid currentColor;background:rgba(5,9,15,.91);box-shadow:0 8px 24px rgba(0,0,0,.32);font-size:.75rem}.minion-hero-map span b{font-size:.84rem}.minion-hero-map span small{color:#aeb8c7}.minion-hero-map .is-top,.lanes-hero .is-top{left:7%;top:29%;color:var(--mn-purple)}.minion-hero-map .is-mid,.lanes-hero .is-mid{left:43%;top:49%;color:var(--mn-cyan)}.minion-hero-map .is-bot,.lanes-hero .is-bot{right:8%;bottom:7%;color:var(--mn-gold)}.lanes-hero .is-jungle{left:24%;bottom:34%;color:var(--mn-green)}
.minion-jumps{position:sticky;top:64px;z-index:8;display:flex;align-items:center;gap:3px;margin:14px 0 0;padding:7px;border:1px solid rgba(145,170,205,.18);background:rgba(8,11,18,.95);overflow-x:auto;scrollbar-width:thin}.minion-jumps span{padding:0 8px;color:#7f8ea6;font-size:.69rem;font-weight:900;text-transform:uppercase;white-space:nowrap}.minion-jumps a{padding:8px 11px;color:#c5cfdf;text-decoration:none;font-size:.76rem;font-weight:850;white-space:nowrap}.minion-jumps a:hover{background:#161d29;color:#fff}
.minion-answer,.support-minions,.minion-types,.wave-control,.minion-sources,.lane-role-directory,.bot-lane-contract,.lane-phases{margin-top:26px;border:1px solid rgba(145,170,205,.19);background:#0d121c}.minion-answer>header,.support-minions>header,.minion-types>header,.wave-control>header,.minion-sources>header,.lane-role-directory>header,.bot-lane-contract>header,.lane-phases>header{display:flex;align-items:end;justify-content:space-between;gap:28px;padding:30px;border-bottom:1px solid rgba(145,170,205,.16)}.minion-answer h2,.support-minions h2,.minion-types h2,.wave-control h2,.minion-sources h2,.lane-role-directory h2,.bot-lane-contract h2,.lane-phases h2{margin:6px 0 0;font-size:clamp(1.65rem,3vw,2.55rem)}.minion-answer>header>p,.minion-types>header>p,.wave-control>header>p,.lane-role-directory>header>p,.lane-phases>header>p{max-width:510px;margin:0;color:#93a1b7;line-height:1.62}
.minion-answer>div{display:grid;grid-template-columns:repeat(3,1fr)}.minion-answer article{display:grid;grid-template-columns:50px 1fr;gap:17px;padding:29px;border-right:1px solid rgba(145,170,205,.14)}.minion-answer article:last-child{border-right:0}.minion-answer article>i{display:grid;place-items:center;width:50px;height:50px;border:1px solid currentColor;background:rgba(255,255,255,.04);font-size:1.25rem}.minion-answer .is-gold{color:var(--mn-gold)}.minion-answer .is-xp{color:var(--mn-cyan)}.minion-answer .is-solo{color:var(--mn-green)}.minion-answer article span{color:#edf3fb}.minion-answer small,.minion-answer strong{display:block}.minion-answer small{color:currentColor;font-size:.68rem;font-weight:900;text-transform:uppercase}.minion-answer strong{margin-top:5px;font-size:1.08rem}.minion-answer article p{margin:10px 0 0;color:#9facc0;line-height:1.6}.minion-answer>aside{display:grid;grid-template-columns:auto 1fr;gap:18px;margin:0 28px 28px;padding:19px;border:1px solid rgba(87,219,232,.3);background:rgba(87,219,232,.07)}.minion-answer>aside b{color:var(--mn-cyan)}.minion-answer>aside p{margin:0;color:#b3bdcc;line-height:1.55}
.support-minions>header>span{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid rgba(101,223,165,.36);background:rgba(101,223,165,.08);color:var(--mn-green);font-size:.72rem;font-weight:900;text-transform:uppercase}.support-minion-flow{display:grid;grid-template-columns:repeat(4,1fr)}.support-minion-flow article{display:flex;gap:16px;padding:27px;border-right:1px solid rgba(145,170,205,.14)}.support-minion-flow article:last-child{border-right:0}.support-minion-flow small,.support-minion-flow strong{display:block}.support-minion-flow small{color:var(--mn-cyan);font-size:.66rem;font-weight:900;text-transform:uppercase}.support-minion-flow strong{margin-top:5px}.support-minion-flow p{margin:9px 0 0;color:#9daabd;line-height:1.56}.support-minion-calls{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 27px 27px}.support-minion-calls article{padding:18px;border:1px solid rgba(246,200,95,.21);background:rgba(246,200,95,.055)}.support-minion-calls strong{color:var(--mn-gold)}.support-minion-calls p{margin:7px 0 0;color:#a8b4c6;line-height:1.5}
.minion-types>div{display:grid;grid-template-columns:repeat(4,1fr)}.minion-types article{display:grid;grid-template-columns:45px 1fr;gap:14px;padding:27px;border-right:1px solid rgba(145,170,205,.14)}.minion-types article:last-child{border-right:0}.minion-types article>i{display:grid;place-items:center;width:45px;height:45px;border:1px solid currentColor;background:rgba(255,255,255,.04)}.minion-types .is-melee{color:#88a9df}.minion-types .is-caster{color:var(--mn-purple)}.minion-types .is-cannon{color:var(--mn-gold)}.minion-types .is-super{color:var(--mn-pink)}.minion-types span{color:#edf3fb}.minion-types small,.minion-types strong{display:block}.minion-types small{color:currentColor;font-size:.65rem;font-weight:900;text-transform:uppercase}.minion-types strong{margin-top:4px}.minion-types p{margin:9px 0 0;color:#9caabd;line-height:1.55}
.wave-control>div,.lane-phases>div{display:grid;grid-template-columns:repeat(4,1fr)}.wave-control article,.lane-phases article{display:flex;gap:15px;padding:27px;border-right:1px solid rgba(145,170,205,.14)}.wave-control article:last-child,.lane-phases article:last-child{border-right:0}.wave-control small,.wave-control strong,.wave-control em,.lane-phases small,.lane-phases strong{display:block}.wave-control small,.lane-phases small{color:var(--mn-purple);font-size:.65rem;font-weight:900;text-transform:uppercase}.wave-control strong,.lane-phases strong{margin-top:5px}.wave-control p,.lane-phases p{margin:9px 0;color:#9daabd;line-height:1.55}.wave-control em{color:#d9bd72;font-size:.76rem;font-style:normal;line-height:1.45}
.super-minion-plan{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);margin-top:26px;border:1px solid rgba(255,120,159,.27);background:linear-gradient(120deg,rgba(55,16,37,.58),#0d121c 48%)}.super-minion-plan>div{padding:36px;border-right:1px solid rgba(255,120,159,.2)}.super-minion-plan h2{margin:6px 0 14px;font-size:clamp(1.7rem,3.3vw,2.8rem)}.super-minion-plan p{color:#adb8c9;line-height:1.65}.super-minion-plan a{display:inline-flex;margin-top:12px;padding:10px 13px;border:1px solid rgba(255,120,159,.4);color:#ffadc4;text-decoration:none;font-weight:850}.super-minion-plan ol{display:grid;gap:0;margin:0;padding:0;list-style:none}.super-minion-plan li{display:flex;gap:16px;padding:22px 28px;border-bottom:1px solid rgba(145,170,205,.13)}.super-minion-plan li:last-child{border-bottom:0}.super-minion-plan strong,.super-minion-plan small{display:block}.super-minion-plan small{margin-top:5px;color:#94a3b8;line-height:1.45}
.minion-links,.lane-links{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:26px}.minion-links a,.lane-links a{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;padding:20px;border:1px solid rgba(87,219,232,.22);background:#101620;color:#edf3fb;text-decoration:none}.minion-links a:hover,.lane-links a:hover{border-color:var(--mn-cyan);background:#14202b}.minion-links i,.lane-links i{display:grid;place-items:center;width:44px;height:44px;background:rgba(87,219,232,.09);color:var(--mn-cyan)}.minion-links small,.minion-links strong,.lane-links small,.lane-links strong{display:block}.minion-links small,.lane-links small{color:#8291a7;font-size:.64rem;text-transform:uppercase}.minion-links strong,.lane-links strong{margin-top:3px}.minion-sources>div{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding:24px}.minion-sources a{display:grid;grid-template-columns:40px 1fr;gap:13px;align-items:center;padding:17px;border:1px solid rgba(145,170,205,.17);background:#111722;color:#edf3fb;text-decoration:none}.minion-sources a:hover{border-color:var(--mn-gold)}.minion-sources i{display:grid;place-items:center;width:40px;height:40px;color:var(--mn-gold);background:rgba(246,200,95,.08)}.minion-sources strong,.minion-sources small{display:block}.minion-sources small{margin-top:4px;color:#8d9cb1;line-height:1.4}
.minion-links{grid-template-columns:repeat(4,1fr)}
@media(max-width:1040px){.minion-links{grid-template-columns:1fr 1fr}}
.lane-resource-strip{display:grid;grid-template-columns:repeat(4,1fr);margin-top:14px;border:1px solid rgba(145,170,205,.18);background:#0d121c}.lane-resource-strip article{padding:20px 22px;border-right:1px solid rgba(145,170,205,.14)}.lane-resource-strip article:last-child{border-right:0}.lane-resource-strip b,.lane-resource-strip span{display:block}.lane-resource-strip b{color:var(--mn-gold);font-size:.72rem;text-transform:uppercase}.lane-resource-strip span{margin-top:6px;color:#a8b4c5;line-height:1.48}
.lane-role-directory>div{display:grid;grid-template-columns:repeat(5,1fr)}.lane-role-directory article{position:relative;display:grid;align-content:start;min-width:0;padding:27px;border-right:1px solid rgba(145,170,205,.14)}.lane-role-directory article:last-child{border-right:0}.lane-role-directory article>i{margin:18px 0 12px;color:var(--mn-cyan);font-size:1.5rem}.lane-role-directory article>span>small{color:#8493a9;font-size:.66rem;text-transform:uppercase}.lane-role-directory h3{margin:4px 0 18px;font-size:1.4rem}.lane-do,.lane-avoid{padding:14px;border-left:3px solid var(--mn-green);background:rgba(101,223,165,.05)}.lane-avoid{margin-top:9px;border-color:var(--mn-pink);background:rgba(255,120,159,.05)}.lane-do strong{color:var(--mn-green)}.lane-avoid strong{color:var(--mn-pink)}.lane-do p,.lane-avoid p{margin:6px 0 0;color:#a3afc1;line-height:1.48}.lane-role-directory article em{display:block;margin-top:14px;color:#d8bf81;font-size:.76rem;font-style:normal;line-height:1.48}.bot-lane-contract>header>a{padding:9px 12px;border:1px solid rgba(246,200,95,.35);color:var(--mn-gold);text-decoration:none;font-weight:850}.bot-lane-contract>div{display:grid;grid-template-columns:repeat(4,1fr)}.bot-lane-contract article{display:flex;gap:15px;padding:27px;border-right:1px solid rgba(145,170,205,.14)}.bot-lane-contract article:last-child{border-right:0}.bot-lane-contract strong{display:block}.bot-lane-contract p{margin:8px 0 0;color:#9daabd;line-height:1.55}
.lane-questions{display:grid;grid-template-columns:minmax(260px,.42fr) minmax(0,1fr);margin-top:26px;border:1px solid rgba(189,144,255,.25);background:#10131e}.lane-questions header{padding:34px;border-right:1px solid rgba(189,144,255,.2)}.lane-questions h2{margin:7px 0 0;font-size:clamp(1.6rem,3vw,2.5rem)}.lane-questions ol{display:grid;grid-template-columns:1fr 1fr;margin:0;padding:0;list-style:none}.lane-questions li{display:flex;gap:15px;padding:25px;border-right:1px solid rgba(145,170,205,.13);border-bottom:1px solid rgba(145,170,205,.13)}.lane-questions li:nth-child(2n){border-right:0}.lane-questions li:nth-last-child(-n+2){border-bottom:0}.lane-questions strong,.lane-questions small{display:block}.lane-questions small{margin-top:5px;color:#94a2b7;line-height:1.45}
@media(max-width:1040px){.minion-hero,.lanes-hero{grid-template-columns:1fr}.minion-hero-map,.lanes-hero figure{min-height:420px;border-top:1px solid rgba(145,170,205,.18);border-left:0}.support-minion-flow,.minion-types>div,.wave-control>div,.lane-phases>div,.bot-lane-contract>div{grid-template-columns:1fr 1fr}.support-minion-flow article:nth-child(2),.minion-types article:nth-child(2),.wave-control article:nth-child(2),.lane-phases article:nth-child(2),.bot-lane-contract article:nth-child(2){border-right:0}.support-minion-flow article:nth-child(-n+2),.minion-types article:nth-child(-n+2),.wave-control article:nth-child(-n+2),.lane-phases article:nth-child(-n+2),.bot-lane-contract article:nth-child(-n+2){border-bottom:1px solid rgba(145,170,205,.14)}.lane-role-directory>div{grid-template-columns:1fr 1fr}.lane-role-directory article{border-bottom:1px solid rgba(145,170,205,.14)}.lane-role-directory article:nth-child(2n){border-right:0}.lane-role-directory article:last-child{grid-column:1/-1;border-bottom:0}.lane-resource-strip{grid-template-columns:1fr 1fr}.lane-resource-strip article:nth-child(2){border-right:0}.lane-resource-strip article:nth-child(-n+2){border-bottom:1px solid rgba(145,170,205,.14)}}
@media(max-width:720px){.minions-page main,.lanes-page main{width:min(100% - 20px,1240px);padding-top:18px}.minion-hero-copy,.lanes-hero>div{padding:31px 24px}.minion-hero h1,.lanes-hero h1{font-size:clamp(2.25rem,11vw,3.3rem)}.minion-hero-map,.lanes-hero figure{min-height:310px}.minion-jumps{top:58px}.minion-answer>header,.support-minions>header,.minion-types>header,.wave-control>header,.minion-sources>header,.lane-role-directory>header,.bot-lane-contract>header,.lane-phases>header{display:block;padding:23px}.minion-answer>header>p,.minion-types>header>p,.wave-control>header>p,.lane-role-directory>header>p,.lane-phases>header>p{margin-top:11px}.support-minions>header>span,.bot-lane-contract>header>a{display:inline-flex;margin-top:13px}.minion-answer>div,.support-minion-flow,.minion-types>div,.wave-control>div,.lane-phases>div,.bot-lane-contract>div,.support-minion-calls,.minion-links,.lane-links,.minion-sources>div,.lane-resource-strip,.lane-role-directory>div{grid-template-columns:1fr}.minion-answer article,.support-minion-flow article,.minion-types article,.wave-control article,.lane-phases article,.bot-lane-contract article,.lane-resource-strip article,.lane-role-directory article{border-right:0;border-bottom:1px solid rgba(145,170,205,.14)}.lane-role-directory article:last-child{grid-column:auto}.minion-answer>aside{grid-template-columns:1fr;margin:0 18px 18px}.support-minion-calls,.minion-sources>div{padding:0 18px 18px}.super-minion-plan,.lane-questions{grid-template-columns:1fr}.super-minion-plan>div,.lane-questions header{border-right:0;border-bottom:1px solid rgba(145,170,205,.14);padding:25px}.lane-questions ol{grid-template-columns:1fr}.lane-questions li{border-right:0!important;border-bottom:1px solid rgba(145,170,205,.13)!important}.lane-questions li:last-child{border-bottom:0!important}}

/* Visual teaching upgrades for minion economy and lane roles. */
.minion-economy-map,.lane-match-rhythm,.lane-resource-matrix{margin-top:26px;border:1px solid rgba(145,170,205,.2);background:#0b111b;overflow:hidden}
.minion-economy-map>header,.lane-match-rhythm>header,.lane-resource-matrix>header{display:flex;align-items:end;justify-content:space-between;gap:28px;padding:30px;border-bottom:1px solid rgba(145,170,205,.16)}
.minion-economy-map h2,.lane-match-rhythm h2,.lane-resource-matrix h2{margin:6px 0 0;font-size:clamp(1.65rem,3vw,2.55rem)}
.minion-economy-map>header>p,.lane-match-rhythm>header>p,.lane-resource-matrix>header>p{max-width:510px;margin:0;color:#93a1b7;line-height:1.62}
.minion-economy-stage{position:relative;display:grid;grid-template-columns:minmax(210px,.72fr) repeat(3,minmax(0,1fr));gap:0;min-height:240px;background:linear-gradient(90deg,rgba(87,219,232,.055),transparent 38%),linear-gradient(180deg,#0b121c,#080e16)}
.minion-death-token{display:grid;place-content:center;justify-items:center;padding:28px;text-align:center;border-right:1px solid rgba(145,170,205,.16)}
.minion-death-token>span{position:relative;display:grid;place-items:center;width:88px;height:88px;border:1px solid rgba(124,159,213,.52);border-radius:50%;color:#9bbdf0;background:radial-gradient(circle,rgba(87,219,232,.18),rgba(14,25,40,.92) 65%);box-shadow:0 0 32px rgba(87,219,232,.14)}
.minion-death-token>span:after{content:"";position:absolute;inset:8px;border:1px dashed rgba(155,189,240,.35);border-radius:50%}
.minion-death-token i{font-size:2rem}.minion-death-token strong,.minion-death-token small{display:block}.minion-death-token strong{margin-top:14px;color:#f0f7ff;font-size:1.06rem}.minion-death-token small{margin-top:4px;color:#7f91a9;font-size:.7rem}
.minion-economy-path{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr);gap:15px;align-content:center;padding:29px 24px;border-right:1px solid rgba(145,170,205,.13)}
.minion-economy-path:last-child{border-right:0}.minion-economy-path:before{content:"";position:absolute;left:-1px;top:50%;width:17px;height:2px;background:currentColor;box-shadow:0 0 9px currentColor}.minion-economy-path>i{display:grid;place-items:center;width:54px;height:54px;border:1px solid currentColor;border-radius:50%;background:rgba(255,255,255,.035);font-size:1.3rem}.minion-economy-path small,.minion-economy-path strong,.minion-economy-path em{display:block}.minion-economy-path small{font-size:.62rem;font-weight:950;text-transform:uppercase}.minion-economy-path strong{margin-top:5px;color:#edf5fc;font-size:.95rem}.minion-economy-path em{margin-top:8px;color:#93a3b8;font-size:.72rem;font-style:normal;line-height:1.5}.minion-economy-path.is-gold{color:#f4c75e}.minion-economy-path.is-xp{color:#52dce9}.minion-economy-path.is-support{color:#65dfa5}
.minion-types>.minion-wave-lineup{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1.2fr);gap:18px;align-items:center;padding:25px 28px;border-bottom:1px solid rgba(145,170,205,.15);background:linear-gradient(90deg,rgba(105,146,212,.08),rgba(189,144,255,.06),rgba(246,200,95,.08))}
.minion-wave-lineup .wave-line{display:flex;gap:11px;align-items:center;justify-content:center}.wave-unit{position:relative;display:grid;place-items:center;min-width:72px;min-height:82px;padding:10px 8px;border:1px solid currentColor;background:#0b121d;text-align:center;box-shadow:inset 0 -4px rgba(255,255,255,.025)}.wave-unit i{font-size:1.35rem}.wave-unit b,.wave-unit small{display:block}.wave-unit b{margin-top:6px;color:#eaf2fb;font-size:.64rem}.wave-unit small{margin-top:3px;color:#8697ac;font-size:.5rem}.wave-unit.is-melee{color:#88a9df}.wave-unit.is-caster{color:#bd90ff}.wave-unit.is-cannon{color:#f6c85f}.wave-direction{display:grid;justify-items:center;color:#5eddea;text-align:center}.wave-direction i{font-size:2rem}.wave-direction span{margin-top:5px;font-size:.58rem;font-weight:900;text-transform:uppercase}
.minion-types>div:not(.minion-wave-lineup){display:grid;grid-template-columns:repeat(4,1fr)}
.minion-type-emblem{position:relative;display:grid;place-items:center;width:62px;height:62px;border:1px solid currentColor;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),#0a111b 68%);box-shadow:0 0 23px rgba(0,0,0,.28)}.minion-type-emblem i{font-size:1.25rem}.minion-type-emblem b{position:absolute;right:-5px;bottom:-4px;display:grid;place-items:center;min-width:23px;height:23px;padding:0 4px;border:1px solid currentColor;border-radius:50%;color:#eef6ff;background:#101824;font-size:.48rem}.minion-types article{grid-template-columns:62px 1fr}.minion-types article:nth-child(1){background:linear-gradient(145deg,rgba(136,169,223,.09),transparent 54%)}.minion-types article:nth-child(2){background:linear-gradient(145deg,rgba(189,144,255,.09),transparent 54%)}.minion-types article:nth-child(3){background:linear-gradient(145deg,rgba(246,200,95,.09),transparent 54%)}.minion-types article:nth-child(4){background:linear-gradient(145deg,rgba(255,120,159,.09),transparent 54%)}
.lane-match-rhythm{border-color:rgba(87,219,232,.25);background:linear-gradient(120deg,rgba(18,47,60,.36),#0b111b 45%)}.lane-match-rhythm>ol{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none}.lane-match-rhythm li{position:relative;display:grid;grid-template-columns:38px 48px minmax(0,1fr);gap:13px;align-items:center;min-height:112px;padding:22px;border-right:1px solid rgba(145,170,205,.14)}.lane-match-rhythm li:last-child{border-right:0}.lane-match-rhythm li:not(:last-child):after{content:"";position:absolute;right:-8px;top:50%;z-index:2;width:14px;height:14px;border-top:2px solid #57dbe8;border-right:2px solid #57dbe8;transform:translateY(-50%) rotate(45deg);background:#0b111b}.lane-match-rhythm li>b{color:#53677d;font-size:.65rem}.lane-match-rhythm li>i{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(87,219,232,.4);border-radius:50%;color:#75e9f2;background:rgba(87,219,232,.08);font-size:1.12rem}.lane-match-rhythm small,.lane-match-rhythm strong{display:block}.lane-match-rhythm small{color:#62dce8;font-size:.58rem;font-weight:950;text-transform:uppercase}.lane-match-rhythm strong{margin-top:5px;color:#eaf3fa;font-size:.78rem;line-height:1.35}
.lane-swap-guide{margin-top:26px;border:1px solid rgba(189,144,255,.25);background:#0c111b;overflow:hidden}.lane-swap-guide>header{display:flex;align-items:end;justify-content:space-between;gap:28px;padding:30px;border-bottom:1px solid rgba(145,170,205,.16);background:linear-gradient(115deg,rgba(73,43,105,.35),transparent 56%)}.lane-swap-guide h2{margin:6px 0 0;max-width:780px;font-size:clamp(1.65rem,3vw,2.55rem)}.lane-swap-guide>header>p{max-width:500px;margin:0;color:#a5b0c2;line-height:1.62}.lane-swap-answer{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;align-items:center;padding:25px 30px;border-bottom:1px solid rgba(145,170,205,.14);background:linear-gradient(90deg,rgba(101,223,165,.11),rgba(101,223,165,.025))}.lane-swap-answer>i{display:grid;width:58px;height:58px;place-items:center;border:1px solid rgba(101,223,165,.42);border-radius:50%;color:#7ce8b7;background:rgba(101,223,165,.09);font-size:1.35rem}.lane-swap-answer small,.lane-swap-answer strong{display:block}.lane-swap-answer small{color:#65dfa5;font-size:.64rem;font-weight:950;text-transform:uppercase}.lane-swap-answer strong{margin-top:4px;color:#f2fff8;font-size:1.16rem}.lane-swap-answer p{margin:6px 0 0;color:#aebac7;line-height:1.55}.lane-swap-cases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.lane-swap-cases article{display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;align-content:start;min-width:0;padding:25px;border-right:1px solid rgba(145,170,205,.14);border-top:3px solid var(--swap-accent,#65dfa5);background:linear-gradient(160deg,color-mix(in srgb,var(--swap-accent) 8%,transparent),transparent 48%)}.lane-swap-cases article:last-child{border-right:0}.lane-swap-cases .is-warning{--swap-accent:#f6c85f}.lane-swap-cases .is-info{--swap-accent:#57dbe8}.lane-swap-cases .is-danger{--swap-accent:#ef718a}.lane-swap-cases small,.lane-swap-cases strong{display:block}.lane-swap-cases small{color:var(--swap-accent);font-size:.62rem;font-weight:950;text-transform:uppercase}.lane-swap-cases strong{margin-top:5px;color:#f0f4fb;line-height:1.35}.lane-swap-cases p{margin:9px 0 0;color:#9da9ba;line-height:1.55}.lane-movement-examples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(145,170,205,.14)}.lane-movement-examples article{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;min-width:0;padding:25px;border-right:1px solid rgba(145,170,205,.14)}.lane-movement-examples article:last-child{border-right:0}.lane-movement-examples i{display:grid;width:44px;height:44px;place-items:center;border:1px solid rgba(189,144,255,.35);border-radius:50%;color:#c7a6f4;background:rgba(189,144,255,.08);font-size:1rem}.lane-movement-examples article:nth-child(2) i{border-color:rgba(246,200,95,.35);color:#f6c85f;background:rgba(246,200,95,.08)}.lane-movement-examples article:nth-child(3) i{border-color:rgba(87,219,232,.35);color:#68e3ed;background:rgba(87,219,232,.08)}.lane-movement-examples small,.lane-movement-examples strong{display:block}.lane-movement-examples small{color:#a987e4;font-size:.61rem;font-weight:950;text-transform:uppercase}.lane-movement-examples strong{margin-top:4px;color:#edf3fa}.lane-movement-examples p{margin:8px 0 0;color:#9eaabc;line-height:1.52}.lane-swap-guide>aside{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:16px;align-items:center;margin:0 24px 24px;padding:18px;border:1px solid rgba(246,200,95,.3);background:rgba(246,200,95,.055)}.lane-swap-guide>aside>i{display:grid;width:38px;height:38px;place-items:center;color:#f6c85f;background:rgba(246,200,95,.1)}.lane-swap-guide>aside strong{color:#fff3cf}.lane-swap-guide>aside p{margin:5px 0 0;color:#aeb5c1;line-height:1.52}.lane-swap-guide>aside a{padding:10px 13px;border:1px solid rgba(246,200,95,.38);color:#f8d67f;text-align:center;text-decoration:none;font-size:.74rem;font-weight:900}.lane-swap-guide>aside a:hover{border-color:#f6c85f;background:rgba(246,200,95,.1)}
.lane-role-directory article{border-top:4px solid var(--role-accent,#57dbe8);background:linear-gradient(160deg,color-mix(in srgb,var(--role-accent,#57dbe8) 10%,transparent),transparent 42%)}.lane-role-directory article.is-top{--role-accent:#ef718a}.lane-role-directory article.is-jungle{--role-accent:#65dfa5}.lane-role-directory article.is-mid{--role-accent:#bd90ff}.lane-role-directory article.is-bot{--role-accent:#f6c85f}.lane-role-directory article.is-support{--role-accent:#57dbe8}.lane-role-mark{display:flex;align-items:center;justify-content:space-between;gap:14px}.lane-role-mark img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--role-accent) 65%,transparent))}.lane-role-directory article>span>small{display:block;margin-top:18px;color:var(--role-accent)}.lane-role-directory h3{color:#f2f7fd;font-size:1.55rem}.lane-do,.lane-avoid{border-radius:0 5px 5px 0}.lane-do strong,.lane-avoid strong{display:flex;align-items:center;gap:7px}.lane-role-directory article em{display:flex;gap:8px;padding:12px;border:1px solid color-mix(in srgb,var(--role-accent) 24%,transparent);background:color-mix(in srgb,var(--role-accent) 6%,transparent)}.lane-role-directory article em i{flex:0 0 auto;margin-top:2px;color:var(--role-accent)}
.lane-resource-strip article{position:relative;padding-left:62px}.lane-resource-strip article:before{position:absolute;left:20px;top:20px;display:grid;place-items:center;width:30px;height:30px;border:1px solid currentColor;border-radius:50%;font-family:"bootstrap-icons";color:var(--resource-color,#f6c85f);background:color-mix(in srgb,var(--resource-color,#f6c85f) 8%,transparent)}.lane-resource-strip article:nth-child(1){--resource-color:#f6c85f}.lane-resource-strip article:nth-child(1):before{content:"\f635"}.lane-resource-strip article:nth-child(2){--resource-color:#57dbe8}.lane-resource-strip article:nth-child(2):before{content:"\f588"}.lane-resource-strip article:nth-child(3){--resource-color:#65dfa5}.lane-resource-strip article:nth-child(3):before{content:"\f5dc"}.lane-resource-strip article:nth-child(4){--resource-color:#bd90ff}.lane-resource-strip article:nth-child(4):before{content:"\f341"}.lane-resource-strip b{color:var(--resource-color)}
.lane-matrix-table{padding:22px}.lane-matrix-table>div{display:grid;grid-template-columns:minmax(150px,1.15fr) repeat(3,minmax(130px,1fr));align-items:stretch;border:1px solid rgba(145,170,205,.14);border-bottom:0}.lane-matrix-table>div:last-child{border-bottom:1px solid rgba(145,170,205,.14)}.lane-matrix-table>div>*{display:flex;align-items:center;min-width:0;min-height:54px;padding:11px 14px;border-right:1px solid rgba(145,170,205,.12)}.lane-matrix-table>div>*:last-child{border-right:0}.lane-matrix-table span{gap:10px;color:#e8f0f8;font-weight:850}.lane-matrix-table span img{width:26px;height:26px;object-fit:contain}.lane-matrix-table b{color:#96a6ba;font-size:.67rem}.lane-matrix-table .is-heading{border-color:rgba(87,219,232,.28);background:#101c28}.lane-matrix-table .is-heading>*{min-height:43px;color:#7f94aa;font-size:.61rem;text-transform:uppercase}.lane-matrix-table .is-main{color:#67e0a7;background:rgba(101,223,165,.06)}.lane-matrix-table .is-limited{color:#e8bd61;background:rgba(246,200,95,.045)}.lane-matrix-table .is-shared{color:#76dce7;background:rgba(87,219,232,.045)}
@media(max-width:1040px){.minion-economy-stage{grid-template-columns:repeat(3,1fr)}.minion-death-token{grid-column:1/-1;min-height:205px;border-right:0;border-bottom:1px solid rgba(145,170,205,.16)}.minion-economy-path:before{top:-1px;left:50%;width:2px;height:17px}.minion-types>.minion-wave-lineup{grid-template-columns:1fr}.wave-direction{transform:rotate(90deg)}.wave-direction span{display:none}.lane-match-rhythm>ol,.lane-swap-cases{grid-template-columns:1fr 1fr}.lane-match-rhythm li:nth-child(2),.lane-swap-cases article:nth-child(2){border-right:0}.lane-match-rhythm li:nth-child(-n+2),.lane-swap-cases article:nth-child(-n+2){border-bottom:1px solid rgba(145,170,205,.14)}.lane-match-rhythm li:after{display:none}.lane-movement-examples{grid-template-columns:1fr}.lane-movement-examples article{border-right:0;border-bottom:1px solid rgba(145,170,205,.14)}.lane-movement-examples article:last-child{border-bottom:0}}
@media(max-width:720px){.minion-economy-map>header,.lane-match-rhythm>header,.lane-resource-matrix>header,.lane-swap-guide>header{display:block;padding:23px}.minion-economy-map>header>p,.lane-match-rhythm>header>p,.lane-resource-matrix>header>p,.lane-swap-guide>header>p{margin-top:11px}.minion-economy-stage{grid-template-columns:1fr}.minion-death-token{min-height:180px}.minion-economy-path{border-right:0;border-bottom:1px solid rgba(145,170,205,.13)}.minion-types>.minion-wave-lineup{padding:22px 13px}.minion-wave-lineup .wave-line{gap:6px}.wave-unit{min-width:0;flex:1;min-height:73px;padding:8px 4px}.wave-unit b{font-size:.54rem}.wave-unit small{display:none}.minion-types>div:not(.minion-wave-lineup){grid-template-columns:1fr}.lane-match-rhythm>ol,.lane-swap-cases{grid-template-columns:1fr}.lane-match-rhythm li,.lane-swap-cases article{border-right:0;border-bottom:1px solid rgba(145,170,205,.14)}.lane-swap-answer{grid-template-columns:48px minmax(0,1fr);padding:20px}.lane-swap-answer>i{width:44px;height:44px}.lane-movement-examples article{grid-template-columns:42px minmax(0,1fr);padding:21px}.lane-swap-guide>aside{grid-template-columns:36px minmax(0,1fr);margin:0 14px 14px}.lane-swap-guide>aside a{grid-column:1/-1}.lane-resource-strip article{padding-left:62px}.lane-matrix-table{padding:14px;overflow-x:auto;scrollbar-width:thin}.lane-matrix-table>div{min-width:640px}}

.league-guide-faq{margin-top:26px;border:1px solid rgba(145,170,205,.2);background:#0b111b;overflow:hidden}.league-guide-faq>header{display:flex;align-items:end;justify-content:space-between;gap:28px;padding:30px;border-bottom:1px solid rgba(145,170,205,.16)}.league-guide-faq h2{margin:6px 0 0;font-size:clamp(1.65rem,3vw,2.55rem)}.league-guide-faq>header>p{max-width:480px;margin:0;color:#93a1b7;line-height:1.6}.league-guide-faq>div{display:grid;grid-template-columns:1fr 1fr}.league-guide-faq details{border-right:1px solid rgba(145,170,205,.13);border-bottom:1px solid rgba(145,170,205,.13);background:linear-gradient(135deg,rgba(87,219,232,.045),transparent 55%)}.league-guide-faq details:nth-child(2n){border-right:0}.league-guide-faq details:nth-last-child(-n+2){border-bottom:0}.league-guide-faq summary{display:grid;grid-template-columns:40px minmax(0,1fr) 20px;gap:12px;align-items:center;min-height:84px;padding:16px 20px;color:#edf5fc;cursor:pointer;list-style:none}.league-guide-faq summary::-webkit-details-marker{display:none}.league-guide-faq summary>i:first-child{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(87,219,232,.35);border-radius:50%;color:#69e1eb;background:rgba(87,219,232,.08)}.league-guide-faq.is-lanes summary>i:first-child{border-color:rgba(189,144,255,.38);color:#c7a4ff;background:rgba(189,144,255,.08)}.league-guide-faq summary>i:last-child{color:#718499;transition:transform .2s ease}.league-guide-faq details[open] summary>i:last-child{transform:rotate(180deg)}.league-guide-faq summary span{font-weight:850;line-height:1.35}.league-guide-faq details>p{margin:0;padding:0 20px 20px 72px;color:#a8b5c7;line-height:1.62}
@media(max-width:720px){.league-guide-faq>header{display:block;padding:23px}.league-guide-faq>header>p{margin-top:10px}.league-guide-faq>div{grid-template-columns:1fr}.league-guide-faq details{border-right:0;border-bottom:1px solid rgba(145,170,205,.13)!important}.league-guide-faq details:last-child{border-bottom:0!important}.league-guide-faq summary{min-height:76px;padding:14px 16px}.league-guide-faq details>p{padding:0 16px 18px 68px}}

/* Health, mana, Recall and wave timing */
.recall-page{--rc-health:#ff647f;--rc-mana:#55b8ff;--rc-gold:#f4c95d;--rc-wave:#58dfb0;--rc-violet:#b58cff;background:#070b11;color:#edf6ff}.recall-page main{width:min(1480px,calc(100% - 32px));margin:0 auto 76px}.recall-page h1,.recall-page h2,.recall-page h3{letter-spacing:0}.recall-hero{position:relative;min-height:620px;overflow:hidden;border:1px solid #2a4051;border-radius:0 0 8px 8px;background:#09131b}.recall-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.68;filter:saturate(.9)}.recall-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,10,16,.97) 0,rgba(5,10,16,.89) 48%,rgba(5,10,16,.45) 76%,rgba(5,10,16,.72) 100%);border-left:8px solid var(--rc-health)}.recall-hero-copy{position:relative;z-index:2;width:min(820px,66%);padding:clamp(58px,8vw,110px) clamp(30px,6vw,88px)}.recall-hero-copy h1{max-width:790px;margin:8px 0 20px;font-size:clamp(2.9rem,5.8vw,5.8rem);line-height:.96}.recall-hero-copy>p:not(.eyebrow){max-width:730px;margin:0;color:#d3e1ec;font-size:clamp(1.08rem,1.55vw,1.34rem);line-height:1.65}.recall-hero-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}.recall-hero-actions a{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;border:1px solid #3f6374;border-radius:999px;background:#0c1b26;color:#f0fbff;text-decoration:none;font-weight:850}.recall-hero-actions a:first-child{border-color:#57dfe9;background:#0b333b;color:#caffff}.recall-resource-hud{position:absolute;z-index:3;right:28px;bottom:28px;display:grid;gap:10px;width:min(420px,31%)}.recall-resource-hud>div{display:grid;grid-template-columns:1fr auto;gap:5px 16px;padding:15px 17px;border:1px solid #405364;border-radius:6px;background:rgba(5,11,17,.93);box-shadow:0 18px 45px rgba(0,0,0,.35)}.recall-resource-hud span{display:flex;align-items:center;gap:8px;color:var(--bar);font-size:.75rem;font-weight:900;text-transform:uppercase}.recall-resource-hud b{font-size:.85rem}.recall-resource-hud em{grid-column:1/-1;display:block;height:8px;overflow:hidden;border-radius:99px;background:#172431}.recall-resource-hud em:before{content:"";display:block;width:var(--fill);height:100%;background:var(--bar);box-shadow:0 0 15px color-mix(in srgb,var(--bar) 65%,transparent)}.recall-resource-hud .is-health{--bar:var(--rc-health)}.recall-resource-hud .is-mana{--bar:var(--rc-mana)}.recall-resource-hud .is-gold{--bar:var(--rc-gold)}
.recall-jumps{position:sticky;top:70px;z-index:18;display:flex;align-items:center;gap:8px;overflow-x:auto;margin:16px 0 40px;padding:10px 12px;border:1px solid #263b4a;border-radius:7px;background:rgba(7,13,20,.96);scrollbar-width:thin}.recall-jumps strong{padding:0 10px;color:#91a6b8;white-space:nowrap}.recall-jumps a{flex:0 0 auto;padding:9px 14px;border:1px solid #365061;border-radius:999px;background:#0c1720;color:#e8f5fc;text-decoration:none;font-weight:780}.recall-jumps a:hover{border-color:#58dfe9;background:#102b34}
.recall-direct-answer{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(420px,.8fr);margin-bottom:54px;border:1px solid #2d4657;border-left:6px solid var(--rc-wave);border-radius:8px;background:#0b131c;overflow:hidden}.recall-direct-answer>div{position:relative;padding:34px 36px 32px 106px}.recall-answer-icon{position:absolute;left:34px;top:37px;display:grid;place-items:center;width:52px;height:52px;border:1px solid #63e5ba;border-radius:50%;color:#8af1ce;background:#0d2c27;font-size:1.35rem}.recall-direct-answer h2{margin:5px 0 10px;font-size:clamp(1.85rem,3vw,3rem)}.recall-direct-answer>div>p:last-child{max-width:780px;margin:0;color:#adc0cf;line-height:1.65}.recall-direct-answer ol{display:grid;margin:0;padding:0;list-style:none;border-left:1px solid #263c4b}.recall-direct-answer li{display:flex;align-items:center;gap:15px;padding:17px 22px;border-bottom:1px solid #263c4b}.recall-direct-answer li:last-child{border-bottom:0}.recall-direct-answer li span{display:grid;gap:3px}.recall-direct-answer li small{color:#8ca2b5}.recall-direct-answer li strong{font-size:1rem}
.recall-checks,.recall-wave-choice,.recall-role-grid,.recall-resource-types,.recall-sources{margin-bottom:58px}.recall-checks>header,.recall-wave-choice>header,.recall-role-grid>header,.recall-resource-types>header,.recall-sources>header{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:21px}.recall-checks h2,.recall-wave-choice h2,.recall-role-grid h2,.recall-resource-types h2,.recall-sources h2{margin:5px 0 0;font-size:clamp(2rem,3.5vw,3.45rem);line-height:1.04}.recall-checks>header>p,.recall-wave-choice>header>p,.recall-role-grid>header>p,.recall-resource-types>header>p{max-width:570px;margin:0;color:#9cafbe;line-height:1.62}.recall-checks>div{display:grid;grid-template-columns:1fr 1fr;border:1px solid #2a3e4e;border-radius:8px;overflow:hidden}.recall-checks article{--tone:#57dfe9;position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 18px;min-height:270px;padding:27px;border-right:1px solid #273b4b;border-bottom:1px solid #273b4b;background:linear-gradient(140deg,color-mix(in srgb,var(--tone) 8%,#0b121b),#0b121b 55%)}.recall-checks article:nth-child(2n){border-right:0}.recall-checks article:nth-last-child(-n+2){border-bottom:0}.recall-checks article.is-health{--tone:var(--rc-health)}.recall-checks article.is-resource{--tone:var(--rc-mana)}.recall-checks article.is-wave{--tone:var(--rc-wave)}.recall-checks article.is-gold{--tone:var(--rc-gold)}.recall-checks article>b{position:absolute;right:18px;top:18px}.recall-checks article>i{display:grid;place-items:center;width:56px;height:56px;border:1px solid color-mix(in srgb,var(--tone) 65%,#20313e);border-radius:50%;color:var(--tone);background:color-mix(in srgb,var(--tone) 10%,#0a1119);font-size:1.45rem}.recall-checks article>span{min-width:0}.recall-checks small{color:var(--tone);font-weight:900;text-transform:uppercase}.recall-checks h3{margin:6px 0 10px;font-size:1.45rem}.recall-checks p{margin:0;color:#adbdca;line-height:1.58}.recall-checks article strong{display:block;margin-top:17px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--tone) 27%,#263947);color:#e2f1f8;line-height:1.45}
.recall-wave-board{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #2b4050;border-radius:8px;overflow:hidden}.recall-wave-board article{--tone:var(--rc-wave);min-width:0;border-right:1px solid #2b4050;background:#0b121b}.recall-wave-board article:last-child{border-right:0}.recall-wave-board article.is-return{--tone:var(--rc-mana)}.recall-wave-board article.is-danger{--tone:var(--rc-health)}.recall-wave-board article>div{position:relative;padding:26px}.recall-wave-board article>div>b{position:absolute;right:21px;top:-23px}.recall-wave-board small{color:var(--tone);font-weight:900;text-transform:uppercase}.recall-wave-board h3{margin:7px 0 10px;font-size:1.35rem}.recall-wave-board p{margin:0;color:#aebdca;line-height:1.58}.recall-wave-board article>div>strong{display:block;margin-top:15px;color:#e4f1f7}.recall-wave-visual{display:flex;align-items:center;justify-content:center;gap:13px;min-height:150px;border-bottom:1px solid #2b4050;background:linear-gradient(90deg,color-mix(in srgb,var(--tone) 4%,#081018),color-mix(in srgb,var(--tone) 12%,#081018),#081018)}.recall-wave-visual i{width:24px;height:24px;border:2px solid var(--tone);border-radius:50%;background:color-mix(in srgb,var(--tone) 25%,#0b151d);box-shadow:0 0 16px color-mix(in srgb,var(--tone) 35%,transparent)}.recall-wave-visual b{display:grid;place-items:center;width:48px;height:58px;border:2px solid #9fb1c0;border-radius:8px 8px 18px 18px;color:#dce8f1;background:#111c27;font-size:1.25rem}.recall-wave-visual>span{color:var(--rc-health);font-size:1.7rem}.recall-freeze-warning{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:18px;align-items:center;margin-top:13px;padding:20px 22px;border:1px solid #4c6680;border-left:5px solid var(--rc-mana);border-radius:7px;background:#0b1722}.recall-freeze-warning>i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:#a9dcff;background:#102d42;font-size:1.35rem}.recall-freeze-warning div{min-width:0}.recall-freeze-warning small,.recall-freeze-warning strong{display:block}.recall-freeze-warning small{color:#78c5fa;text-transform:uppercase;font-weight:900}.recall-freeze-warning strong{margin-top:3px;font-size:1.12rem}.recall-freeze-warning p{margin:5px 0 0;color:#a8bac8;line-height:1.5}.recall-freeze-warning a{padding:10px 14px;border:1px solid #4e8fb8;border-radius:999px;color:#dff6ff;text-decoration:none;font-weight:800;white-space:nowrap}
.recall-channel{display:grid;grid-template-columns:minmax(0,.82fr) minmax(560px,1.18fr);margin-bottom:58px;border:1px solid #4d3f69;border-left:7px solid var(--rc-violet);border-radius:8px;background:#100d19;overflow:hidden}.recall-channel-copy{padding:clamp(30px,4vw,54px)}.recall-channel-copy h2{margin:5px 0 14px;font-size:clamp(2rem,3.7vw,3.65rem);line-height:1.02}.recall-channel-copy>p:not(.eyebrow){color:#c2b8d3;line-height:1.68}.recall-channel-copy>div{display:flex;gap:14px;margin-top:24px;padding:16px;border:1px solid #594978;background:#171124}.recall-channel-copy>div i{color:#c7a2ff;font-size:1.25rem}.recall-channel-copy>div span{display:grid;gap:4px}.recall-channel-copy>div small{color:#aa9bbd;line-height:1.45}.recall-channel-track{display:grid;grid-template-columns:1fr 1fr;margin:0;padding:0;list-style:none;border-left:1px solid #433753}.recall-channel-track li{display:flex;gap:15px;padding:25px;border-right:1px solid #433753;border-bottom:1px solid #433753;background:#0c0f18}.recall-channel-track li:nth-child(2n){border-right:0}.recall-channel-track li:nth-last-child(-n+2){border-bottom:0}.recall-channel-track li span{min-width:0}.recall-channel-track small,.recall-channel-track strong{display:block}.recall-channel-track small{color:#b593ed;text-transform:uppercase;font-weight:900}.recall-channel-track strong{margin:4px 0 8px;font-size:1.05rem}.recall-channel-track p{margin:0;color:#a9a5b6;line-height:1.5}
.recall-role-grid>div{display:grid;grid-template-columns:repeat(10,1fr);gap:12px}.recall-role-grid article{grid-column:span 2;display:grid;grid-template-columns:62px minmax(0,1fr);gap:15px;min-width:0;padding:21px;border:1px solid #2a4252;border-top:4px solid var(--role-tone,#57dfe9);border-radius:7px;background:#0b131c}.recall-role-grid article:nth-child(1){--role-tone:#e07178}.recall-role-grid article:nth-child(2){--role-tone:#72d69b}.recall-role-grid article:nth-child(3){--role-tone:#70a9e8}.recall-role-grid article:nth-child(4){--role-tone:#e6c567}.recall-role-grid article:nth-child(5){--role-tone:#c596f5}.recall-role-grid img{width:62px;height:62px;object-fit:contain}.recall-role-grid span{min-width:0}.recall-role-grid small{color:var(--role-tone);font-weight:900;text-transform:uppercase}.recall-role-grid h3{margin:4px 0 8px;font-size:1.08rem;overflow-wrap:anywhere}.recall-role-grid p{margin:0;color:#a9bbc8;line-height:1.5}
.recall-resource-types>div{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #2b4151;border-radius:8px;overflow:hidden}.recall-resource-types article{--tone:#57dfe9;min-width:0;padding:25px;border-right:1px solid #2b4151;background:linear-gradient(145deg,color-mix(in srgb,var(--tone) 8%,#0b131c),#0b131c 55%)}.recall-resource-types article:last-child{border-right:0}.recall-resource-types .is-mana{--tone:var(--rc-mana)}.recall-resource-types .is-energy{--tone:var(--rc-gold)}.recall-resource-types .is-special{--tone:var(--rc-violet)}.recall-resource-types .is-none{--tone:var(--rc-wave)}.recall-resource-types i{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--tone);border-radius:50%;color:var(--tone);background:color-mix(in srgb,var(--tone) 9%,#0b131c);font-size:1.25rem}.recall-resource-types h3{margin:16px 0 8px;font-size:1.22rem}.recall-resource-types p{margin:0;color:#a9bac7;line-height:1.55}.recall-mode-note{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:58px}.recall-mode-note article{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:16px;align-items:center;padding:23px;border:1px solid #304657;border-radius:7px;background:#0b131c}.recall-mode-note article>i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:#64dfe9;background:#0d2a34;font-size:1.4rem}.recall-mode-note span{min-width:0}.recall-mode-note small,.recall-mode-note strong{display:block}.recall-mode-note small{color:#7bdde6;font-weight:900;text-transform:uppercase}.recall-mode-note strong{margin:4px 0;font-size:1.05rem}.recall-mode-note p{margin:0;color:#a9bac7;line-height:1.45}.recall-mode-note a{padding:9px 13px;border:1px solid #4d7187;border-radius:999px;color:#e7f8ff;text-decoration:none;font-weight:800;white-space:nowrap}.league-guide-faq.is-recall summary>i:first-child{border-color:rgba(255,100,127,.42);color:#ff8ba0;background:rgba(255,100,127,.09)}.recall-sources>div{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.recall-sources a{display:flex;align-items:center;gap:16px;min-width:0;padding:20px;border:1px solid #2f4657;border-radius:7px;background:#0b131c;color:#eaf7ff;text-decoration:none}.recall-sources a>i{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:50%;color:#61e0e9;background:#0d2c34;font-size:1.25rem}.recall-sources a span{display:grid;min-width:0;gap:4px}.recall-sources small{color:#97adbc;line-height:1.4}
@media(max-width:1120px){.recall-resource-hud{position:relative;right:auto;bottom:auto;z-index:3;width:auto;margin:0 28px 28px}.recall-hero-copy{width:min(850px,100%);padding-bottom:38px}.recall-direct-answer{grid-template-columns:1fr}.recall-direct-answer ol{grid-template-columns:repeat(3,1fr);border-top:1px solid #263c4b;border-left:0}.recall-direct-answer li{border-right:1px solid #263c4b;border-bottom:0}.recall-direct-answer li:last-child{border-right:0}.recall-channel{grid-template-columns:1fr}.recall-channel-track{border-top:1px solid #433753;border-left:0}.recall-role-grid>div{grid-template-columns:1fr 1fr}.recall-role-grid article{grid-column:auto}.recall-role-grid article:last-child{grid-column:1/-1}.recall-resource-types>div{grid-template-columns:1fr 1fr}.recall-resource-types article:nth-child(2){border-right:0}.recall-resource-types article:nth-child(-n+2){border-bottom:1px solid #2b4151}}
@media(max-width:760px){.recall-page main{width:min(100% - 20px,1480px);padding-top:12px}.recall-hero{min-height:0}.recall-hero-shade{background:rgba(5,10,16,.78)}.recall-hero-copy{padding:42px 24px 28px}.recall-hero-copy h1{font-size:clamp(2.35rem,12vw,3.65rem)}.recall-resource-hud{margin:0 16px 18px}.recall-resource-hud>div{grid-template-columns:1fr}.recall-resource-hud b{font-size:.78rem}.recall-jumps{top:58px;margin-bottom:32px}.recall-direct-answer>div{padding:88px 23px 26px}.recall-answer-icon{left:23px;top:24px}.recall-direct-answer ol{grid-template-columns:1fr}.recall-direct-answer li{border-right:0;border-bottom:1px solid #263c4b}.recall-direct-answer li:last-child{border-bottom:0}.recall-checks>header,.recall-wave-choice>header,.recall-role-grid>header,.recall-resource-types>header,.recall-sources>header{display:block}.recall-checks>header>p,.recall-wave-choice>header>p,.recall-role-grid>header>p,.recall-resource-types>header>p{margin-top:10px}.recall-checks>div,.recall-wave-board,.recall-role-grid>div,.recall-resource-types>div,.recall-mode-note,.recall-sources>div{grid-template-columns:1fr}.recall-checks article,.recall-wave-board article,.recall-resource-types article{border-right:0;border-bottom:1px solid #2b4151!important}.recall-checks article:last-child,.recall-wave-board article:last-child,.recall-resource-types article:last-child{border-bottom:0!important}.recall-checks article{grid-template-columns:48px minmax(0,1fr);min-height:0;padding:22px 18px}.recall-checks article>i{width:48px;height:48px}.recall-freeze-warning{grid-template-columns:48px minmax(0,1fr)}.recall-freeze-warning>a{grid-column:1/-1;text-align:center}.recall-channel-copy{padding:28px 22px}.recall-channel-track{grid-template-columns:1fr}.recall-channel-track li{border-right:0;border-bottom:1px solid #433753!important}.recall-channel-track li:last-child{border-bottom:0!important}.recall-role-grid article:last-child{grid-column:auto}.recall-mode-note article{grid-template-columns:48px minmax(0,1fr)}.recall-mode-note article>a{grid-column:1/-1;text-align:center}.recall-sources a{padding:17px}.recall-page .league-guide-faq details>p{padding-left:68px}}

/* League Discord community directory. */
.league-discord-page{--dc-cyan:#58e1ed;--dc-violet:#b994ff;--dc-gold:#f2c765;--dc-green:#69e0aa;--dc-pink:#ff789f;background:#070b12}.league-discord-page main{width:min(100% - 38px,1280px);margin:0 auto;padding:26px 0 72px}.league-discord-page section{margin-top:26px;border:1px solid rgba(145,170,205,.19);background:#0c121c;overflow:hidden}.league-discord-page section>header{display:flex;align-items:end;justify-content:space-between;gap:32px;padding:30px;border-bottom:1px solid rgba(145,170,205,.15)}.league-discord-page section>header h2{margin:6px 0 0;color:#f1f6fc;font-size:clamp(1.65rem,3vw,2.6rem)}.league-discord-page section>header>p{max-width:560px;margin:0;color:#9dabbf;line-height:1.65}
.discord-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,.38fr);min-height:560px;margin-top:18px!important;border-color:rgba(185,148,255,.32)!important;background:#090f18!important}.discord-hero-art{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,9,16,.98) 3%,rgba(5,9,16,.82) 49%,rgba(5,9,16,.3) 100%),linear-gradient(0deg,rgba(8,13,21,.96),transparent 55%),url('/league/champion/blitzcrank/splash.jpg') center 28%/cover no-repeat;opacity:.66}.discord-hero-copy{position:relative;z-index:1;align-self:end;padding:58px 56px}.discord-hero-copy .eyebrow{display:flex;align-items:center;gap:9px;color:var(--dc-violet)}.discord-hero h1{max-width:760px;margin:11px 0 18px;color:#fff;font-size:clamp(3.2rem,7vw,6.6rem);line-height:.94}.discord-hero-copy>p:not(.eyebrow){max-width:760px;margin:0;color:#c5cfdd;font-size:1.08rem;line-height:1.7}.discord-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.discord-actions>a{display:flex;align-items:center;gap:14px;min-height:68px;padding:11px 20px;border:1px solid rgba(155,180,214,.35);color:#eaf2fb;background:rgba(8,15,25,.84);text-decoration:none;transition:border-color .2s,transform .2s}.discord-actions>a:hover{border-color:var(--dc-cyan);transform:translateY(-2px)}.discord-actions>a.is-primary{border-color:#7c5cff;background:#5865f2}.discord-actions>a>i{font-size:1.55rem}.discord-actions small,.discord-actions strong{display:block}.discord-actions small{color:rgba(255,255,255,.68);font-size:.62rem;text-transform:uppercase}.discord-actions strong{margin-top:3px;font-size:.9rem}.discord-invite-note{display:block;max-width:720px;margin-top:15px;color:#8998ad;line-height:1.5}.discord-hero-route{position:relative;z-index:1;align-self:stretch;display:grid;align-content:center;border-left:1px solid rgba(185,148,255,.22);background:rgba(7,12,21,.78)}.discord-hero-route article{display:grid;grid-template-columns:44px 1fr;gap:15px;align-items:center;padding:25px 28px;border-bottom:1px solid rgba(145,170,205,.14)}.discord-hero-route article:last-child{border-bottom:0}.discord-hero-route small,.discord-hero-route strong{display:block}.discord-hero-route small{color:#8191a7;font-size:.62rem;text-transform:uppercase}.discord-hero-route strong{margin-top:4px;color:#eef4fb}
.discord-onboarding{background:linear-gradient(135deg,rgba(88,101,242,.1),#0c121c 55%)!important}.discord-choice-preview{display:grid;grid-template-columns:64px minmax(0,1fr) 34px;gap:20px;align-items:center;margin:28px;padding:24px;border:1px solid rgba(185,148,255,.42);background:#101625}.discord-choice-icon{display:grid;place-items:center;width:64px;height:64px;border:1px solid var(--dc-violet);color:var(--dc-violet);background:rgba(185,148,255,.09);font-size:1.55rem}.discord-choice-preview small,.discord-choice-preview strong{display:block}.discord-choice-preview small{color:#8998ad}.discord-choice-preview strong{margin-top:5px;color:#fff;font-size:1.35rem}.discord-choice-preview p{margin:7px 0 0;color:#aeb9c8;line-height:1.5}.discord-choice-preview>i{color:var(--dc-green);font-size:1.7rem}
.discord-channel-directory>div{display:grid;grid-template-columns:1fr 1fr}.discord-channel-directory a{--channel-color:var(--dc-cyan);display:grid;grid-template-columns:54px minmax(0,1fr) 24px;gap:17px;align-items:start;min-height:178px;padding:27px;border-right:1px solid rgba(145,170,205,.13);border-bottom:1px solid rgba(145,170,205,.13);color:#eaf2fa;text-decoration:none;background:#0c121c}.discord-channel-directory a:nth-child(2n){border-right:0}.discord-channel-directory a:nth-last-child(-n+2){border-bottom:0}.discord-channel-directory a.is-violet{--channel-color:var(--dc-violet)}.discord-channel-directory a.is-gold{--channel-color:var(--dc-gold)}.discord-channel-directory a.is-green{--channel-color:var(--dc-green)}.discord-channel-directory a>i:first-child{display:grid;place-items:center;width:54px;height:54px;border:1px solid var(--channel-color);color:var(--channel-color);background:rgba(255,255,255,.03);font-size:1.25rem}.discord-channel-directory small,.discord-channel-directory strong{display:block}.discord-channel-directory small{color:var(--channel-color);font-size:.58rem;text-transform:uppercase}.discord-channel-directory strong{margin-top:5px;font-size:1.14rem}.discord-channel-directory p{margin:9px 0 0;color:#99a7ba;line-height:1.52}.discord-channel-directory a>i:last-child{color:#687a90}.discord-channel-directory a:hover{background:#111a27}
.discord-team-flow{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr)}.discord-team-copy{padding:34px}.discord-team-copy h2{margin:7px 0 12px;font-size:clamp(1.8rem,3vw,2.7rem)}.discord-team-copy>p:not(.eyebrow){color:#9eacbf;line-height:1.62}.discord-lfg-example{margin-top:24px;border-left:4px solid var(--dc-gold);padding:20px;background:#111724}.discord-lfg-example>span{color:var(--dc-gold);font-size:.65rem;font-weight:900;text-transform:uppercase}.discord-lfg-example blockquote{margin:14px 0;padding:0;color:#f0f5fb;font-size:1.02rem;line-height:1.55}.discord-lfg-example button{padding:10px 14px;border:1px solid rgba(242,199,101,.45);color:#f3d582;background:rgba(242,199,101,.08);font-weight:850;cursor:pointer}.discord-lfg-example button.is-copied{border-color:var(--dc-green);color:var(--dc-green)}.discord-lfg-example>small{display:block;margin-top:10px;color:#8493a8}.discord-voice-list{padding:27px;border-left:1px solid rgba(145,170,205,.16);background:#090f18}.discord-voice-list>span{display:block;margin-bottom:12px;color:#7f90a6;font-size:.62rem;font-weight:900;text-transform:uppercase}.discord-voice-list a{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center;padding:15px;border:1px solid rgba(145,170,205,.16);border-bottom:0;color:#edf4fb;text-decoration:none}.discord-voice-list a:last-child{border-bottom:1px solid rgba(145,170,205,.16)}.discord-voice-list a>i{grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;color:var(--dc-cyan);background:rgba(88,225,237,.08)}.discord-voice-list strong,.discord-voice-list small{display:block}.discord-voice-list small{color:#8090a5;font-size:.62rem}
.discord-role-picker>div{display:grid;grid-template-columns:repeat(5,1fr)}.discord-role-picker article{display:grid;align-content:start;justify-items:start;min-height:200px;padding:25px;border-right:1px solid rgba(145,170,205,.14)}.discord-role-picker article:last-child{border-right:0}.discord-role-picker article>i{margin:23px 0 12px;color:var(--dc-cyan);font-size:1.35rem}.discord-role-picker strong{font-size:1.12rem}.discord-role-picker p{margin:8px 0 0;color:#929fb2;line-height:1.5}.discord-safety>div{display:grid;grid-template-columns:repeat(3,1fr)}.discord-safety article{display:grid;grid-template-columns:50px 1fr;gap:15px;padding:28px;border-right:1px solid rgba(145,170,205,.14)}.discord-safety article:last-child{border-right:0}.discord-safety article>i{display:grid;place-items:center;width:50px;height:50px;border:1px solid currentColor}.discord-safety .is-safe{color:var(--dc-green)}.discord-safety .is-private{color:var(--dc-gold)}.discord-safety .is-report{color:var(--dc-pink)}.discord-safety strong{color:#eef5fc}.discord-safety p{margin:8px 0 0;color:#97a5b8;line-height:1.55}
.discord-faq>div{display:grid;grid-template-columns:1fr 1fr}.discord-faq details{border-right:1px solid rgba(145,170,205,.13);border-bottom:1px solid rgba(145,170,205,.13)}.discord-faq details:nth-child(2n){border-right:0}.discord-faq details:nth-last-child(-n+2){border-bottom:0}.discord-faq summary{display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:14px;padding:23px;color:#edf4fa;font-weight:850;cursor:pointer;list-style:none}.discord-faq summary::-webkit-details-marker{display:none}.discord-faq summary i{color:#708299;transition:transform .2s}.discord-faq details[open] summary i{transform:rotate(180deg)}.discord-faq details p{margin:0;padding:0 23px 23px;color:#a1aec0;line-height:1.62}.discord-final-call{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:22px;align-items:center;padding:30px;border-color:rgba(88,101,242,.48)!important;background:linear-gradient(110deg,rgba(88,101,242,.18),rgba(185,148,255,.07),#0c121c)!important}.discord-final-call>i{display:grid;place-items:center;width:64px;height:64px;border:1px solid #8d98ff;color:#8d98ff;font-size:1.7rem}.discord-final-call small,.discord-final-call strong{display:block}.discord-final-call small{color:#9ba6b8;font-size:.62rem;text-transform:uppercase}.discord-final-call strong{margin-top:4px;color:#fff;font-size:1.35rem}.discord-final-call p{margin:6px 0 0;color:#a7b2c1}.discord-final-call>a{padding:14px 18px;color:#fff;background:#5865f2;text-decoration:none;font-weight:900}.league-discord-page footer{border-top:1px solid rgba(145,170,205,.15)}
@media(max-width:900px){.discord-hero{grid-template-columns:1fr}.discord-hero-route{grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(185,148,255,.22);border-left:0}.discord-hero-route article{grid-template-columns:40px 1fr;border-right:1px solid rgba(145,170,205,.14);border-bottom:0}.discord-hero-route article:last-child{border-right:0}.discord-role-picker>div{grid-template-columns:1fr 1fr}.discord-role-picker article{border-bottom:1px solid rgba(145,170,205,.14)}.discord-role-picker article:nth-child(2n){border-right:0}.discord-role-picker article:last-child{grid-column:1/-1;border-bottom:0}.discord-safety>div{grid-template-columns:1fr}.discord-safety article{border-right:0;border-bottom:1px solid rgba(145,170,205,.14)}.discord-safety article:last-child{border-bottom:0}}
@media(max-width:680px){.league-discord-page main{width:min(100% - 20px,1280px);padding-top:18px}.league-discord-page section>header{display:block;padding:23px}.league-discord-page section>header>p{margin-top:10px}.discord-hero{min-height:0}.discord-hero-copy{padding:42px 24px}.discord-hero h1{font-size:clamp(2.8rem,14vw,4.4rem)}.discord-actions{display:grid}.discord-actions>a{width:100%}.discord-hero-route{grid-template-columns:1fr}.discord-hero-route article{border-right:0;border-bottom:1px solid rgba(145,170,205,.14)}.discord-choice-preview{grid-template-columns:52px minmax(0,1fr);margin:18px;padding:18px}.discord-choice-icon{width:52px;height:52px}.discord-choice-preview>i{display:none}.discord-channel-directory>div,.discord-faq>div{grid-template-columns:1fr}.discord-channel-directory a,.discord-faq details{border-right:0;border-bottom:1px solid rgba(145,170,205,.13)!important}.discord-channel-directory a:last-child,.discord-faq details:last-child{border-bottom:0!important}.discord-team-flow{grid-template-columns:1fr}.discord-team-copy{padding:24px}.discord-voice-list{border-top:1px solid rgba(145,170,205,.16);border-left:0}.discord-role-picker>div{grid-template-columns:1fr}.discord-role-picker article,.discord-role-picker article:last-child{grid-column:auto;border-right:0;border-bottom:1px solid rgba(145,170,205,.14)}.discord-role-picker article:last-child{border-bottom:0}.discord-final-call{grid-template-columns:52px 1fr;padding:23px}.discord-final-call>i{width:52px;height:52px}.discord-final-call>a{grid-column:1/-1;text-align:center}}

/* Compact, non-overlapping League navigation for phone widths. */
@media(max-width:520px){.topbar{min-height:94px;padding:7px 8px}.topbar .league-nav{grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;overflow:visible}.topbar .league-nav>*{min-width:0}.topbar .league-nav>a,.topbar .league-nav-more>summary,.topbar .league-language>summary{display:flex;justify-content:center;min-width:0;width:100%;height:42px;min-height:42px;padding:0;border-radius:6px;overflow:hidden}.topbar .league-nav>a .league-nav-label,.topbar .league-nav-more>summary>span,.topbar .league-language .language-current-name,.topbar .league-language .language-current-code,.topbar .league-language .language-chevron{display:none}.topbar .league-nav-more>summary:after{display:none}.topbar .league-nav>a>.bi,.topbar .league-nav-more>summary>.bi{margin:0;font-size:18px;line-height:1}.topbar .league-language .language-globe{width:19px;height:19px}.topbar .league-nav-more>div,.topbar .league-language>div{top:94px}.minions-page .minion-jumps{top:94px}}

/* Discord team-post action and the between-match routine tool. */
.discord-copy-row{display:grid;grid-template-columns:minmax(210px,.55fr) minmax(0,1fr);gap:16px;align-items:center;margin-top:18px}.discord-lfg-example .discord-copy-row>button{display:flex;align-items:center;justify-content:flex-start;gap:13px;min-height:62px;padding:11px 16px;border:1px solid #e1b84f;border-radius:6px;color:#fff;background:linear-gradient(135deg,#5e4613,#34270e);box-shadow:inset 0 -3px rgba(255,205,87,.16);text-align:left;transition:border-color .2s,background .2s,transform .2s}.discord-lfg-example .discord-copy-row>button:hover{border-color:#ffe08c;background:linear-gradient(135deg,#725519,#40300f);transform:translateY(-1px)}.discord-lfg-example .discord-copy-row>button>i{display:grid;width:38px;height:38px;flex:0 0 38px;place-items:center;border-radius:5px;background:rgba(255,255,255,.1);font-size:1.05rem}.discord-lfg-example .discord-copy-row>button span,.discord-lfg-example .discord-copy-row>button :is(small,strong){display:block}.discord-lfg-example .discord-copy-row>button small{color:#e8cf94;font-size:.62rem;line-height:1.2;text-transform:uppercase}.discord-lfg-example .discord-copy-row>button strong{margin-top:4px;color:#fff;font-size:.92rem}.discord-lfg-example .discord-copy-row>button.is-copied{border-color:#5ce6ad;background:linear-gradient(135deg,#13543f,#0b2f25);color:#fff}.discord-lfg-example .discord-copy-row>small{margin:0;color:#9baabd;line-height:1.5}
.discord-template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}.discord-template-grid .discord-lfg-example{display:flex;flex-direction:column;min-width:0;margin:0;padding:19px;border:1px solid rgba(145,170,205,.18);border-left:4px solid var(--dc-gold);background:linear-gradient(145deg,#111724,#0c121d)}.discord-template-grid .discord-lfg-example:nth-child(2){border-left-color:var(--dc-cyan)}.discord-template-grid .discord-lfg-example:nth-child(3){border-left-color:var(--dc-green)}.discord-template-grid .discord-lfg-example:nth-child(4){border-left-color:#a982f2}.discord-template-grid h3{margin:8px 0 0;color:#fff;font-size:1.08rem}.discord-template-grid blockquote{flex:1;overflow-wrap:anywhere}.discord-template-grid .discord-copy-row{grid-template-columns:1fr;gap:9px}.discord-template-grid .discord-copy-row>button{width:100%}
.discord-post-builder{margin-top:25px;border:1px solid rgba(88,225,237,.34);border-radius:7px;background:#090f18;box-shadow:0 22px 55px rgba(0,0,0,.24)}.discord-post-builder>header{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:17px 19px;border-bottom:1px solid rgba(88,225,237,.18);background:linear-gradient(90deg,rgba(88,225,237,.12),rgba(185,148,255,.07))}.discord-post-builder>header span{display:flex;align-items:center;gap:10px;color:#f1fbff}.discord-post-builder>header i{color:var(--dc-cyan)}.discord-post-builder>header small{color:#8295a9;font-size:.65rem;font-weight:800;text-transform:uppercase}.discord-builder-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(145,170,205,.16)}.discord-builder-fields label{display:grid;gap:7px;min-width:0;padding:15px;background:#0c141f}.discord-builder-fields label>span{color:#87a0b6;font-size:.65rem;font-weight:900;text-transform:uppercase}.discord-builder-fields select{width:100%;min-width:0;min-height:44px;padding:0 36px 0 12px;border:1px solid #34495d;border-radius:5px;color:#f1f7fb;background:#121f2c;font:inherit}.discord-builder-preview{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.42fr);gap:16px;align-items:center;padding:19px;border-top:1px solid rgba(88,225,237,.2);background:#0e1925}.discord-builder-preview>span{grid-column:1/-1}.discord-builder-preview>span small,.discord-builder-preview>span strong{display:block}.discord-builder-preview>span small{color:var(--dc-cyan);font-size:.62rem;font-weight:900}.discord-builder-preview>span strong{margin-top:3px;color:#fff}.discord-builder-preview blockquote{min-width:0;margin:0;padding:15px;border-left:3px solid var(--dc-cyan);color:#f5f8fb;background:#101f2c;line-height:1.55;overflow-wrap:anywhere}.discord-builder-preview>button{display:flex;align-items:center;gap:12px;min-height:62px;padding:11px 14px;border:1px solid #58e1ed;border-radius:6px;color:#fff;background:linear-gradient(135deg,#14515a,#0c2e35);text-align:left;cursor:pointer}.discord-builder-preview>button>i{display:grid;width:36px;height:36px;flex:0 0 36px;place-items:center;border-radius:5px;background:rgba(255,255,255,.1)}.discord-builder-preview>button span,.discord-builder-preview>button :is(small,strong){display:block}.discord-builder-preview>button small{color:#a8e8ec;font-size:.6rem;text-transform:uppercase}.discord-builder-preview>button strong{margin-top:3px}.discord-builder-preview>button.is-copied{border-color:#5ce6ad;background:linear-gradient(135deg,#13543f,#0b2f25)}.discord-builder-status{grid-column:1/-1;color:#8fa1b4}.discord-template-heading{display:flex;justify-content:space-between;gap:18px;align-items:end;margin-top:28px;padding-top:20px;border-top:1px solid rgba(145,170,205,.15)}.discord-template-heading span,.discord-template-heading strong{display:block}.discord-template-heading span{color:#a982f2;font-size:.65rem;font-weight:900}.discord-template-heading strong{color:#fff;font-size:1.08rem}

.between-page{--between-water:#5ee5ee;--between-move:#78e3a8;--between-reset:#ffbe69;--between-violet:#ad91ff}.between-page main{width:min(1280px,calc(100% - 32px))}.between-page main>section{overflow:hidden;border:1px solid rgba(132,162,187,.2);border-radius:7px;background:#0b131c}.between-workspace{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(350px,.85fr);min-height:570px;margin-top:18px;background:#071019!important;isolation:isolate}.between-workspace:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(5,12,20,.98),rgba(5,12,20,.86) 52%,rgba(5,12,20,.55)),url('/league/assets/vex-social-20260718.jpg') center/cover no-repeat;filter:saturate(.85)}.between-workspace:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#071019 0,transparent 48%)}.between-intro{align-self:end;padding:55px}.between-intro .eyebrow{display:flex;align-items:center;gap:9px;color:var(--between-water)}.between-intro h1{max-width:800px;margin:12px 0 18px;color:#fff;font-size:clamp(3rem,6.7vw,6.4rem);line-height:.94}.between-intro>p:not(.eyebrow){max-width:720px;margin:0;color:#c3d0dc;font-size:1.05rem;line-height:1.7}.between-rule{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:center;max-width:690px;margin-top:25px;padding:14px;border:1px solid rgba(94,229,238,.4);border-radius:6px;background:rgba(7,24,31,.86)}.between-rule>i{display:grid;width:46px;height:46px;place-items:center;border-radius:5px;color:#061419;background:var(--between-water);font-size:1.25rem}.between-rule :is(strong,small){display:block}.between-rule strong{color:#eafcfd}.between-rule small{margin-top:4px;color:#96adb6;line-height:1.45}.between-planner{align-self:center;margin:34px 34px 34px 0;border:1px solid rgba(173,145,255,.38);border-radius:7px;background:rgba(8,14,24,.94);box-shadow:0 28px 70px rgba(0,0,0,.28)}.between-planner>header{padding:20px 22px;border-bottom:1px solid rgba(173,145,255,.2)}.between-planner>header :is(span,strong,small){display:block}.between-planner>header span{color:var(--between-violet);font-size:.65rem;font-weight:900}.between-planner>header strong{margin-top:5px;color:#fff;font-size:1.25rem}.between-planner>header small{margin-top:3px;color:#8292a5}.between-planner>label{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:16px;align-items:center;padding:17px 20px;border-bottom:1px solid rgba(132,162,187,.13)}.between-planner label>span{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:12px;align-items:center}.between-planner label i{grid-row:1/3;display:grid;width:38px;height:38px;place-items:center;border-radius:5px;color:#061419;background:var(--between-water)}.between-planner label:nth-of-type(2) i{background:var(--between-move)}.between-planner label:nth-of-type(3) i{background:var(--between-reset)}.between-planner label b,.between-planner label small{display:block}.between-planner label b{color:#eef5f8}.between-planner label small{margin-top:2px;color:#8092a4;font-size:.72rem}.between-planner select{width:100%;min-height:44px;padding:0 38px 0 12px;border:1px solid #344557;border-radius:5px;color:#edf4f8;background:#111d29}.between-planner>button{display:flex;width:calc(100% - 36px);min-height:65px;align-items:center;gap:13px;margin:18px;padding:11px 16px;border:1px solid #66e7be;border-radius:6px;color:#071712;background:#65deb6;box-shadow:inset 0 -4px rgba(4,75,54,.17);text-align:left;cursor:pointer}.between-planner>button:hover{background:#7becC5;transform:translateY(-1px)}.between-planner>button>i{font-size:1.5rem}.between-planner>button span,.between-planner>button :is(small,strong){display:block}.between-planner>button small{font-size:.63rem;font-weight:900;text-transform:uppercase}.between-planner>button strong{margin-top:3px;font-size:1rem}
.between-check>header,.between-basics>header{display:flex;justify-content:space-between;gap:26px;align-items:end;padding:30px;border-bottom:1px solid rgba(132,162,187,.16)}.between-check h2,.between-basics h2,.between-companion h2{margin:6px 0 0;color:#fff;font-size:clamp(1.8rem,3.3vw,2.8rem)}.between-check>header .eyebrow,.between-basics>header .eyebrow{margin:0;color:var(--between-water)}.between-basics>header>p{max-width:560px;margin:0;color:#98a9b8;line-height:1.6}.between-session-count{display:flex;align-items:baseline;gap:11px}.between-session-count b{color:var(--between-water);font-size:2.35rem}.between-session-count span{color:#8496a8}.between-check-grid{display:grid;grid-template-columns:repeat(3,1fr)}.between-check-grid article{--check:var(--between-water);position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);gap:15px;min-height:190px;padding:26px;border-right:1px solid rgba(132,162,187,.14);background:#0b141e}.between-check-grid article:last-child{border-right:0}.between-check-grid article.is-move{--check:var(--between-move)}.between-check-grid article.is-reset{--check:var(--between-reset)}.between-check-grid article>i{display:grid;width:52px;height:52px;place-items:center;border:1px solid var(--check);border-radius:6px;color:var(--check);font-size:1.3rem}.between-check-grid article span :is(small,strong){display:block}.between-check-grid article span small{color:var(--check);font-size:.65rem;font-weight:900;text-transform:uppercase}.between-check-grid article span strong{margin-top:6px;color:#fff;font-size:1.04rem}.between-check-grid article p{margin:9px 0 0;color:#94a6b7;line-height:1.5}.between-check-grid article> b{position:absolute;right:18px;bottom:10px;color:rgba(255,255,255,.06);font-size:4.7rem;line-height:1}.between-check-grid article.is-due{background:color-mix(in srgb,var(--check) 11%,#0b141e);box-shadow:inset 0 -4px var(--check)}.between-now{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:16px;align-items:center;margin:22px;padding:20px;border:1px solid var(--between-reset);border-radius:6px;background:#21190d}.between-now>i{display:grid;width:52px;height:52px;place-items:center;border-radius:6px;color:#271800;background:var(--between-reset);font-size:1.3rem}.between-now :is(small,strong){display:block}.between-now small{color:#d3aa68;font-size:.64rem;font-weight:900;text-transform:uppercase}.between-now strong{margin-top:4px;color:#fff;font-size:1.1rem}.between-now p{margin:5px 0 0;color:#cbbda8}.between-now button{min-height:44px;padding:0 18px;border:1px solid #ffd594;border-radius:5px;color:#241500;background:#ffd594;font-weight:900;cursor:pointer}
.between-ready>header{display:flex;justify-content:space-between;gap:24px;align-items:end;padding:26px 30px;border-bottom:1px solid rgba(132,162,187,.16)}.between-ready h2{margin:6px 0 0;color:#fff;font-size:clamp(1.7rem,3vw,2.55rem)}.between-ready>header>p{max-width:540px;margin:0;color:#91a4b5;line-height:1.55}.between-ready>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.between-ready button{display:grid;grid-template-columns:42px minmax(0,1fr) 24px;gap:12px;align-items:center;min-width:0;min-height:96px;padding:17px;border:0;border-right:1px solid rgba(132,162,187,.14);color:#dbe6ed;background:#0b141e;text-align:left;cursor:pointer}.between-ready button:last-child{border-right:0}.between-ready button>i:first-child{display:grid;width:42px;height:42px;place-items:center;border:1px solid #3c596b;border-radius:6px;color:#8ab6ca;background:#101e29}.between-ready button>i:last-child{color:#425563;font-size:1.15rem}.between-ready button span,.between-ready button :is(strong,small){display:block;min-width:0}.between-ready button strong{color:#edf4f8}.between-ready button small{margin-top:4px;color:#8194a5}.between-ready button.is-ready{background:rgba(75,215,164,.09);box-shadow:inset 0 -3px #5de0ad}.between-ready button.is-ready>i:first-child{border-color:#5de0ad;color:#082017;background:#5de0ad}.between-ready button.is-ready>i:last-child{color:#67e5b4}.between-session-tools{display:flex;gap:20px;align-items:center}.between-session-tools>div:last-child{display:flex;gap:6px}.between-session-tools button{min-height:36px;padding:0 11px;border:1px solid #34495a;border-radius:5px;color:#b9c8d3;background:#101b25;font-weight:800;cursor:pointer}.between-session-tools button:hover{border-color:var(--between-water);color:#fff}.between-session-tools button:disabled{opacity:.35;cursor:default}
.between-basics>div{display:grid;grid-template-columns:repeat(3,1fr)}.between-basics article{--check:var(--between-water);display:grid;grid-template-columns:40px 46px minmax(0,1fr);gap:14px;align-content:start;min-height:310px;padding:26px;border-right:1px solid rgba(132,162,187,.14)}.between-basics article:last-child{border-right:0}.between-basics article.is-move{--check:var(--between-move)}.between-basics article.is-reset{--check:var(--between-reset)}.between-basics article>i{display:grid;width:46px;height:46px;place-items:center;border-radius:6px;color:#071318;background:var(--check);font-size:1.2rem}.between-basics article strong{display:block;color:#fff;font-size:1.05rem}.between-basics article p{margin:9px 0 14px;color:#94a5b5;line-height:1.6}.between-basics article a{color:var(--check);font-weight:800;text-decoration:none}.between-companion{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.7fr);gap:30px;padding:36px;background:linear-gradient(120deg,rgba(92,229,238,.08),rgba(173,145,255,.08),#0b131c)!important}.between-companion>div>p:not(.eyebrow){max-width:690px;color:#9dafbe;line-height:1.65}.between-companion ol{display:grid;gap:1px;margin:0;padding:0;background:rgba(132,162,187,.18);list-style:none}.between-companion li{display:grid;grid-template-columns:40px 1fr;gap:13px;align-items:center;padding:14px;background:#0b141e}.between-companion li :is(strong,small){display:block}.between-companion li strong{color:#f2f7fa}.between-companion li small{margin-top:3px;color:#8395a7}.between-companion>a{grid-column:1/-1;justify-self:start;padding:13px 17px;border:1px solid var(--between-violet);border-radius:5px;color:#eee9ff;background:rgba(173,145,255,.09);font-weight:900;text-decoration:none}.between-boundary{display:grid;grid-template-columns:repeat(3,1fr)}.between-boundary article{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;padding:25px;border-right:1px solid rgba(132,162,187,.14)}.between-boundary article:last-child{border-right:0}.between-boundary i{display:grid;width:46px;height:46px;place-items:center;border:1px solid var(--between-water);border-radius:6px;color:var(--between-water)}.between-boundary strong{color:#f1f7fa}.between-boundary p{margin:7px 0 0;color:#91a4b4;line-height:1.5}
@media(max-width:900px){.between-workspace{grid-template-columns:1fr}.between-intro{padding:44px 36px}.between-planner{margin:0 32px 32px}.between-ready>div{grid-template-columns:repeat(2,minmax(0,1fr))}.between-ready button:nth-child(2){border-right:0}.between-ready button:nth-child(-n+2){border-bottom:1px solid rgba(132,162,187,.14)}.between-check-grid,.between-basics>div,.between-boundary{grid-template-columns:1fr}.between-check-grid article,.between-basics article,.between-boundary article{min-height:0;border-right:0;border-bottom:1px solid rgba(132,162,187,.14)}.between-check-grid article:last-child,.between-basics article:last-child,.between-boundary article:last-child{border-bottom:0}.between-companion{grid-template-columns:1fr}}
@media(max-width:900px){.discord-template-grid{grid-template-columns:1fr}.discord-builder-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.discord-copy-row{grid-template-columns:1fr}.discord-lfg-example .discord-copy-row>button{width:100%}.discord-template-grid .discord-lfg-example{padding:17px}.discord-builder-fields{grid-template-columns:1fr}.discord-builder-preview{grid-template-columns:1fr}.discord-builder-preview>button{width:100%}.discord-template-heading{display:block}.discord-template-heading strong{margin-top:5px}.between-page main{width:calc(100% - 20px)}.between-intro{padding:38px 22px}.between-intro h1{font-size:clamp(2.7rem,14vw,4.3rem)}.between-planner{margin:0 14px 18px}.between-planner>label{grid-template-columns:1fr}.between-ready>header,.between-check>header,.between-basics>header{display:block;padding:23px}.between-ready>header>p{margin-top:10px}.between-ready>div{grid-template-columns:1fr}.between-ready button,.between-ready button:nth-child(2){border-right:0;border-bottom:1px solid rgba(132,162,187,.14)}.between-ready button:last-child{border-bottom:0}.between-session-tools{display:block;margin-top:16px}.between-session-tools>div:last-child{margin-top:10px}.between-check-grid article,.between-basics article,.between-boundary article{padding:22px}.between-basics article{grid-template-columns:36px 42px minmax(0,1fr)}.between-now{grid-template-columns:44px 1fr;margin:14px;padding:16px}.between-now>i{width:44px;height:44px}.between-now button{grid-column:1/-1;width:100%}.between-companion{padding:25px 22px}.between-companion>a{width:100%;text-align:center}}

/* Discord discovery: compact navigation and distinct section identities. */
.discord-page-jumps {
  position: sticky;
  top: 72px;
  z-index: 18;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  margin: 16px 0 0;
  padding: 1px;
  border-color: #413d4e;
  background: #413d4e;
}
.discord-page-jumps > span,
.discord-page-jumps > a {
  display: flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  color: #b8c6d4;
  background: #0d141d;
  font-size: .69rem;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.discord-page-jumps > span { color: #f0d477; background: #19170f; }
.discord-page-jumps > *:nth-child(2) i { color: var(--dc-violet); }
.discord-page-jumps > *:nth-child(3) i { color: var(--dc-cyan); }
.discord-page-jumps > *:nth-child(4) i { color: var(--dc-green); }
.discord-page-jumps > *:nth-child(5) i { color: var(--dc-gold); }
.discord-page-jumps > *:nth-child(6) i { color: var(--dc-pink); }
.discord-page-jumps > *:nth-child(7) i { color: #94a9ff; }
.discord-page-jumps > a:is(:hover, :focus-visible) { color: #fff; background: #17222e; }
.league-discord-page section[id] { scroll-margin-top: 140px; }
.discord-onboarding { --discord-section: var(--dc-violet); }
.discord-destinations { --discord-section: var(--dc-gold); }
.discord-channel-directory { --discord-section: var(--dc-cyan); }
.discord-team-flow { --discord-section: var(--dc-green); }
.discord-role-picker { --discord-section: var(--dc-gold); }
.discord-safety { --discord-section: var(--dc-pink); }
.discord-faq { --discord-section: #94a9ff; }
.league-discord-page section[id] { border-top: 3px solid var(--discord-section); }
.league-discord-page section[id] > header {
  background: linear-gradient(110deg, color-mix(in srgb, var(--discord-section) 10%, #0d141d), #0d141d 58%);
}
.discord-hero-route article:nth-child(1) .league-step-number { border-color: var(--dc-violet); color: var(--dc-violet); }
.discord-hero-route article:nth-child(2) .league-step-number { border-color: var(--dc-cyan); color: var(--dc-cyan); }
.discord-hero-route article:nth-child(3) .league-step-number { border-color: var(--dc-green); color: var(--dc-green); }
.discord-role-picker article:nth-child(1) > i { color: #ed7397; }
.discord-role-picker article:nth-child(2) > i { color: #69e0aa; }
.discord-role-picker article:nth-child(3) > i { color: #b994ff; }
.discord-role-picker article:nth-child(4) > i { color: #f2c765; }
.discord-role-picker article:nth-child(5) > i { color: #58e1ed; }

@media (max-width: 900px) {
  .discord-page-jumps { position: static; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .discord-page-jumps > span { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .discord-page-jumps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .discord-page-jumps > span { grid-column: 1 / -1; }
}

/* Discord community showcase: branded artwork and an honest channel preview. */
.league-discord-page .discord-hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .72fr);
  min-height: 540px;
  border-top: 4px solid #9d82ff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .34);
}
.league-discord-page .discord-hero-art {
  background:
    linear-gradient(90deg, rgba(3, 8, 11, .96) 0%, rgba(3, 8, 11, .82) 42%, rgba(3, 8, 11, .28) 100%),
    linear-gradient(0deg, rgba(3, 8, 11, .9), transparent 56%),
    url('/league/assets/void-resonance-league-hero-1920x640-v2.png') center / cover no-repeat;
  opacity: .9;
  filter: saturate(1.03) contrast(1.03);
}
.discord-hero-copy { max-width: 840px; }
.discord-hero-copy h1 {
  font-size: clamp(3rem, 5.2vw, 5.3rem);
  text-wrap: balance;
  text-shadow: 0 3px 30px rgba(0, 0, 0, .72);
}
.league-discord-page .discord-hero-copy { padding: 44px 46px; }
.league-discord-page .discord-hero-copy > p:not(.eyebrow) { font-size: 1rem; line-height: 1.62; }
.league-discord-page .discord-actions { margin-top: 22px; }
.league-discord-page .discord-invite-note { margin-top: 12px; }
.discord-hero-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.discord-hero-shortcuts a {
  --shortcut-color: var(--dc-cyan);
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--shortcut-color) 50%, #33404f);
  border-radius: 5px;
  color: #eaf8fb;
  background: color-mix(in srgb, var(--shortcut-color) 10%, rgba(7, 13, 21, .9));
  font-size: .7rem;
  font-weight: 850;
  text-decoration: none;
}
.discord-hero-shortcuts a:nth-child(2) { --shortcut-color: var(--dc-green); }
.discord-hero-shortcuts a:nth-child(3) { --shortcut-color: var(--dc-gold); }
.discord-hero-shortcuts a i { color: var(--shortcut-color); font-size: 1rem; }
.discord-hero-shortcuts a:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--shortcut-color) 18%, #0b121b); }
.discord-hero-preview {
  position: relative;
  z-index: 2;
  align-self: center;
  min-width: 0;
  margin: 34px 34px 34px 0;
  overflow: hidden;
  border: 1px solid rgba(177, 157, 255, .48);
  border-radius: 7px;
  background: rgba(8, 13, 23, .95);
  box-shadow: 0 25px 70px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .04);
  backdrop-filter: blur(10px);
}
.discord-hero-preview > header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  gap: 13px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid rgba(177, 157, 255, .25);
  background: linear-gradient(100deg, rgba(99, 82, 184, .26), rgba(16, 24, 38, .94));
}
.discord-server-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid #a894ff;
  border-radius: 6px;
  color: #fff;
  background: #5865f2;
  font-size: 1.35rem;
}
.discord-hero-preview > header small,
.discord-hero-preview > header strong { display: block; overflow-wrap: anywhere; }
.discord-hero-preview > header small { color: #a99af4; font-size: .61rem; font-weight: 900; text-transform: uppercase; }
.discord-hero-preview > header strong { margin-top: 3px; color: #fff; font-size: 1.06rem; }
.discord-hero-preview > header > i { color: var(--dc-green); font-size: 1.12rem; }
.discord-preview-section { padding: 13px; }
.discord-preview-section > span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 5px 10px;
  color: #9baabc;
  font-size: .64rem;
  font-weight: 900;
  text-transform: uppercase;
}
.discord-preview-section > a {
  --preview-color: var(--dc-cyan);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  gap: 11px;
  align-items: center;
  min-width: 0;
  min-height: 72px;
  margin-top: 6px;
  padding: 9px 11px;
  border: 1px solid rgba(145, 170, 205, .17);
  border-left: 3px solid var(--preview-color);
  border-radius: 5px;
  color: #eaf3fa;
  background: color-mix(in srgb, var(--preview-color) 6%, #0c1520);
  text-decoration: none;
}
.discord-preview-section > a.is-violet { --preview-color: var(--dc-violet); }
.discord-preview-section > a.is-gold { --preview-color: var(--dc-gold); }
.discord-preview-section > a.is-green { --preview-color: var(--dc-green); }
.discord-preview-section > a > i:first-child {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 5px;
  color: #071016;
  background: var(--preview-color);
}
.discord-preview-section > a span { min-width: 0; }
.discord-preview-section > a strong,
.discord-preview-section > a small { display: block; min-width: 0; overflow-wrap: anywhere; }
.discord-preview-section > a strong { color: #fff; font-size: .78rem; }
.discord-preview-section > a small {
  display: -webkit-box;
  margin-top: 3px;
  overflow: hidden;
  color: #8798aa;
  font-size: .6rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.discord-preview-section > a > i:last-child { color: var(--preview-color); }
.discord-preview-section > a:is(:hover, :focus-visible) { border-color: var(--preview-color); transform: translateX(2px); }
.discord-hero-preview > footer {
  display: grid;
  grid-template-columns: 1fr 16px 1fr 16px 1fr;
  gap: 5px;
  align-items: center;
  padding: 13px;
  border-top: 1px solid rgba(145, 170, 205, .17);
  background: #0b121c;
}
.discord-hero-preview > footer span { display: flex; align-items: center; gap: 6px; color: #c1ced9; font-size: .61rem; font-weight: 850; }
.discord-hero-preview > footer b { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid #806fd1; border-radius: 50%; color: #cfc6ff; }
.discord-hero-preview > footer i { color: #536477; font-size: .65rem; }
.discord-channel-directory a { position: relative; }
.discord-channel-directory a::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--channel-color);
  opacity: .7;
}
.discord-onboarding .discord-choice-preview { box-shadow: 0 18px 45px rgba(0, 0, 0, .22), inset 4px 0 var(--dc-violet); }
.discord-safety article { background: color-mix(in srgb, currentColor 4%, #0c121c); }

.discord-destination-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(140, 163, 190, .18);
}
.discord-destination-grid > a {
  --destination-color: var(--dc-violet);
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
  min-height: 230px;
  padding: 27px;
  border-top: 4px solid var(--destination-color);
  color: #eef5fb;
  background: linear-gradient(145deg, color-mix(in srgb, var(--destination-color) 10%, #0c131d), #0b1119 62%);
  text-decoration: none;
  transition: background .18s, transform .18s;
}
.discord-destination-grid > a.is-member { --destination-color: var(--dc-cyan); }
.discord-destination-grid > a.is-team { --destination-color: var(--dc-green); }
.discord-destination-grid > a.is-guide { --destination-color: var(--dc-gold); }
.discord-destination-grid > a:is(:hover, :focus-visible) {
  background: linear-gradient(145deg, color-mix(in srgb, var(--destination-color) 17%, #0d1620), #101720 70%);
  transform: translateY(-2px);
}
.discord-destination-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid var(--destination-color);
  border-radius: 6px;
  color: #071016;
  background: var(--destination-color);
  font-size: 1.45rem;
}
.discord-destination-grid > a > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.discord-destination-grid small,
.discord-destination-grid strong,
.discord-destination-grid b { display: block; overflow-wrap: anywhere; }
.discord-destination-grid small { color: var(--destination-color); font-size: .66rem; font-weight: 900; text-transform: uppercase; }
.discord-destination-grid strong { margin-top: 7px; color: #fff; font-size: 1.25rem; line-height: 1.2; }
.discord-destination-grid p { flex: 1; margin: 11px 0 20px; color: #9eadbd; line-height: 1.58; }
.discord-destination-grid b {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 9px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--destination-color) 60%, #354351);
  border-radius: 5px;
  color: #f5fbff;
  background: color-mix(in srgb, var(--destination-color) 12%, #0b131b);
  font-size: .77rem;
}

@media (max-width: 1040px) {
  .league-discord-page .discord-hero { grid-template-columns: 1fr; }
  .discord-hero-preview { width: auto; margin: 0 34px 34px; }
}
@media (max-width: 680px) {
  .league-discord-page .discord-hero { min-height: 0; }
  .league-discord-page .discord-hero-art { background-position: 55% center; }
  .discord-hero-shortcuts { display: grid; grid-template-columns: 1fr; }
  .discord-hero-preview { margin: 0 16px 16px; }
  .discord-preview-section > a { min-height: 64px; }
  .discord-hero-preview > footer { grid-template-columns: 1fr; }
  .discord-hero-preview > footer i { display: none; }
  .league-discord-page .discord-hero-copy { padding: 38px 23px; }
  .discord-destination-grid { grid-template-columns: 1fr; }
  .discord-destination-grid > a { min-height: 0; padding: 22px 18px; }
}

/* Off-meta mode and evidence context. */
.conduct-context,.conduct-evidence{margin:28px 0;border:1px solid rgba(85,230,239,.2);background:#0c121b;overflow:hidden}.conduct-context>header,.conduct-evidence>header{display:grid;grid-template-columns:minmax(0,.9fr) minmax(320px,.5fr);gap:28px;align-items:end;padding:32px;border-bottom:1px solid rgba(145,170,205,.15)}.conduct-context h2,.conduct-evidence h2{margin:6px 0 0;color:#f7fbfd;font-size:clamp(2rem,3.7vw,3rem);line-height:1.06;text-wrap:balance}.conduct-context>header>p,.conduct-evidence>header>p{margin:0;color:#9fadb9;line-height:1.65}.conduct-context-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.conduct-context-grid article{display:flex;flex-direction:column;min-width:0;padding:27px;border-right:1px solid rgba(145,170,205,.14);border-top:4px solid var(--conduct-cyan);background:linear-gradient(150deg,rgba(85,230,239,.07),transparent 55%),#0d1720}.conduct-context-grid article:last-child{border-right:0}.conduct-context-grid article.is-swift{border-top-color:var(--conduct-gold);background:linear-gradient(150deg,rgba(243,201,95,.08),transparent 55%),#18160f}.conduct-context-grid article.is-other{border-top-color:var(--conduct-purple);background:linear-gradient(150deg,rgba(185,136,255,.08),transparent 55%),#151220}.conduct-context-icon{display:grid;width:48px;height:48px;place-items:center;margin-bottom:20px;border:1px solid currentColor;color:var(--conduct-cyan);background:rgba(85,230,239,.07);font-size:1.2rem}.is-swift .conduct-context-icon{color:var(--conduct-gold);background:rgba(243,201,95,.07)}.is-other .conduct-context-icon{color:var(--conduct-purple);background:rgba(185,136,255,.07)}.conduct-context-grid small{color:var(--conduct-cyan);font-size:.68rem;font-weight:900;text-transform:uppercase}.conduct-context-grid .is-swift small{color:var(--conduct-gold)}.conduct-context-grid .is-other small{color:#c7a6ff}.conduct-context-grid h3{margin:7px 0 0;color:#fff;font-size:1.16rem}.conduct-context-grid p{flex:1;margin:11px 0 19px;color:#9eafbb;line-height:1.6}.conduct-context-grid a,.conduct-evidence-actions a{display:inline-flex;align-items:center;align-self:flex-start;gap:8px;min-height:41px;padding:9px 13px;border:1px solid rgba(85,230,239,.42);border-radius:5px;color:#dffcff;background:rgba(85,230,239,.08);font-size:.78rem;font-weight:900;text-decoration:none}.conduct-context-grid .is-swift a{border-color:rgba(243,201,95,.42);color:#ffedb0;background:rgba(243,201,95,.08)}.conduct-context-grid .is-other a{border-color:rgba(185,136,255,.42);color:#eadcff;background:rgba(185,136,255,.08)}.conduct-context>aside{display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;align-items:center;margin:18px;padding:17px;border:1px solid rgba(243,201,95,.28);background:rgba(243,201,95,.06)}.conduct-context>aside i{display:grid;width:42px;height:42px;place-items:center;color:#18140a;background:var(--conduct-gold)}.conduct-context>aside p{margin:0;color:#b9b29d;line-height:1.55}.conduct-context>aside strong{color:#fff0ba}
.conduct-evidence{border-color:rgba(185,136,255,.22);background:linear-gradient(125deg,rgba(185,136,255,.05),transparent 38%),#0c111a}.conduct-evidence-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(145,170,205,.14)}.conduct-evidence-grid article{display:grid;grid-template-columns:44px minmax(0,1fr);gap:17px;min-width:0;padding:26px;background:#0d141e}.conduct-evidence-grid article:nth-child(2),.conduct-evidence-grid article:nth-child(3){background:#111420}.conduct-evidence-grid small,.conduct-evidence-grid strong{display:block}.conduct-evidence-grid small{color:var(--conduct-purple);font-size:.67rem;font-weight:900;text-transform:uppercase}.conduct-evidence-grid strong{margin-top:5px;color:#f5f8fc;font-size:1.04rem}.conduct-evidence-grid p{margin:9px 0 0;color:#9dabb9;line-height:1.58}.conduct-evidence-actions{display:flex;flex-wrap:wrap;gap:9px;padding:20px}.conduct-evidence-actions a:first-child{border-color:rgba(185,136,255,.44);color:#eadcff;background:rgba(185,136,255,.08)}
@media(max-width:900px){.conduct-context>header,.conduct-evidence>header{grid-template-columns:1fr}.conduct-context-grid{grid-template-columns:1fr}.conduct-context-grid article{border-right:0;border-bottom:1px solid rgba(145,170,205,.14)}.conduct-context-grid article:last-child{border-bottom:0}}
@media(max-width:700px){.conduct-evidence-grid{grid-template-columns:1fr}.conduct-context>header,.conduct-evidence>header{padding:24px 20px}.conduct-context-grid article,.conduct-evidence-grid article{padding:22px 20px}.conduct-context>aside{grid-template-columns:1fr;margin:13px}.conduct-evidence-actions{display:grid}.conduct-evidence-actions a{justify-content:center}.conduct-context h2,.conduct-evidence h2{font-size:1.85rem}}
/* Beginner guide */
.beginner-page{background:#070a0f;color:#edf5ff}.beginner-page main{width:min(1480px,calc(100% - 32px));margin:0 auto 72px}.beginner-hero{position:relative;min-height:clamp(520px,66vh,720px);overflow:hidden;border:1px solid #273545;border-radius:0 0 8px 8px;background:#09111a}.beginner-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 30%}.beginner-hero-shade{position:absolute;inset:0;background:rgba(4,8,14,.62);border-left:10px solid #45d8e6}.beginner-hero-copy{position:relative;z-index:1;width:min(700px,62%);padding:clamp(64px,9vw,132px) clamp(28px,6vw,90px)}.beginner-hero-copy h1{max-width:680px;margin:8px 0 18px;font-size:clamp(2.8rem,6vw,5.8rem);line-height:.96;letter-spacing:0}.beginner-hero-copy>p:not(.eyebrow){max-width:650px;color:#d5e2ee;font-size:clamp(1.08rem,1.7vw,1.38rem);line-height:1.6}.beginner-hero-copy>div{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.beginner-hero-copy a,.beginner-card-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid #4b667b;border-radius:999px;background:#0c1721;color:#effcff;font-weight:800;text-decoration:none}.beginner-hero-copy a:first-child,.beginner-card-actions a:first-child{border-color:#52e4ef;background:#0c343b;color:#bffbff}.beginner-hero aside{position:absolute;z-index:2;right:28px;bottom:28px;display:grid;gap:10px;width:min(380px,35%)}.beginner-hero aside article{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid #405262;border-radius:6px;background:rgba(5,11,18,.9)}.beginner-hero aside span{display:grid;gap:3px}.beginner-hero aside small{color:#91a9bd}.beginner-hero aside strong{font-size:1rem}.beginner-jumps{position:sticky;top:70px;z-index:18;display:flex;align-items:center;gap:8px;overflow-x:auto;margin:16px 0 54px;padding:10px 12px;border:1px solid #253545;border-radius:6px;background:#090f16;scrollbar-width:thin}.beginner-jumps strong{padding:0 10px;color:#8ba4b7;white-space:nowrap}.beginner-jumps a{flex:0 0 auto;padding:10px 14px;border:1px solid #2c4050;border-radius:999px;color:#dcebf5;text-decoration:none}.beginner-intro,.beginner-starters,.beginner-match,.beginner-recovery,.beginner-next,.beginner-faq{margin:0 auto 64px}.beginner-intro>div:first-child,.beginner-starters>header,.beginner-match>header,.beginner-next>header{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:24px}.beginner-intro h2,.beginner-starters h2,.beginner-match h2,.beginner-recovery h2,.beginner-next h2,.beginner-faq h2{margin:5px 0 0;font-size:clamp(2rem,3.4vw,3.35rem);line-height:1.05}.beginner-intro>div:first-child>p:last-child,.beginner-starters>header>p,.beginner-match>header>p,.beginner-next>header>p{max-width:590px;color:#9fb1c0;line-height:1.6}.beginner-choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.beginner-choice-grid article{padding:24px;border:1px solid #26394a;border-radius:7px;background:#0c121b}.beginner-choice-grid article:nth-child(1){border-top:4px solid #52d18b}.beginner-choice-grid article:nth-child(2){border-top:4px solid #ff637f}.beginner-choice-grid article:nth-child(3){border-top:4px solid #55dceb}.beginner-choice-grid i{font-size:1.5rem;color:#5de1ed}.beginner-choice-grid h3{margin:16px 0 8px;font-size:1.22rem}.beginner-choice-grid p{margin:0;color:#afc0cd;line-height:1.55}.beginner-starter-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.beginner-starter-card{position:relative;grid-column:span 2;min-height:530px;overflow:hidden;border:1px solid #304152;border-radius:8px;background:#0b121a}.beginner-starter-card:nth-child(4),.beginner-starter-card:nth-child(5){grid-column:span 3}.beginner-starter-card>img{position:absolute;inset:0;width:100%;height:47%;object-fit:cover}.beginner-starter-overlay{position:absolute;inset:0;background:rgba(5,10,16,.46);border-top:5px solid #58dce6}.beginner-starter-card.tone-green .beginner-starter-overlay{border-color:#55d48f}.beginner-starter-card.tone-violet .beginner-starter-overlay{border-color:#a77bff}.beginner-starter-card.tone-rose .beginner-starter-overlay{border-color:#ff6783}.beginner-starter-card.tone-gold .beginner-starter-overlay{border-color:#f1c45b}.beginner-starter-copy{position:relative;z-index:1;display:flex;flex-direction:column;min-height:530px;padding:26px 24px 22px}.beginner-starter-role{display:flex;align-items:center;gap:13px;margin-bottom:154px}.beginner-starter-role span{display:grid}.beginner-starter-role small{color:#d3e2ed;text-transform:uppercase;font-weight:800}.beginner-starter-role strong{font-size:1.65rem}.beginner-starter-role>i{margin-left:auto;font-size:1.4rem;color:#9cf8ff}.beginner-starter-copy>p{min-height:76px;margin:0;color:#c7d4df;line-height:1.55}.beginner-starter-copy dl{display:grid;gap:8px;margin:16px 0}.beginner-starter-copy dl>div{padding:11px 12px;border-left:3px solid #3c7181;background:#101c27}.beginner-starter-copy dt{margin-bottom:4px;color:#7ee9f1;font-size:.75rem;font-weight:900;text-transform:uppercase}.beginner-starter-copy dd{margin:0;color:#c7d4df;line-height:1.4}.beginner-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}.beginner-card-actions a{min-height:38px;padding:0 13px;font-size:.82rem}.beginner-yuumi-note{display:flex;align-items:center;gap:24px;margin-top:16px;padding:24px;border:1px solid #315e70;border-radius:8px;background:#0b1a22}.beginner-yuumi-note img{flex:0 0 96px;border:2px solid #5ce8f2;border-radius:50%}.beginner-yuumi-note h3{margin:3px 0 8px;font-size:1.35rem}.beginner-yuumi-note p:last-child{margin:0;color:#b9cad5;line-height:1.6}.beginner-timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:0;padding:0;list-style:none;border:1px solid #2b3d4d;border-radius:8px;overflow:hidden}.beginner-timeline li{position:relative;min-width:0;padding:22px;border-right:1px solid #2b3d4d;background:#0a1119}.beginner-timeline li:last-child{border-right:0}.beginner-timeline li:after{content:"";position:absolute;right:-7px;top:39px;z-index:2;width:12px;height:12px;transform:rotate(45deg);border-top:1px solid #4eceda;border-right:1px solid #4eceda;background:#0a1119}.beginner-timeline li:last-child:after{display:none}.beginner-timeline small{display:block;margin-top:20px;color:#6fdce7;font-weight:800;text-transform:uppercase}.beginner-timeline h3{margin:7px 0 10px;font-size:1.12rem}.beginner-timeline p{margin:0;color:#aebfcb;line-height:1.52}.beginner-recovery{padding:clamp(28px,5vw,64px);border:1px solid #4f3341;border-left:7px solid #ff647f;border-radius:8px;background:#160d13}.beginner-recovery>div:first-child{max-width:760px}.beginner-recovery>div:first-child>p:last-child{color:#d6bfc8;line-height:1.6}.beginner-recovery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}.beginner-recovery-grid article{padding:20px;border-top:1px solid #835063;background:#1d1118}.beginner-recovery-grid h3{margin:14px 0 7px}.beginner-recovery-grid p{margin:0;color:#c6aeb7;line-height:1.5}.beginner-next>div{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.beginner-next>div>a{display:flex;align-items:center;gap:16px;min-height:104px;padding:18px;border:1px solid #304354;border-radius:7px;background:#0c131c;color:#e8f6ff;text-decoration:none}.beginner-next i{font-size:1.6rem;color:#5be0ec}.beginner-next span{display:grid;gap:5px}.beginner-next small{color:#91a7b8;line-height:1.35}.beginner-faq>header{margin-bottom:20px}.beginner-faq>div{display:grid;gap:8px}.beginner-faq details{border:1px solid #293c4d;border-radius:6px;background:#0b121a}.beginner-faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;cursor:pointer;font-weight:800;list-style:none}.beginner-faq summary::-webkit-details-marker{display:none}.beginner-faq details p{margin:0;padding:0 20px 20px;color:#acbecb;line-height:1.6}.beginner-faq details[open] summary i{transform:rotate(45deg)}
@media(max-width:1050px){.beginner-hero-copy{width:75%}.beginner-hero aside{width:42%}.beginner-starter-grid{grid-template-columns:repeat(2,1fr)}.beginner-starter-card,.beginner-starter-card:nth-child(4),.beginner-starter-card:nth-child(5){grid-column:span 1}.beginner-starter-card:last-child{grid-column:1/-1}.beginner-timeline{grid-template-columns:1fr 1fr}.beginner-timeline li{border-bottom:1px solid #2b3d4d}.beginner-timeline li:after{display:none}.beginner-next>div{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.beginner-page main{width:min(100% - 20px,1480px)}.beginner-hero{height:720px;min-height:0}.beginner-hero>img{height:39%;object-position:66% 20%}.beginner-hero-shade{background:rgba(4,8,14,.52)}.beginner-hero-copy{width:auto;padding:218px 22px 24px}.beginner-hero-copy h1{font-size:2.75rem}.beginner-hero-copy>div{display:grid;grid-template-columns:1fr 1fr}.beginner-hero-copy>div a:last-child{grid-column:1/-1}.beginner-hero aside{display:none}.beginner-intro>div:first-child,.beginner-starters>header,.beginner-match>header,.beginner-next>header{display:block}.beginner-choice-grid,.beginner-starter-grid,.beginner-recovery-grid,.beginner-next>div{grid-template-columns:1fr}.beginner-starter-card,.beginner-starter-card:last-child{grid-column:auto}.beginner-starter-role{margin-bottom:148px}.beginner-yuumi-note{align-items:flex-start}.beginner-yuumi-note img{width:68px;height:68px;flex-basis:68px}.beginner-timeline{grid-template-columns:1fr}.beginner-next>div>a{min-height:88px}}
@media(max-width:460px){.beginner-yuumi-note{display:block}.beginner-yuumi-note img{margin-bottom:14px}.beginner-starter-copy{padding:22px 18px}.beginner-starter-copy>p{min-height:0}.beginner-starter-role strong{font-size:1.4rem}}

/* Beginner guide v2: quicker role choice and a clearer first-session route. */
.beginner-page {
  --beginner-cyan: #57e3ec;
  --beginner-green: #63dda0;
  --beginner-violet: #aa83ff;
  --beginner-rose: #ff718b;
  --beginner-gold: #f3cb68;
  --beginner-panel: #0b131d;
  --beginner-line: #2b4052;
}
.beginner-intro > div:first-child > div { min-width: min(100%, 580px); }
.beginner-role-picker { display: grid; grid-template-columns: minmax(270px, .38fr) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--beginner-line); border-radius: 8px; background: #081019; }
.beginner-role-tabs { display: grid; align-content: stretch; border-right: 1px solid var(--beginner-line); background: #080e15; }
.beginner-role-tabs button { --pick-color: var(--beginner-cyan); display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; min-width: 0; min-height: 88px; padding: 15px 18px; border: 0; border-bottom: 1px solid #1d2b37; border-left: 4px solid transparent; color: #a8bac8; background: #080e15; text-align: left; cursor: pointer; transition: background .18s, border-color .18s, color .18s; }
.beginner-role-tabs button:last-child { border-bottom: 0; }
.beginner-role-tabs button.tone-green { --pick-color: var(--beginner-green); }
.beginner-role-tabs button.tone-violet { --pick-color: var(--beginner-violet); }
.beginner-role-tabs button.tone-rose { --pick-color: var(--beginner-rose); }
.beginner-role-tabs button.tone-gold { --pick-color: var(--beginner-gold); }
.beginner-role-tabs button:hover,
.beginner-role-tabs button.is-active { border-left-color: var(--pick-color); color: #f7fbff; background: #101b26; }
.beginner-role-tabs button > i { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid color-mix(in srgb, var(--pick-color) 55%, #1e3443); border-radius: 6px; color: var(--pick-color); background: color-mix(in srgb, var(--pick-color) 10%, #081019); font-size: 1.08rem; }
.beginner-lane-icon{display:block;width:42px;height:42px;object-fit:contain;padding:5px;border:1px solid color-mix(in srgb,var(--pick-color,var(--role-option-color,#59dce7)) 58%,#203746);border-radius:6px;background:color-mix(in srgb,var(--pick-color,var(--role-option-color,#59dce7)) 10%,#071018);filter:drop-shadow(0 0 8px rgba(81,224,234,.2))}
.beginner-starter-role>.beginner-lane-icon{margin-left:auto;flex:0 0 42px}
.beginner-role-tabs button span,
.beginner-role-tabs button small,
.beginner-role-tabs button strong { display: block; min-width: 0; }
.beginner-role-tabs button small { margin-bottom: 3px; color: var(--pick-color); font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.beginner-role-tabs button strong { overflow-wrap: anywhere; font-size: .9rem; line-height: 1.3; }
.beginner-role-result { --pick-color: var(--beginner-cyan); display: grid; grid-template-columns: minmax(430px, .95fr) minmax(390px, 1.05fr); min-width: 0; background: var(--beginner-panel); }
.beginner-role-result.tone-green { --pick-color: var(--beginner-green); }
.beginner-role-result.tone-violet { --pick-color: var(--beginner-violet); }
.beginner-role-result.tone-rose { --pick-color: var(--beginner-rose); }
.beginner-role-result.tone-gold { --pick-color: var(--beginner-gold); }
.beginner-result-art { position: relative; min-height: 640px; overflow: hidden; border-right: 1px solid var(--beginner-line); background: #0a1119; }
.beginner-result-art img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 22%; }
.beginner-role-result[data-champion="garen"] .beginner-result-art img { object-position: 62% 20%; }
.beginner-role-result[data-champion="amumu"] .beginner-result-art img { object-position: 54% 25%; }
.beginner-role-result[data-champion="annie"] .beginner-result-art img { object-position: 58% 22%; }
.beginner-role-result[data-champion="missfortune"] .beginner-result-art img { object-position: 67% 18%; }
.beginner-role-result[data-champion="yuumi"] .beginner-result-art img { object-position: 58% 17%; }
.beginner-result-art::after { content: ""; position: absolute; inset: 0; border-top: 5px solid var(--pick-color); background: rgba(3, 8, 13, .2); pointer-events: none; }
.beginner-result-art span { position: absolute; z-index: 1; left: 18px; bottom: 18px; padding: 8px 12px; border: 1px solid var(--pick-color); border-radius: 999px; color: #071116; background: var(--pick-color); font-size: .72rem; font-weight: 950; text-transform: uppercase; }
.beginner-result-copy { display: flex; flex-direction: column; min-width: 0; padding: clamp(26px, 4vw, 50px); }
.beginner-result-title { display: flex; align-items: center; gap: 17px; margin: 4px 0 18px; }
.beginner-result-title img { width: 76px; height: 76px; flex: 0 0 76px; border: 2px solid var(--pick-color); border-radius: 7px; background: #081019; }
.beginner-result-title small { display: block; color: #91a6b6; font-weight: 750; }
.beginner-result-title h3 { margin: 3px 0 0; color: #fff; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1; }
.beginner-result-copy > p:not(.eyebrow) { max-width: 700px; margin: 0; color: #bdccd7; line-height: 1.68; }
.beginner-result-copy dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 24px 0; }
.beginner-result-copy dl > div { min-width: 0; padding: 15px; border: 1px solid #2a3c4b; border-top: 3px solid var(--pick-color); background: #0d1822; }
.beginner-result-copy dt { color: var(--pick-color); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.beginner-result-copy dd { margin: 7px 0 0; color: #b6c6d1; line-height: 1.5; }
.beginner-result-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: auto; }
.beginner-result-actions a { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 7px; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--action-accent) 48%, #263541); border-radius: 5px; color: color-mix(in srgb, var(--action-accent) 72%, #d8e2e8); background: color-mix(in srgb, var(--action-accent) 7%, #0b141d); box-shadow: inset 0 -2px color-mix(in srgb, var(--action-accent) 9%, transparent); font-size: .71rem; font-weight: 900; line-height: 1.2; text-align: center; text-decoration: none; text-transform: uppercase; }
.beginner-result-actions .league-action-pill:first-child { --action-accent: var(--pick-color); }
.beginner-result-actions .league-action-pill:last-child { --action-accent: #9b86ee; }

.beginner-starter-card { min-height: 700px; }
.beginner-starter-card > img { height: 300px; object-position: 50% 22%; }
.beginner-starter-card.champion-garen > img { object-position: 60% 20%; }
.beginner-starter-card.champion-amumu > img { object-position: 52% 28%; }
.beginner-starter-card.champion-annie > img { object-position: 56% 24%; }
.beginner-starter-card.champion-missfortune > img { object-position: 68% 18%; }
.beginner-starter-card.champion-yuumi > img { object-position: 58% 18%; }
.beginner-starter-copy { min-height: 700px; }
.beginner-starter-role { margin-bottom: 229px; }
.beginner-starter-copy > p { min-height: 96px; }
.beginner-starter-copy dl > div { border-left-color: #4d8796; }
.beginner-starter-copy dl > div.is-warning { border-left-color: #e3ae4f; background: #1a1813; }
.beginner-starter-copy dt { display: flex; align-items: center; gap: 7px; }
.beginner-starter-copy .is-warning dt { color: #f3cb68; }

.beginner-session { margin: 0 auto 64px; overflow: hidden; border: 1px solid var(--beginner-line); border-radius: 8px; background: #09121b; }
.beginner-session > header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .55fr); gap: 28px; align-items: end; padding: 32px; border-bottom: 1px solid var(--beginner-line); background: #0d1822; }
.beginner-session h2 { margin: 5px 0 0; font-size: clamp(2rem, 3.4vw, 3.35rem); line-height: 1.05; }
.beginner-session > header > p { margin: 0; color: #9fb2c1; line-height: 1.6; }
.beginner-session-track { display: grid; grid-template-columns: repeat(4, 1fr); }
.beginner-session-track article { position: relative; min-width: 0; min-height: 330px; padding: 26px; border-right: 1px solid var(--beginner-line); background: #0a121b; }
.beginner-session-track article:last-child { border-right: 0; }
.beginner-session-track article > i { display: grid; width: 46px; height: 46px; place-items: center; margin: 28px 0 17px; border: 1px solid #4b687c; border-radius: 6px; color: var(--beginner-cyan); background: #10202b; font-size: 1.2rem; }
.beginner-session-track small { color: var(--beginner-cyan); font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.beginner-session-track h3 { margin: 5px 0 10px; color: #fff; font-size: 1.35rem; }
.beginner-session-track p { margin: 0 0 20px; color: #a8bbc8; line-height: 1.58; }
.beginner-session-track article > strong { display: block; margin-top: auto; padding-top: 13px; border-top: 1px solid #253848; color: #d9e7ef; font-size: .78rem; line-height: 1.45; }
.beginner-session > footer { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 15px; align-items: center; padding: 19px 24px; border-top: 1px solid #594c2d; background: #18160f; }
.beginner-session > footer > i { display: grid; width: 42px; height: 42px; place-items: center; color: #141006; background: var(--beginner-gold); }
.beginner-session > footer p { margin: 0; color: #c9c0a8; line-height: 1.5; }
.beginner-session > footer strong { color: #fff0bd; }
.beginner-session > footer a { padding: 10px 14px; border: 1px solid #87713d; border-radius: 999px; color: #ffe8a2; text-decoration: none; font-weight: 850; white-space: nowrap; }

@media (max-width: 1080px) {
  .beginner-role-picker { grid-template-columns: 1fr; }
  .beginner-role-tabs { grid-template-columns: repeat(5, 1fr); border-right: 0; border-bottom: 1px solid var(--beginner-line); }
  .beginner-role-tabs button { grid-template-columns: 1fr; justify-items: center; min-height: 118px; padding: 14px 10px; border-bottom: 0; border-left: 0; border-right: 1px solid #1d2b37; border-top: 4px solid transparent; text-align: center; }
  .beginner-role-tabs button:last-child { border-right: 0; }
  .beginner-role-tabs button:hover,
  .beginner-role-tabs button.is-active { border-left-color: transparent; border-top-color: var(--pick-color); }
  .beginner-role-result { grid-template-columns: minmax(380px, .85fr) minmax(0, 1fr); }
  .beginner-result-art { min-height: 590px; }
  .beginner-session-track { grid-template-columns: 1fr 1fr; }
  .beginner-session-track article:nth-child(2) { border-right: 0; }
  .beginner-session-track article:nth-child(-n+2) { border-bottom: 1px solid var(--beginner-line); }
}
@media (max-width: 720px) {
  .beginner-intro > div:first-child { display: block; }
  .beginner-role-tabs { grid-template-columns: 1fr 1fr; }
  .beginner-role-tabs button { grid-template-columns: 40px 1fr; justify-items: start; min-height: 84px; border-right: 1px solid #1d2b37; border-bottom: 1px solid #1d2b37; border-top: 0; border-left: 4px solid transparent; text-align: left; }
  .beginner-role-tabs button:nth-child(2n) { border-right: 0; }
  .beginner-role-tabs button:last-child { grid-column: 1 / -1; }
  .beginner-role-tabs button:hover,
  .beginner-role-tabs button.is-active { border-top-color: transparent; border-left-color: var(--pick-color); }
  .beginner-role-result { grid-template-columns: 1fr; }
  .beginner-result-art { min-height: 390px; border-right: 0; border-bottom: 1px solid var(--beginner-line); }
  .beginner-result-art img { object-position: 58% 22%; }
  .beginner-result-copy { padding: 25px 20px; }
  .beginner-result-copy dl { grid-template-columns: 1fr; }
  .beginner-result-actions { display: grid; }
  .beginner-starter-card { min-height: 700px; }
  .beginner-starter-copy { min-height: 700px; }
  .beginner-starter-copy > p { min-height: 0; }
  .beginner-session > header { grid-template-columns: 1fr; padding: 25px 20px; }
  .beginner-session-track { grid-template-columns: 1fr; }
  .beginner-session-track article { min-height: 0; border-right: 0; border-bottom: 1px solid var(--beginner-line); }
  .beginner-session-track article:last-child { border-bottom: 0; }
  .beginner-session > footer { grid-template-columns: 42px minmax(0, 1fr); padding: 18px; }
  .beginner-session > footer a { grid-column: 1 / -1; text-align: center; }
}
@media (max-width: 440px) {
  .beginner-role-tabs { grid-template-columns: 1fr; }
  .beginner-role-tabs button,
  .beginner-role-tabs button:last-child { grid-column: auto; border-right: 0; }
  .beginner-result-title img { width: 62px; height: 62px; flex-basis: 62px; }
  .beginner-result-title h3 { font-size: 2rem; }
}

/* Beginner artwork v3: preserve complete splash compositions. */
.beginner-role-picker { grid-template-columns: 1fr; }
.beginner-role-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); border-right: 0; border-bottom: 1px solid var(--beginner-line); }
.beginner-role-tabs button { grid-template-columns: 44px minmax(0, 1fr); min-height: 92px; border-right: 1px solid #1d2b37; border-bottom: 0; border-left: 0; border-top: 4px solid transparent; }
.beginner-role-tabs button:last-child { border-right: 0; }
.beginner-role-tabs button:hover,
.beginner-role-tabs button.is-active { border-top-color: var(--pick-color); border-left-color: transparent; }
.beginner-role-result { display: block; }
.beginner-result-art { width: 100%; min-height: 0; aspect-ratio: 1215 / 717; border-right: 0; border-bottom: 1px solid var(--beginner-line); }
.beginner-result-art img,
.beginner-role-result[data-champion] .beginner-result-art img { width: 100%; height: 100%; object-fit: contain; object-position: center; background: #05090e; }
.beginner-result-art::after { background: transparent; }
.beginner-result-copy { display: grid; grid-template-areas: "eyebrow detail" "title detail" "summary detail" "actions detail"; grid-template-columns: minmax(300px, .72fr) minmax(430px, 1.28fr); column-gap: clamp(30px, 5vw, 76px); align-items: start; padding: clamp(30px, 4vw, 54px); border-top: 4px solid var(--pick-color); }
.beginner-result-copy > .eyebrow { grid-area: eyebrow; }
.beginner-result-title { grid-area: title; }
.beginner-result-copy > p:not(.eyebrow) { grid-area: summary; }
.beginner-result-copy > dl { grid-area: detail; align-self: stretch; margin: 0; }
.beginner-result-actions { grid-area: actions; align-self: end; margin-top: 28px; }

.beginner-role-options { margin: 0 auto 64px; scroll-margin-top: 150px; }
.beginner-role-options > header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .55fr); gap: 32px; align-items: end; margin-bottom: 24px; }
.beginner-role-options h2 { margin: 5px 0 0; font-size: clamp(2rem, 3.4vw, 3.35rem); line-height: 1.05; }
.beginner-role-options > header > p { margin: 0; color: #9fb1c0; line-height: 1.6; }
.beginner-role-options > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.beginner-role-options article { --role-option-color: var(--beginner-cyan); min-width: 0; overflow: hidden; border: 1px solid #2b4052; border-top: 5px solid var(--role-option-color); border-radius: 8px; background: #09121b; }
.beginner-role-options article.tone-green { --role-option-color: var(--beginner-green); }
.beginner-role-options article.tone-violet { --role-option-color: var(--beginner-violet); }
.beginner-role-options article.tone-rose { --role-option-color: var(--beginner-rose); }
.beginner-role-options article.tone-gold { --role-option-color: var(--beginner-gold); }
.beginner-role-options article > header { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 142px; padding: 18px; border-bottom: 1px solid #273a49; background: #0d1822; }
.beginner-role-options article > header > i { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid color-mix(in srgb, var(--role-option-color) 55%, #243b4c); border-radius: 6px; color: #071116; background: var(--role-option-color); }
.beginner-role-options article > header small,.beginner-role-options article > header strong { display: block; }
.beginner-role-options article > header small { margin-bottom: 5px; color: var(--role-option-color); font-size: .68rem; font-weight: 950; text-transform: uppercase; }
.beginner-role-options article > header strong { color: #eaf4fa; font-size: .84rem; line-height: 1.4; }
.beginner-role-options article > div { display: grid; }
.beginner-role-options article > div > a { display: grid; grid-template-columns: 48px minmax(0, 1fr) 18px; gap: 11px; align-items: center; min-width: 0; min-height: 150px; padding: 15px; border-bottom: 1px solid #233442; color: #ecf7fc; text-decoration: none; }
.beginner-role-options article > div > a:last-child { border-bottom: 0; }
.beginner-role-options article > div > a:is(:hover, :focus-visible) { outline: 0; background: color-mix(in srgb, var(--role-option-color) 9%, #0a141d); }
.beginner-role-options article > div > a > img { width: 48px; height: 48px; border: 2px solid var(--role-option-color); border-radius: 6px; background: #071018; }
.beginner-role-options article > div > a span { min-width: 0; }
.beginner-role-options article > div > a small,.beginner-role-options article > div > a strong { display: block; }
.beginner-role-options article > div > a small { color: var(--role-option-color); font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.beginner-role-options article > div > a strong { margin-top: 3px; font-size: 1rem; }
.beginner-role-options article > div > a p { margin: 6px 0 0; color: #9fb2c0; font-size: .74rem; line-height: 1.42; }
.beginner-role-options article > div > a > i { color: var(--role-option-color); }

@media (max-width: 1180px) {
  .beginner-role-options > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beginner-role-options article:last-child { grid-column: 1 / -1; }
  .beginner-role-options article > header { min-height: 0; }
  .beginner-role-options article > div > a { min-height: 118px; }
}
@media (max-width: 680px) {
  .beginner-role-options > header { grid-template-columns: 1fr; }
  .beginner-role-options > div { grid-template-columns: 1fr; }
  .beginner-role-options article:last-child { grid-column: auto; }
  .beginner-role-options article > div > a { min-height: 0; }
}

.beginner-starter-card,
.beginner-starter-card:nth-child(4),
.beginner-starter-card:nth-child(5) { display: flex; flex-direction: column; min-height: 0; }
.beginner-starter-card > img,
.beginner-starter-card.champion-garen > img,
.beginner-starter-card.champion-amumu > img,
.beginner-starter-card.champion-annie > img,
.beginner-starter-card.champion-missfortune > img,
.beginner-starter-card.champion-yuumi > img { position: relative; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 1215 / 717; flex: 0 0 auto; object-fit: contain; object-position: center; background: #05090e; }
.beginner-starter-overlay { inset: 0 0 auto; height: 5px; background: transparent; pointer-events: none; }
.beginner-starter-copy { min-height: 0; flex: 1; }
.beginner-starter-role { margin-bottom: 18px; }
.beginner-starter-copy > p { min-height: 0; }
.beginner-starter-copy dl { margin: 18px 0 22px; }

@media (max-width: 1000px) {
  .beginner-role-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .beginner-role-tabs button:nth-child(3) { border-right: 0; }
  .beginner-role-tabs button:nth-child(-n+3) { border-bottom: 1px solid #1d2b37; }
  .beginner-role-tabs button:nth-child(4),
  .beginner-role-tabs button:nth-child(5) { grid-column: span 1; }
  .beginner-result-copy { grid-template-areas: "eyebrow" "title" "summary" "detail" "actions"; grid-template-columns: 1fr; }
  .beginner-result-copy > dl { margin-top: 26px; }
}
@media (max-width: 720px) {
  .beginner-role-tabs { grid-template-columns: 1fr 1fr; }
  .beginner-role-tabs button { grid-template-columns: 40px minmax(0, 1fr); min-height: 84px; border-top: 0; border-left: 4px solid transparent; }
  .beginner-role-tabs button:nth-child(3) { border-right: 1px solid #1d2b37; }
  .beginner-role-tabs button:nth-child(2n) { border-right: 0; }
  .beginner-role-tabs button:nth-child(-n+4) { border-bottom: 1px solid #1d2b37; }
  .beginner-role-tabs button:last-child { grid-column: 1 / -1; }
  .beginner-role-tabs button:hover,
  .beginner-role-tabs button.is-active { border-top-color: transparent; border-left-color: var(--pick-color); }
  .beginner-result-art { min-height: 0; aspect-ratio: 1215 / 717; }
  .beginner-result-copy { padding: 26px 20px; }
  .beginner-starter-card,
  .beginner-starter-card:last-child { min-height: 0; }
  .beginner-starter-copy { min-height: 0; }
}
@media (max-width: 440px) {
  .beginner-role-tabs { grid-template-columns: 1fr; }
  .beginner-role-tabs button,
  .beginner-role-tabs button:nth-child(3),
  .beginner-role-tabs button:last-child { grid-column: auto; border-right: 0; border-bottom: 1px solid #1d2b37; }
  .beginner-role-tabs button:last-child { border-bottom: 0; }
}

/* Beginner artwork v4 final override. */
.beginner-result-art { width: min(calc(100% - 48px), 720px); margin: 24px auto 0; border: 1px solid var(--beginner-line); border-radius: 7px; }
@media (max-width: 720px) { .beginner-result-art { width: 100%; margin-top: 0; border-width: 0 0 1px; border-radius: 0; } }

/* Ping guide v2 final cascade overrides. */
.pings-page :is(.pings-hero,.pings-wheel,.pings-combos,.pings-context,.pings-spam,.pings-reporting,.pings-sources) :is(h1,h2,h3,p,strong,small,span,li,a) { min-width: 0; overflow-wrap: break-word; }
.pings-hero h1 { max-width: 760px; padding-block: .06em; font-size: clamp(3rem,5.4vw,5.4rem); line-height: 1.02; text-wrap: balance; }
.pings-wheel-grid article { min-height: 350px; }
.pings-wheel-grid article > header { position: relative; grid-template-columns: 60px minmax(0,1fr); gap: 14px; padding-right: 38px; }
.pings-wheel-grid article > header > b { position: absolute; top: 0; right: 0; width: 34px; height: 34px; font-size: .68rem; }
.pings-wheel-grid article > header > span { width: 58px; height: 58px; border-radius: 50%; font-size: 1.45rem; box-shadow: 0 0 0 5px color-mix(in srgb,var(--tone) 14%,transparent); }
.pings-wheel-grid h3 { font-size: 1.32rem; }
.pings-wheel-grid article > p { display: grid; gap: 7px; margin: 25px 0; }
.pings-wheel-grid article > p > strong { color: var(--tone); font-size: .68rem; font-weight: 950; text-transform: uppercase; }
.pings-wheel-grid article > p > span { color: #b8c9d1; line-height: 1.58; }
.pings-wheel-grid footer { min-height: 112px; }
@media (max-width: 1360px) { .pings-wheel-grid,.pings-combos > div { grid-template-columns: 1fr 1fr; } .pings-wheel-grid article { min-height: 330px; } .pings-wheel-grid footer { min-height: 0; } }
@media (max-width: 760px) { .pings-hero h1 { font-size: clamp(2.65rem,12vw,3.7rem); line-height: 1.04; } .pings-wheel-grid article > header { grid-template-columns: 54px minmax(0,1fr); } .pings-wheel-grid article > header > span { width: 52px; height: 52px; } .pings-wheel-grid footer { min-height: 0; } }
@media (max-width: 420px) { .pings-wheel-grid article { padding: 19px 17px; } .pings-wheel-grid article > header { padding-right: 34px; } }

/* Ping card guidance: separate the useful call from the misuse warning. */
.pings-wheel-grid footer {
  display: grid;
  gap: 9px;
  min-height: 0;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid #2b414f;
}
.pings-wheel-grid footer > div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--tone) 32%, #263843);
  border-left: 4px solid var(--tone);
  border-radius: 6px;
  background: color-mix(in srgb, var(--tone) 8%, #101820);
}
.pings-wheel-grid footer > div.is-avoid {
  border-color: #503b45;
  border-left-color: #ff8298;
  background: #191218;
}
.pings-wheel-grid footer > div > i {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  color: #071115;
  background: var(--tone);
  font-size: 1rem;
}
.pings-wheel-grid footer > div.is-avoid > i {
  color: #210a10;
  background: #ff8298;
}
.pings-wheel-grid footer p {
  display: grid;
  gap: 5px;
  margin: 0;
}
.pings-wheel-grid footer strong {
  color: var(--tone);
  font-size: .68rem;
  font-weight: 950;
  text-transform: uppercase;
}
.pings-wheel-grid footer .is-avoid strong { color: #ff9bad; }
.pings-wheel-grid footer span {
  color: #bfd0d7;
  font-size: .88rem;
  line-height: 1.5;
}
.pings-wheel-grid footer .is-avoid span { color: #d1bac2; }
@media (max-width: 520px) {
  .pings-wheel-grid footer > div { grid-template-columns: 34px minmax(0, 1fr); padding: 12px 11px; }
  .pings-wheel-grid footer > div > i { width: 32px; height: 32px; }
}

/* Isolated ping guidance component; deliberately avoids global footer rules. */
.ping-guidance {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid #2b414f;
}
.ping-guidance-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--tone) 34%, #263843);
  border-left: 4px solid var(--tone);
  border-radius: 6px;
  background: color-mix(in srgb, var(--tone) 8%, #101820);
}
.ping-guidance-row.is-avoid {
  border-color: #503b45;
  border-left-color: #ff8298;
  background: #191218;
}
.ping-guidance-row > i {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  color: #071115;
  background: var(--tone);
  font-size: 1rem;
}
.ping-guidance-row.is-avoid > i { color: #210a10; background: #ff8298; }
.ping-guidance-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.ping-guidance-copy strong {
  display: block;
  color: var(--tone);
  font-size: .72rem;
  font-weight: 950;
  line-height: 1.2;
  text-transform: uppercase;
}
.ping-guidance-row.is-avoid .ping-guidance-copy strong { color: #ff9bad; }
.ping-guidance-copy p {
  min-width: 0;
  margin: 0;
  color: #bfd0d7;
  font-size: .9rem;
  line-height: 1.52;
  overflow-wrap: anywhere;
}
.ping-guidance-row.is-avoid .ping-guidance-copy p { color: #d1bac2; }
@media (max-width: 520px) {
  .ping-guidance-row { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .ping-guidance-row > i { width: 32px; height: 32px; }
}

/* v141: ordered League directory and consistent category filters. */
.league-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 4px;
}
.league-hero-facts span {
  display: grid;
  min-width: 105px;
  padding: 9px 12px;
  border: 1px solid rgba(145, 207, 221, .34);
  border-radius: 5px;
  background: rgba(5, 14, 21, .78);
  backdrop-filter: blur(8px);
}
.league-hero-facts b {
  color: #f2fbfd;
  font-size: .82rem;
  line-height: 1.2;
}
.league-hero-facts small {
  margin-top: 2px;
  color: #8eb5c2;
  font-size: .56rem;
  font-weight: 850;
  text-transform: uppercase;
}
.league-tool-groups {
  display: grid;
  gap: 24px;
}
.league-tool-finder {
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(300px, 1.15fr);
  gap: 14px 20px;
  align-items: end;
  margin: 0 0 22px;
  padding: 18px;
  border: 1px solid #2b414e;
  border-top: 3px solid #55dfe8;
  border-radius: 8px;
  background: linear-gradient(110deg, rgba(32, 97, 111, .2), #0a141d 48%, #121126);
}
.league-tool-finder > label span,
.league-tool-finder > label small {
  display: block;
}
.league-tool-finder > label span {
  color: #eafcff;
  font-size: .88rem;
  font-weight: 950;
}
.league-tool-finder > label span i {
  margin-right: 7px;
  color: #5ce3ec;
}
.league-tool-finder > label small {
  margin-top: 4px;
  color: #8099a7;
  font-size: .65rem;
  line-height: 1.4;
}
.league-tool-search-control {
  position: relative;
  min-width: 0;
}
.league-tool-search-control input {
  width: 100%;
  min-height: 48px;
  padding: 0 48px 0 14px;
  border: 1px solid #3a5a67;
  border-radius: 6px;
  color: #f1f9fb;
  background: #07131c;
  font-size: .78rem;
  font-weight: 750;
}
.league-tool-search-control input::placeholder { color: #6f8997; }
.league-tool-search-control input:focus {
  border-color: #5ce3ec;
  outline: 3px solid rgba(92, 227, 236, .13);
}
.league-tool-search-control button {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid #35515e;
  border-radius: 5px;
  color: #a9c2cc;
  background: #10212b;
  cursor: pointer;
}
.league-tool-search-control button:is(:hover, :focus-visible) {
  border-color: #5ce3ec;
  color: #edfdff;
}
.league-tool-segments {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.league-tool-segments button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid #314854;
  border-radius: 5px;
  color: #a7bbc5;
  background: #0c1821;
  font-size: .67rem;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}
.league-tool-segments button i { color: #5ddde6; text-align: center; }
.league-tool-segments button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.league-tool-segments button b {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  padding: 0 5px;
  border: 1px solid #405966;
  border-radius: 4px;
  color: #d9e8ec;
  background: #121f28;
  font-size: .58rem;
}
.league-tool-segments button[aria-pressed="true"] {
  border-color: #5ce3ec;
  color: #effdff;
  background: #102c36;
  box-shadow: inset 0 -3px 0 #5ce3ec;
}
.league-tool-segments button:nth-child(2)[aria-pressed="true"] { border-color: #6fe0e8; box-shadow: inset 0 -3px 0 #6fe0e8; }
.league-tool-segments button:nth-child(3)[aria-pressed="true"] { border-color: #e4b95e; box-shadow: inset 0 -3px 0 #e4b95e; }
.league-tool-segments button:nth-child(4)[aria-pressed="true"] { border-color: #a989ef; box-shadow: inset 0 -3px 0 #a989ef; }
.league-tool-search-status {
  grid-column: 1 / -1;
  min-height: 19px;
  margin: -3px 0 0;
  color: #76aeb8;
  font-size: .61rem;
  font-weight: 800;
  text-align: right;
}
.league-tool-finder.has-no-results .league-tool-search-status { color: #f1bd6a; }
.league-tool-group[hidden],
.league-tool-card[hidden] { display: none !important; }
.league-tool-group {
  --group-tone: #5cdae4;
  overflow: hidden;
  border: 1px solid #263946;
  border-top: 3px solid var(--group-tone);
  border-radius: 8px;
  background: #0a121a;
}
.league-tool-group.is-learning { --group-tone: #e4b95e; }
.league-tool-group.is-reference { --group-tone: #a989ef; }
.league-tool-group > header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 20px 22px;
  border-bottom: 1px solid #243542;
  background: linear-gradient(110deg, color-mix(in srgb, var(--group-tone) 10%, #0b151e), #0b141c 62%);
}
.league-tool-group-number {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--group-tone) 65%, #263946);
  border-radius: 5px;
  color: #071116;
  background: var(--group-tone);
  font-size: 1.05rem;
  font-weight: 950;
}
.league-tool-group > header .eyebrow { color: var(--group-tone); }
.league-tool-group > header h3 {
  margin: 3px 0 5px;
  color: #f3f8fa;
  font-size: 1.25rem;
}
.league-tool-group > header p:last-child {
  max-width: 760px;
  margin: 0;
  color: #98aeba;
  font-size: .78rem;
  line-height: 1.55;
}
.league-tool-group > .league-tool-grid {
  padding: 16px;
}
.league-tool-group:is(.is-primary, .is-reference) > .league-tool-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.league-tool-group .league-tool-card {
  border-color: #293d4a;
  background: #0d1720;
}
.league-tool-group .league-tool-card:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--group-tone) 62%, #293d4a);
}

.glossary-filters button,
.pass-filter button,
.status-effect-filters button,
.champion-effect-modes button {
  border-radius: 5px;
  letter-spacing: 0;
  text-transform: uppercase;
}
.status-effect-filters button i,
.champion-effect-modes button i {
  border-radius: 4px;
}
.glossary-filters button.active,
.pass-filter button.is-active,
.status-effect-filters button[aria-pressed="true"],
.champion-effect-modes button[aria-pressed="true"] {
  box-shadow: inset 0 -3px 0 currentColor;
}

@media (max-width: 620px) {
  .league-hero-facts { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .league-hero-facts span { min-width: 0; }
  .league-tool-finder { grid-template-columns: 1fr; padding: 14px; }
  .league-tool-search-control,
  .league-tool-segments,
  .league-tool-search-status { grid-column: 1; }
  .league-tool-segments { grid-template-columns: 1fr 1fr; }
  .league-tool-segments button { min-height: 46px; }
  .league-tool-search-status { text-align: left; }
  .league-tool-groups { gap: 18px; }
  .league-tool-group > header { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .league-tool-group-number { width: 38px; height: 38px; }
  .league-tool-group > header h3 { font-size: 1.05rem; }
  .league-tool-group > .league-tool-grid { padding: 10px; }
  .league-tool-group:is(.is-primary, .is-reference) > .league-tool-grid { grid-template-columns: 1fr; }
}
@media (max-width: 390px) {
  .league-tool-segments { grid-template-columns: 1fr; }
}
@media (min-width: 621px) and (max-width: 980px) {
  .league-tool-group:is(.is-primary, .is-reference) > .league-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Champion mastery guide */
.mastery-page { --mastery-cyan: #54e6ef; --mastery-gold: #e9b94c; --mastery-violet: #a98cff; background: #070c12; }
.mastery-page main { width: min(1180px, calc(100% - 34px)); margin: 0 auto; }
.mastery-page h1, .mastery-page h2, .mastery-page h3, .mastery-page p { overflow-wrap: anywhere; }
.mastery-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(330px, .7fr); gap: 34px; align-items: center; min-height: 450px; overflow: hidden; padding: 46px; border: 1px solid #263846; border-radius: 8px; background: radial-gradient(circle at 82% 36%, rgba(97, 68, 185, .28), transparent 31%), linear-gradient(120deg, #0c1f28, #0c111a 56%, #161128); }
.mastery-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(91,224,236,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(91,224,236,.035) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(90deg,#000,transparent 72%); }
.mastery-hero-copy, .mastery-hero-crest { position: relative; z-index: 1; min-width: 0; }
.mastery-hero h1 { max-width: 760px; margin: 7px 0 15px; color: #f6fbff; font-size: clamp(2.55rem, 5.3vw, 4.9rem); line-height: .98; letter-spacing: 0; }
.mastery-hero-copy > p:last-of-type { max-width: 710px; color: #b9cbd5; font-size: 1.04rem; line-height: 1.72; }
.mastery-actions, .mastery-jumps, .mastery-find-actions, .mastery-sources > div:last-child { display: flex; flex-wrap: wrap; gap: 9px; }
.mastery-actions { margin-top: 24px; }
.mastery-actions a, .mastery-jumps a, .mastery-find-actions a, .mastery-sources a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border: 1px solid #357180; border-radius: 5px; color: #dffcff; background: #0b2a35; font-size: .76rem; font-weight: 900; text-decoration: none; text-transform: uppercase; }
.mastery-actions a:is(:hover,:focus-visible), .mastery-jumps a:is(:hover,:focus-visible), .mastery-find-actions a:is(:hover,:focus-visible), .mastery-sources a:is(:hover,:focus-visible) { border-color: #65e7ef; background: #123945; }
.mastery-hero-crest { display: grid; justify-items: center; text-align: center; }
.mastery-orbit { position: relative; display: grid; place-items: center; width: 285px; height: 285px; }
.mastery-orbit::before, .mastery-orbit::after { content: ""; position: absolute; border: 1px solid rgba(102,229,238,.25); border-radius: 50%; }
.mastery-orbit::before { inset: 12px; }.mastery-orbit::after { inset: 31px; border-color: rgba(201,156,255,.25); }
.mastery-orbit img { position: relative; z-index: 1; width: 256px; height: 256px; object-fit: contain; filter: drop-shadow(0 18px 28px rgba(0,0,0,.55)) drop-shadow(0 0 17px rgba(92,207,238,.2)); }
.mastery-hero-crest span { color: #8ddce5; font-size: .72rem; font-weight: 900; text-transform: uppercase; }.mastery-hero-crest strong { display: block; color: #fff0bb; font-size: 2rem; }.mastery-hero-crest p { max-width: 360px; margin: 8px 0 0; color: #aebdca; line-height: 1.55; }
.mastery-snapshot { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 18px 0; border: 1px solid #263842; border-radius: 7px; background: #0d151e; }
.mastery-snapshot article { min-width: 0; padding: 18px 20px; border-right: 1px solid #263842; }.mastery-snapshot article:last-child { border-right: 0; }.mastery-snapshot strong, .mastery-snapshot span { display: block; }.mastery-snapshot strong { color: #f6f0db; font-size: 1.05rem; }.mastery-snapshot span { margin-top: 3px; color: #829aa9; font-size: .76rem; text-transform: uppercase; }
.mastery-jumps { align-items: center; margin: 18px 0 26px; padding: 12px; border: 1px solid #24343e; border-radius: 7px; background: #0a1219; }.mastery-jumps > span { padding: 0 5px; color: #7f94a2; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.mastery-uncapped, .mastery-crests, .mastery-progress, .mastery-milestones, .mastery-meaning, .mastery-surfaces, .mastery-find, .mastery-sources { margin: 26px 0; padding: 32px; border: 1px solid #263640; border-radius: 8px; background: #0b1219; }
.mastery-uncapped { display: grid; grid-template-columns: minmax(0, .9fr) minmax(340px, .72fr); gap: 18px 30px; align-items: center; overflow: hidden; background: radial-gradient(circle at 74% 38%, rgba(126,94,232,.19), transparent 30%), linear-gradient(120deg,#0b171f,#10111d); }
.mastery-uncapped-copy { min-width: 0; }.mastery-uncapped-copy > p { color: #a9bbc6; line-height: 1.66; }.mastery-answer { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 12px; align-items: center; margin-top: 10px; padding: 12px; border: 1px solid #584b35; border-radius: 6px; background: #1d170f; }.mastery-answer b { display: grid; place-items: center; min-height: 34px; border-radius: 4px; color: #ffce77; background: #38280f; text-transform: uppercase; }.mastery-answer span { color: #cdbd9f; }.mastery-answer.is-yes { border-color: #285762; background: #0d2027; }.mastery-answer.is-yes b { color: #92f3f6; background: #0c3942; }.mastery-answer.is-yes span { color: #b8dadd; }
.mastery-live-preview { min-width: 0; padding: 20px; border: 1px solid #4a3f70; border-radius: 8px; background: rgba(12,12,25,.86); box-shadow: 0 20px 55px rgba(0,0,0,.22); }.mastery-live-preview > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.mastery-live-preview header small, .mastery-live-preview header strong { display: block; }.mastery-live-preview header small { color: #8ddde4; font-weight: 900; text-transform: uppercase; }.mastery-live-preview header strong { color: #f1edff; }.mastery-live-preview output { display: grid; place-items: center; min-width: 58px; height: 42px; padding: 0 10px; border: 1px solid #a487ff; border-radius: 5px; color: #fff1bd; background: #251c43; font-size: 1.25rem; font-weight: 950; }
.mastery-numbered-crest { position: relative; display: grid; place-items: center; width: 240px; height: 240px; margin: 8px auto; }.mastery-numbered-crest img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 20px rgba(0,0,0,.55)); }.mastery-numbered-crest > b { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: grid; place-items: center; min-width: 46px; height: 34px; padding: 0 9px; border: 1px solid #e0b85a; border-radius: 5px; color: #fff4c4; background: #251b0a; box-shadow: 0 4px 12px rgba(0,0,0,.55); font-size: .9rem; }
.mastery-numbered-crest.is-small { width: 66px; height: 66px; margin: 0; }.mastery-numbered-crest.is-small > b { bottom: -2px; min-width: 28px; height: 20px; padding: 0 5px; font-size: .62rem; }.mastery-numbered-crest.is-medium { width: 118px; height: 118px; margin: 0; }.mastery-numbered-crest.is-medium > b { bottom: 3px; min-width: 34px; height: 25px; font-size: .7rem; }
.mastery-live-preview input[type="range"] { width: 100%; margin: 8px 0 0; accent-color: #61dce6; }.mastery-range-labels { display: flex; justify-content: space-between; color: #778c9d; font-size: .7rem; font-weight: 800; }.mastery-live-preview > p { margin: 13px 0 0; padding-top: 13px; border-top: 1px solid #2f2c42; color: #aeb4c8; line-height: 1.5; }.mastery-live-preview > p strong { color: #e6d8ff; }
.mastery-uncapped-examples { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }.mastery-uncapped-examples article { display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 12px; align-items: center; min-width: 0; padding: 13px; border: 1px solid #2c3b49; border-radius: 6px; background: #0d1720; }.mastery-uncapped-examples span, .mastery-uncapped-examples strong { display: block; }.mastery-uncapped-examples span { color: #879aa7; font-size: .75rem; }.mastery-uncapped-examples strong { color: #eaf4f6; font-size: .92rem; }
.mastery-crests > header, .mastery-find, .mastery-sources { display: flex; justify-content: space-between; gap: 28px; align-items: end; }.mastery-crests > header > p { max-width: 590px; color: #9db0bb; line-height: 1.65; }
.mastery-crest-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; margin-top: 24px; }
.mastery-crest-card { position: relative; min-width: 0; overflow: hidden; padding: 17px; border: 1px solid #293b48; border-top: 3px solid #4ecfdb; border-radius: 7px; background: linear-gradient(180deg,#12212c,#0d151e 47%); }
.mastery-crest-card.level-0 { border-top-color: #718593; filter: saturate(.7); }.mastery-crest-card.level-5, .mastery-crest-card.level-6 { border-top-color: #72a8ff; }.mastery-crest-card.level-7, .mastery-crest-card.level-8 { border-top-color: #a68af3; }.mastery-crest-card.level-9, .mastery-crest-card.level-10 { border-top-color: #e9b94c; background: linear-gradient(180deg,#231d16,#101722 48%); }
.mastery-crest-art { position: relative; display: grid; place-items: center; min-height: 172px; }.mastery-crest-art img { width: 174px; height: 174px; object-fit: contain; filter: drop-shadow(0 11px 17px rgba(0,0,0,.52)); }.mastery-crest-art b { position: absolute; right: 2px; bottom: 8px; display: grid; place-items: center; min-width: 42px; height: 36px; padding: 0 9px; border: 1px solid #5ad8e2; border-radius: 5px; color: #e9fdff; background: #08252e; font-size: .86rem; }
.mastery-crest-card small { color: #69dce5; font-weight: 900; text-transform: uppercase; }.mastery-crest-card h3 { margin: 5px 0 8px; color: #f5f8fa; font-size: 1.08rem; }.mastery-crest-card p { margin: 0; color: #9fb1bc; line-height: 1.55; }
.mastery-icon-note { display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 15px; align-items: center; margin-top: 13px; padding: 16px; border-left: 4px solid #9c7df1; background: #161427; }.mastery-icon-note img { width: 64px; height: 64px; object-fit: contain; }.mastery-icon-note strong { color: #eee8ff; }.mastery-icon-note p { margin: 4px 0 0; color: #afa8c6; }
.mastery-progress > header { max-width: 850px; }.mastery-progress-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 22px 0; }.mastery-progress-grid article { display: grid; grid-template-columns: 50px minmax(0,1fr); gap: 14px; min-width: 0; padding: 20px; border: 1px solid #28414d; border-radius: 7px; background: #101b24; }.mastery-progress-grid small { color: #6fdde6; font-weight: 900; text-transform: uppercase; }.mastery-progress-grid h3 { margin: 3px 0; }.mastery-progress-grid strong { color: #efc760; }.mastery-progress-grid p { color: #9fb1bd; line-height: 1.55; }
.mastery-equation { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 13px; align-items: center; padding: 18px; border: 1px solid rgba(230,180,77,.22); border-radius: 7px; background: #19160e; }.mastery-equation > div { min-width: 0; padding: 12px; }.mastery-equation span, .mastery-equation strong, .mastery-equation small { display: block; }.mastery-equation span { color: #b29d6f; font-size: .72rem; text-transform: uppercase; }.mastery-equation strong { margin: 2px 0; color: #fff1c5; }.mastery-equation small { color: #9f9275; }.mastery-equation > b { color: #e9b94c; font-size: 1.6rem; }
.mastery-score-note { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 14px; margin-top: 13px; padding: 17px; border-left: 4px solid #59dce6; background: #0d2229; }.mastery-score-note i { color: #68e5eb; font-size: 1.35rem; }.mastery-score-note strong { color: #dffbfc; }.mastery-score-note p { margin: 4px 0 0; color: #a6c0c6; }
.mastery-milestones { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); gap: 28px; }.mastery-milestones ol { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }.mastery-milestones li { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 13px; padding: 15px; border: 1px solid #263844; border-radius: 7px; background: #111b24; }.mastery-milestones li strong { display: block; color: #edf8fb; }.mastery-milestones li span { color: #9fb2bd; }.mastery-milestones aside { grid-column: 1 / -1; display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 13px; padding: 18px; border-left: 4px solid #e3a94c; background: #21180c; }.mastery-milestones aside i { color: #f1be5b; font-size: 1.25rem; }.mastery-milestones aside strong { color: #ffdda1; }.mastery-milestones aside p { margin: 4px 0 0; color: #cdbb9b; }
.mastery-meaning > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; margin-top: 20px; }.mastery-meaning article { position: relative; min-width: 0; padding: 22px 22px 22px 62px; border: 1px solid #263845; border-radius: 7px; background: #101923; }.mastery-meaning article i { position: absolute; left: 22px; top: 24px; color: #5be0e8; font-size: 1.35rem; }.mastery-meaning article.is-not i { color: #efaa5e; }.mastery-meaning article p { color: #9fb1bd; }
.mastery-surfaces > header { max-width: 840px; }.mastery-surfaces > header > p { color: #9fb1bd; }.mastery-surfaces > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; margin-top: 21px; }.mastery-surfaces article { display: grid; grid-template-columns: 126px minmax(0,1fr); gap: 16px; align-items: center; min-width: 0; padding: 18px; border: 1px solid #2b3d4b; border-radius: 7px; background: #101923; }.mastery-surfaces article > img { width: 118px; height: 118px; object-fit: contain; }.mastery-surfaces small, .mastery-surfaces strong { display: block; }.mastery-surfaces small { color: #70dce5; font-weight: 900; text-transform: uppercase; }.mastery-surfaces strong { margin-top: 3px; color: #edf6f8; }.mastery-surfaces p { color: #9eb0bc; line-height: 1.5; }
.mastery-find > div:first-child, .mastery-sources > div:first-child { max-width: 710px; }.mastery-find p, .mastery-sources p { color: #9fb1bd; }.mastery-find-actions, .mastery-sources > div:last-child { justify-content: flex-end; }

@media (max-width: 1000px) {
  .mastery-hero { grid-template-columns: 1fr; }.mastery-hero-crest { grid-template-columns: 250px minmax(0,1fr); align-items: center; text-align: left; }.mastery-orbit { width: 250px; height: 250px; }
  .mastery-uncapped { grid-template-columns: 1fr 340px; }.mastery-crest-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.mastery-progress-grid { grid-template-columns: 1fr; }.mastery-surfaces > div { grid-template-columns: 1fr; }.mastery-surfaces article { grid-template-columns: 118px minmax(0,1fr); }
}
@media (max-width: 760px) {
  .mastery-page main { width: min(100% - 20px,1180px); }.mastery-hero, .mastery-uncapped, .mastery-crests, .mastery-progress, .mastery-milestones, .mastery-meaning, .mastery-surfaces, .mastery-find, .mastery-sources { padding: 22px 17px; }
  .mastery-hero { min-height: 0; }.mastery-hero h1 { font-size: 2.45rem; }.mastery-hero-crest { grid-template-columns: 130px minmax(0,1fr); }.mastery-orbit { width: 130px; height: 130px; }.mastery-orbit img { width: 130px; height: 130px; }
  .mastery-snapshot { grid-template-columns: repeat(2,minmax(0,1fr)); }.mastery-snapshot article:nth-child(2) { border-right: 0; }.mastery-snapshot article:nth-child(-n+2) { border-bottom: 1px solid #263842; }
  .mastery-uncapped { grid-template-columns: 1fr; }.mastery-uncapped-examples { grid-template-columns: 1fr; }.mastery-crests > header, .mastery-find, .mastery-sources { align-items: flex-start; flex-direction: column; }.mastery-milestones { grid-template-columns: 1fr; }.mastery-equation { grid-template-columns: 1fr; }.mastery-equation > b { text-align: center; }.mastery-meaning > div { grid-template-columns: 1fr; }.mastery-find-actions, .mastery-sources > div:last-child { justify-content: flex-start; }
}
@media (max-width: 500px) {
  .mastery-numbered-crest { width: 205px; height: 205px; }.mastery-crest-grid { grid-template-columns: 1fr; }.mastery-crest-card { display: grid; grid-template-columns: 115px minmax(0,1fr); gap: 12px; align-items: center; }.mastery-crest-art { min-height: 115px; }.mastery-crest-art img { width: 120px; height: 120px; }.mastery-crest-art b { right: 0; bottom: 0; }.mastery-progress-grid article { grid-template-columns: 42px minmax(0,1fr); padding: 16px; }.mastery-actions a, .mastery-jumps a { flex: 1 1 140px; }.mastery-surfaces article { grid-template-columns: 88px minmax(0,1fr); padding: 14px; }.mastery-surfaces article > img, .mastery-surfaces .mastery-numbered-crest.is-medium { width: 82px; height: 82px; }
}

/* Jungle pathing v6: corridor-aware route and visible skipped camps */
.jungle-route-map polyline{animation:none}

/* Shared League action language v2: compact commands, not content cards. */
:where(
  .league-hero-actions,
  .conduct-hero-actions,
  .conduct-evidence-actions,
  .reporting-hero-actions,
  .teams-hero-actions,
  .mastery-actions,
  .mastery-find-actions,
  .build-directory-hero-actions,
  .champion-hero-actions,
  .champion-build-actions,
  .companion-hero-actions,
  .companion-warning-actions,
  .honor-hero-actions,
  .inhibitor-hero-actions,
  .jungle-hero-actions,
  .objectives-hero-actions,
  .recall-hero-actions,
  .social-guide-actions,
  .status-effects-hero-actions,
  .turret-hero-actions,
  .league-not-found-actions,
  .api-policy-actions,
  .pass-actions,
  .next-work-actions,
  .beginner-card-actions,
  .beginner-result-actions
) > :is(a, button) {
  --action-accent: #69dfe9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 42px !important;
  padding: 8px 14px !important;
  border: 1px solid color-mix(in srgb, var(--action-accent) 48%, #2a3c49) !important;
  border-radius: 5px !important;
  color: color-mix(in srgb, var(--action-accent) 67%, #eaf4f8) !important;
  background: color-mix(in srgb, var(--action-accent) 7%, #0a141c) !important;
  box-shadow: inset 0 -2px color-mix(in srgb, var(--action-accent) 11%, transparent) !important;
  font-size: .76rem !important;
  font-weight: 900 !important;
  line-height: 1.25;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
:where(
  .league-hero-actions,
  .conduct-hero-actions,
  .conduct-evidence-actions,
  .reporting-hero-actions,
  .teams-hero-actions,
  .mastery-actions,
  .mastery-find-actions,
  .build-directory-hero-actions,
  .champion-hero-actions,
  .champion-build-actions,
  .companion-hero-actions,
  .companion-warning-actions,
  .honor-hero-actions,
  .inhibitor-hero-actions,
  .jungle-hero-actions,
  .objectives-hero-actions,
  .recall-hero-actions,
  .social-guide-actions,
  .status-effects-hero-actions,
  .turret-hero-actions,
  .league-not-found-actions,
  .api-policy-actions,
  .pass-actions,
  .next-work-actions,
  .beginner-card-actions,
  .beginner-result-actions
) > :is(a, button):nth-child(2) { --action-accent: #b28cff; }
:where(
  .league-hero-actions,
  .conduct-hero-actions,
  .conduct-evidence-actions,
  .reporting-hero-actions,
  .teams-hero-actions,
  .mastery-actions,
  .mastery-find-actions,
  .build-directory-hero-actions,
  .champion-hero-actions,
  .champion-build-actions,
  .companion-hero-actions,
  .companion-warning-actions,
  .honor-hero-actions,
  .inhibitor-hero-actions,
  .jungle-hero-actions,
  .objectives-hero-actions,
  .recall-hero-actions,
  .social-guide-actions,
  .status-effects-hero-actions,
  .turret-hero-actions,
  .league-not-found-actions,
  .api-policy-actions,
  .pass-actions,
  .next-work-actions,
  .beginner-card-actions,
  .beginner-result-actions
) > :is(a, button):nth-child(3n) { --action-accent: #efc45f; }
:where(
  .league-hero-actions,
  .conduct-hero-actions,
  .conduct-evidence-actions,
  .reporting-hero-actions,
  .teams-hero-actions,
  .mastery-actions,
  .mastery-find-actions,
  .build-directory-hero-actions,
  .champion-hero-actions,
  .champion-build-actions,
  .companion-hero-actions,
  .companion-warning-actions,
  .honor-hero-actions,
  .inhibitor-hero-actions,
  .jungle-hero-actions,
  .objectives-hero-actions,
  .recall-hero-actions,
  .social-guide-actions,
  .status-effects-hero-actions,
  .turret-hero-actions,
  .league-not-found-actions,
  .api-policy-actions,
  .pass-actions,
  .next-work-actions,
  .beginner-card-actions,
  .beginner-result-actions
) > :is(a, button):is(:hover, :focus-visible) {
  outline: 0;
  border-color: var(--action-accent) !important;
  color: #fff !important;
  background: color-mix(in srgb, var(--action-accent) 14%, #0b151e) !important;
  box-shadow: inset 0 -3px color-mix(in srgb, var(--action-accent) 25%, transparent), 0 0 0 2px color-mix(in srgb, var(--action-accent) 12%, transparent) !important;
  transform: translateY(-1px);
}
:where(
  .league-hero-actions,
  .conduct-hero-actions,
  .conduct-evidence-actions,
  .reporting-hero-actions,
  .teams-hero-actions,
  .mastery-actions,
  .mastery-find-actions,
  .build-directory-hero-actions,
  .champion-hero-actions,
  .champion-build-actions,
  .companion-hero-actions,
  .companion-warning-actions,
  .honor-hero-actions,
  .inhibitor-hero-actions,
  .jungle-hero-actions,
  .objectives-hero-actions,
  .recall-hero-actions,
  .social-guide-actions,
  .status-effects-hero-actions,
  .turret-hero-actions,
  .league-not-found-actions,
  .api-policy-actions,
  .pass-actions,
  .next-work-actions,
  .beginner-card-actions,
  .beginner-result-actions
) > :is(a, button) > i {
  flex: 0 0 auto;
  color: var(--action-accent) !important;
  font-size: .9rem;
}
@media (max-width: 520px) {
  :where(
    .league-hero-actions,
    .conduct-hero-actions,
    .reporting-hero-actions,
    .teams-hero-actions,
    .mastery-actions,
    .build-directory-hero-actions,
    .champion-hero-actions,
    .companion-hero-actions,
    .honor-hero-actions,
    .inhibitor-hero-actions,
    .jungle-hero-actions,
    .objectives-hero-actions,
    .recall-hero-actions,
    .social-guide-actions,
    .status-effects-hero-actions,
    .turret-hero-actions,
    .league-not-found-actions
  ) > :is(a, button) {
    width: 100%;
  }
}
.jungle-route-map .jungle-route-track{stroke:#02070a;stroke-width:10;stroke-dasharray:none;opacity:.9;filter:drop-shadow(0 2px 4px rgba(0,0,0,.8))}
.jungle-route-map .jungle-route-line{stroke:#65f2e6;stroke-width:4;stroke-dasharray:10 6;filter:drop-shadow(0 0 6px rgba(40,220,217,.92));animation:jungle-route-flow 9s linear infinite}
.jungle-map-camp-sites{position:absolute;inset:0;z-index:2;pointer-events:none}
.jungle-map-camp-site{position:absolute;left:var(--x);top:var(--y);display:grid;width:36px;height:36px;place-items:center;transform:translate(-50%,-50%);border:1px dashed rgba(208,225,230,.58);border-radius:50%;background:rgba(4,13,18,.76);opacity:.68}
.jungle-map-camp-site.is-selected{opacity:0}
.jungle-map-camp-site>.jungle-camp-icon{width:27px;height:27px;flex-basis:27px;filter:grayscale(.45) brightness(.8)}
.jungle-map-camp-site>em{position:absolute;top:calc(100% + 3px);left:50%;width:max-content;max-width:90px;transform:translateX(-50%);color:#b7c5ca;font-size:8px;font-style:normal;font-weight:850;text-align:center;text-shadow:0 1px 3px #000}
.jungle-map-key u{display:block;width:14px;height:14px;border:1px dashed #b9c8cd;border-radius:50%;background:#111c22;text-decoration:none;opacity:.8}
@media(max-width:640px){.jungle-map-key u{display:none}.jungle-map-camp-site>em{display:none}}

/* Jungle pathing v7: complete Rift context and team-relative routing */
.jungle-route-output{grid-template-columns:minmax(500px,1.08fr) minmax(0,.92fr)}
.jungle-route-map>svg{z-index:5}
.jungle-route-map .jungle-route-network polyline{stroke:#5a7780;stroke-width:1.35;stroke-dasharray:2.5 3.5;opacity:.42;filter:none;animation:none}
.jungle-map-lanes,.jungle-map-landmarks{position:absolute;inset:0;pointer-events:none}
.jungle-map-lanes{z-index:2}
.jungle-map-landmarks{z-index:3}
.jungle-map-camp-sites{z-index:4}
.jungle-map-marker{z-index:6}
.jungle-map-key,.jungle-map-base{z-index:7}
.jungle-map-lane{position:absolute;left:var(--x);top:var(--y);padding:3px 7px;transform:translate(-50%,-50%);border:1px solid rgba(154,184,195,.24);border-radius:999px;background:rgba(3,10,14,.66);color:rgba(220,234,239,.72);font-size:8px;font-weight:950;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 1px 3px #000;white-space:nowrap}
.jungle-map-lane.is-river{transform:translate(-50%,-50%) rotate(45deg);border-color:rgba(65,190,220,.28);color:#8adbea;background:rgba(5,31,42,.68)}
.jungle-map-landmark{position:absolute;left:var(--x);top:var(--y);display:grid;min-width:42px;min-height:30px;place-items:center;padding:4px 6px;transform:translate(-50%,-50%);border:1px solid rgba(223,177,87,.5);border-radius:6px;background:rgba(21,16,8,.88);box-shadow:0 3px 10px rgba(0,0,0,.42);text-align:center}
.jungle-map-landmark.is-dragon{border-color:rgba(238,104,100,.58);background:rgba(34,12,14,.88)}
.jungle-map-landmark>b{color:#f1cf83;font-size:8px;line-height:1.1;text-transform:uppercase}
.jungle-map-landmark.is-dragon>b{color:#ffaaa4}
.jungle-map-landmark>em{position:absolute;top:calc(100% + 3px);left:50%;width:max-content;max-width:118px;transform:translateX(-50%);color:#e2e7e8;font-size:7px;font-style:normal;font-weight:850;text-shadow:0 1px 3px #000}
.jungle-map-camp-site.is-opposing{width:29px;height:29px;border-style:solid;border-color:rgba(211,128,147,.42);background:rgba(24,8,14,.68);opacity:.48}
.jungle-map-camp-site.is-opposing>.jungle-camp-icon{width:21px;height:21px;flex-basis:21px;filter:grayscale(.65) brightness(.68)}
.jungle-map-camp-site.is-opposing>em{color:#d3aeb7;font-size:6px}
.jungle-map-camp-site.is-river{width:31px;height:31px;border-style:solid;border-color:rgba(91,205,226,.58);background:rgba(5,27,36,.8);opacity:.88}
.jungle-map-camp-site.is-river>.jungle-camp-icon{width:23px;height:23px;flex-basis:23px;filter:none}
.jungle-map-camp-site.is-selected-river{opacity:.28}
.jungle-map-key{max-width:calc(100% - 24px);flex-wrap:wrap;justify-content:center}
.jungle-map-key mark{display:block;width:14px;height:14px;border:1px solid #dfb157;border-radius:4px;background:#211a0b}
@media(max-width:1080px){.jungle-route-output{grid-template-columns:1fr}.jungle-route-map{position:relative;top:auto;width:min(100%,680px);margin-inline:auto}}
@media(max-width:640px){.jungle-map-lane{font-size:6px}.jungle-map-landmark{min-width:34px;min-height:25px}.jungle-map-landmark>b{font-size:6px}.jungle-map-landmark>em,.jungle-map-camp-site.is-opposing>em{display:none}.jungle-map-camp-site.is-opposing{width:23px;height:23px}.jungle-map-camp-site.is-opposing>.jungle-camp-icon{width:17px;height:17px;flex-basis:17px}.jungle-map-key{gap:5px;font-size:8px}}

/* Jungle pathing v8: one large map with every route visible */
.jungle-route-output{display:block}
.jungle-route-map-panel{width:min(100%,980px);margin:20px auto 0}
.jungle-route-map{position:relative;top:auto;width:100%;max-width:none;margin:0 auto}
.jungle-route-details{width:min(100%,980px);margin:18px auto 0}
.jungle-route-output .jungle-route-details>ol{grid-template-columns:repeat(3,minmax(0,1fr))}
.jungle-route-map .jungle-all-routes polyline{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.34;filter:none;animation:none}
.jungle-all-routes .route-full{stroke:#4fe2d9}.jungle-all-routes .route-five{stroke:#f2bd55}.jungle-all-routes .route-double-buff{stroke:#aa8af5}.jungle-all-routes .route-pressure,.jungle-all-routes .route-same-side{stroke:#62d99a}.jungle-all-routes .route-quadrant{stroke:#66adf4}
.jungle-route-map .jungle-all-routes polyline.is-selected{stroke-width:3.5;opacity:.78;filter:drop-shadow(0 0 4px currentColor)}
.jungle-route-map .jungle-route-line{stroke-width:4.5}
.jungle-all-route-key{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:10px}
.jungle-all-route-key button{display:grid;min-width:0;min-height:58px;grid-template-columns:30px minmax(0,1fr);gap:9px;align-items:center;padding:10px 11px;border:1px solid #2d4652;border-radius:6px;background:#0d171e;color:#92aab5;text-align:left;cursor:pointer}
.jungle-all-route-key button>i{display:block;width:28px;border-top:4px solid currentColor;border-radius:999px}
.jungle-all-route-key button span,.jungle-all-route-key button strong,.jungle-all-route-key button small{display:block;min-width:0}
.jungle-all-route-key button strong{color:#edf7f8;font-size:12px;line-height:1.25}.jungle-all-route-key button small{margin-top:2px;color:#7f949e;font-size:10px}
.jungle-all-route-key .route-full{color:#4fe2d9}.jungle-all-route-key .route-five{color:#f2bd55}.jungle-all-route-key .route-double-buff{color:#aa8af5}.jungle-all-route-key .route-pressure,.jungle-all-route-key .route-same-side{color:#62d99a}.jungle-all-route-key .route-quadrant{color:#66adf4}
.jungle-all-route-key button:is(:hover,:focus-visible){border-color:currentColor;background:#13232c}.jungle-all-route-key button.is-selected{border-color:currentColor;background:#152731;box-shadow:inset 0 -3px currentColor}
.jungle-map-camp-site.is-opposing>em,.jungle-map-landmark>em{display:none}
.jungle-map-landmark{min-width:48px}.jungle-map-landmark>b{font-size:7px}
@media(max-width:800px){.jungle-all-route-key{grid-template-columns:repeat(2,minmax(0,1fr))}.jungle-route-output .jungle-route-details>ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.jungle-all-route-key{grid-template-columns:1fr}.jungle-all-route-key button{min-height:48px}.jungle-route-output .jungle-route-details>ol{grid-template-columns:1fr}.jungle-map-camp-site.is-opposing{opacity:.34}.jungle-map-key{bottom:7px}}

/* Jungle pathing v9: readable route atlas */
.jungle-route-atlas-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:10px;padding:14px 16px;border:1px solid #304c57;border-left:3px solid #65f2e6;border-radius:6px;background:#0c171e}
.jungle-route-atlas-head>span{display:flex;align-items:center;gap:9px;white-space:nowrap}.jungle-route-atlas-head>span i{color:#65f2e6}.jungle-route-atlas-head strong{font-size:14px}.jungle-route-atlas-head p{max-width:620px;margin:0;color:#8ca1aa;font-size:12px;text-align:right}
.jungle-route-map .jungle-all-routes .route-full{stroke-dasharray:none}.jungle-route-map .jungle-all-routes .route-five{stroke-dasharray:8 4}.jungle-route-map .jungle-all-routes .route-double-buff{stroke-dasharray:3 3}.jungle-route-map .jungle-all-routes .route-pressure,.jungle-route-map .jungle-all-routes .route-same-side{stroke-dasharray:12 4 2 4}.jungle-route-map .jungle-all-routes .route-quadrant{stroke-dasharray:2 6}
.jungle-route-map .jungle-all-routes polyline{opacity:.44}.jungle-route-map .jungle-all-routes polyline.is-selected{opacity:.9}
.jungle-all-route-key .route-full>i{border-top-style:solid}.jungle-all-route-key .route-five>i{border-top-style:dashed}.jungle-all-route-key .route-double-buff>i{border-top-style:dotted}.jungle-all-route-key .route-pressure>i,.jungle-all-route-key .route-same-side>i{border-top-style:dashed}.jungle-all-route-key .route-quadrant>i{border-top-style:dotted}
.jungle-route-atlas-note{display:flex;align-items:center;gap:9px;margin:9px 0 0;padding:10px 12px;border:1px solid #263e48;border-radius:6px;background:#0a141a;color:#8298a2;font-size:11px}.jungle-route-atlas-note i{color:#f2bd55}.jungle-route-atlas-note strong{color:#dcebed}
@media(max-width:700px){.jungle-route-atlas-head{display:grid;align-items:start}.jungle-route-atlas-head p{text-align:left}.jungle-route-map .jungle-all-routes polyline{opacity:.36}}

/* Shared map atlas v10: complete locations and readable mobile focus. */
.jungle-map-viewport,.vision-map-viewport{min-width:0;overflow:visible;scrollbar-width:thin;scrollbar-color:#62e8e1 #071117}
.jungle-map-viewport::-webkit-scrollbar,.vision-map-viewport::-webkit-scrollbar{height:10px}
.jungle-map-viewport::-webkit-scrollbar-track,.vision-map-viewport::-webkit-scrollbar-track{background:#071117}
.jungle-map-viewport::-webkit-scrollbar-thumb,.vision-map-viewport::-webkit-scrollbar-thumb{border:2px solid #071117;border-radius:999px;background:#62e8e1}
.jungle-map-mobile-controls,.vision-map-mobile-controls,.jungle-map-mobile-hint{display:none}
.jungle-map-completeness{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:10px;border:1px solid #2f4852;border-radius:6px;background:#0b151c;overflow:hidden}
.jungle-map-completeness>span{display:grid;gap:2px;min-width:0;padding:12px 14px;border-right:1px solid #263d47}.jungle-map-completeness>span:nth-child(4){border-right:0}
.jungle-map-completeness>span b{color:#efffff;font-size:20px;line-height:1}.jungle-map-completeness>span small{color:#8fa7b0;font-size:10px;font-weight:850;text-transform:uppercase}
.jungle-map-completeness>p{grid-column:1/-1;margin:0;padding:11px 14px;border-top:1px solid #263d47;color:#9fb0b6;font-size:11px;line-height:1.5}.jungle-map-completeness>p strong{color:#e7bd66}
.vision-map-viewport{display:grid;width:100%;min-height:680px;place-items:center}
.vision-map-viewport .vision-map-board{width:min(100%,680px);max-width:680px;height:auto;min-height:0;aspect-ratio:1;align-self:center}
.vision-map-viewport .vision-map-board>img{inset:0;width:100%;height:100%}
@media(max-width:1120px){
  .vision-map-viewport{min-height:600px}
}
@media(max-width:720px){
  .jungle-map-mobile-controls,.vision-map-mobile-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 8px}
  .jungle-map-mobile-controls button,.vision-map-mobile-controls button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:44px;padding:7px;border:1px solid #304954;border-radius:5px;background:#0d1820;color:#8fa5ae;font-size:11px;font-weight:900;cursor:pointer}
  .jungle-map-mobile-controls button i,.vision-map-mobile-controls button i{color:#64e9e2;font-size:14px}
  .jungle-map-mobile-controls button[aria-pressed="true"],.vision-map-mobile-controls button[aria-pressed="true"]{border-color:#64e9e2;background:#123039;color:#f1ffff;box-shadow:inset 0 -3px rgba(100,233,226,.38)}
  .jungle-map-viewport,.vision-map-viewport{overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity}
  .jungle-map-viewport:not(.is-fit) .jungle-route-map,.vision-map-viewport:not(.is-fit) .vision-map-board{width:760px;min-width:760px;max-width:none;scroll-snap-align:start}
  .jungle-map-viewport.is-fit,.vision-map-viewport.is-fit{overflow:hidden}
  .jungle-map-viewport.is-fit .jungle-route-map,.vision-map-viewport.is-fit .vision-map-board{width:100%;min-width:0}
  .jungle-map-camp-site.is-opposing{width:34px;height:34px;opacity:.74}.jungle-map-camp-site.is-opposing>.jungle-camp-icon{width:26px;height:26px;flex-basis:26px;filter:grayscale(.25) brightness(.86)}
  .jungle-map-camp-site>em,.jungle-map-camp-site.is-opposing>em,.jungle-map-landmark>em{display:block;max-width:105px;font-size:8px}
  .jungle-map-lane{font-size:8px}.jungle-map-landmark{min-width:46px;min-height:30px}.jungle-map-landmark>b{font-size:7px}
  .jungle-map-mobile-hint{display:flex;align-items:flex-start;gap:8px;margin:8px 0 0;padding:10px 11px;border:1px solid #2b4650;border-left:3px solid #62e8e1;border-radius:5px;background:#0a151b;color:#91a5ad;font-size:11px;line-height:1.45}.jungle-map-mobile-hint i{color:#62e8e1;font-size:16px}
  .jungle-map-completeness{grid-template-columns:repeat(2,minmax(0,1fr))}.jungle-map-completeness>span:nth-child(2){border-right:0}.jungle-map-completeness>span:nth-child(-n+2){border-bottom:1px solid #263d47}
  .vision-map-layout{grid-template-columns:1fr}.vision-map-viewport{min-height:0;border-bottom:1px solid rgba(255,255,255,.1)}.vision-map-viewport .vision-map-board{height:auto;min-height:0;aspect-ratio:1;border-right:0;border-bottom:0}
}
@media(max-width:430px){
  .jungle-map-viewport:not(.is-fit) .jungle-route-map,.vision-map-viewport:not(.is-fit) .vision-map-board{width:690px;min-width:690px}
  .jungle-map-mobile-controls button,.vision-map-mobile-controls button{font-size:10px}.jungle-map-mobile-controls button span,.vision-map-mobile-controls button span{overflow-wrap:anywhere}
  .jungle-map-completeness>span{padding:10px}.jungle-map-completeness>p{padding:10px}
}

/* Jungle route atlas v11: equal opposing-side visibility and enemy routing. */
.jungle-route-controls{grid-template-columns:minmax(0,1.45fr) repeat(3,minmax(0,.7fr))}
.jungle-route-controls .is-territory{border-top:3px solid #ff7398}
.jungle-map-camp-site.is-opposing{width:36px;height:36px;border:2px solid rgba(244,112,143,.86);background:rgba(31,8,17,.9);opacity:.96;box-shadow:0 0 0 3px rgba(244,112,143,.08),0 4px 12px rgba(0,0,0,.58)}
.jungle-map-camp-site.is-opposing>.jungle-camp-icon{width:27px;height:27px;flex-basis:27px;filter:none}
.jungle-map-camp-site.is-opposing>em{display:block;color:#ffd4df;font-size:8px}
.jungle-map-marker.is-opposing-route{border-color:#ff7398;background:#32101c;box-shadow:0 0 0 4px rgba(255,91,135,.14),0 0 18px rgba(255,76,127,.48)}
.jungle-map-marker.is-opposing-route>b{background:#ff7398;color:#220711}
.jungle-map-marker.is-opposing-route>em{color:#ffe6ec}
.jungle-route-controls .is-territory button[aria-pressed="true"]{border-color:#ff7398;background:#2a111b;box-shadow:inset 0 -3px rgba(255,115,152,.42)}
.jungle-route-selection .is-territory{border-top-color:rgba(255,115,152,.42)}
.jungle-route-selection .is-territory span{color:#ff91ae}
@media(max-width:1250px){.jungle-route-controls{grid-template-columns:repeat(3,minmax(0,1fr))}.jungle-route-controls .is-route{grid-column:1/-1}}
@media(max-width:720px){
  .jungle-route-controls{grid-template-columns:1fr}.jungle-route-controls .is-route{grid-column:auto}
  .jungle-map-camp-site.is-opposing{width:38px;height:38px;opacity:1}.jungle-map-camp-site.is-opposing>.jungle-camp-icon{width:29px;height:29px;flex-basis:29px}
  .jungle-map-camp-site.is-opposing>em{display:block;max-width:112px;color:#ffe0e8;font-size:9px}
}

/* Jungle route atlas v12: connected invade paths and crossing support. */
.jungle-route-controls{grid-template-columns:minmax(0,1.45fr) repeat(3,minmax(0,.7fr))}
.jungle-route-controls .is-entry{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:3px solid #f0bd55}
.jungle-route-controls .is-entry button[aria-pressed="true"]{border-color:#f0bd55;background:#30250f;box-shadow:inset 0 -3px #f0bd55}
.jungle-route-controls .is-entry button:disabled{cursor:not-allowed;filter:grayscale(.6);opacity:.45}
.jungle-route-selection .is-risk{border-top-color:rgba(240,189,85,.5)}.jungle-route-selection .is-risk span{color:#f0bd55}
.jungle-route-map .jungle-opposing-route-line,.jungle-route-map .jungle-invade-connector{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.jungle-route-map .jungle-opposing-route-line{stroke:#ff7398;stroke-width:4.5;stroke-dasharray:10 6;filter:drop-shadow(0 0 6px rgba(255,80,130,.8));animation:jungle-route-flow 9s linear infinite}
.jungle-route-map .jungle-invade-connector{stroke:#f0bd55;stroke-width:3.4;stroke-dasharray:3 4;filter:drop-shadow(0 0 5px rgba(240,189,85,.72))}
.jungle-route-map .jungle-all-routes polyline.is-opposing-atlas{stroke:#db708d;opacity:.28}
.jungle-map-crossing-marker{position:absolute;left:var(--x);top:var(--y);z-index:7;display:grid;width:42px;height:42px;place-items:center;transform:translate(-50%,-50%);border:2px solid #f0bd55;border-radius:50%;background:#30250f;box-shadow:0 0 0 4px rgba(240,189,85,.14),0 0 16px rgba(240,189,85,.42)}
.jungle-map-crossing-marker>b{position:absolute;right:-6px;top:-7px;display:grid;width:22px;height:22px;place-items:center;border-radius:50%;background:#f0bd55;color:#171006;font-size:11px}.jungle-map-crossing-marker>i{color:#ffe1a1;font-size:18px}.jungle-map-crossing-marker>em{position:absolute;top:calc(100% + 5px);left:50%;width:max-content;max-width:120px;transform:translateX(-50%);color:#ffe4aa;font-size:8px;font-style:normal;font-weight:900;text-align:center;text-shadow:0 1px 3px #000}
.jungle-route-details li.is-crossing{border-color:#f0bd55;background:#231c0e}.jungle-route-details li.is-crossing>i{color:#f0bd55;font-size:22px}.jungle-route-details li.is-opposing-step{border-color:#ff7398;background:#211018}
.jungle-invade-support{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);gap:16px;align-items:center;margin-top:10px;padding:15px;border:1px solid #6a4c24;border-left:4px solid #f0bd55;border-radius:6px;background:#1d170c}
.jungle-invade-support[hidden]{display:none}.jungle-invade-support>div{display:flex;align-items:center;gap:12px}.jungle-invade-support>div>i{color:#f0bd55;font-size:24px}.jungle-invade-support small,.jungle-invade-support strong{display:block}.jungle-invade-support small{color:#e8b85a;font-size:10px;font-weight:950;text-transform:uppercase}.jungle-invade-support strong{margin-top:2px;color:#fff0c7;font-size:15px}.jungle-invade-support ul{display:grid;gap:5px;margin:0;padding-left:18px;color:#c9b98f;font-size:11px;line-height:1.45}
@media(max-width:720px){.jungle-route-controls .is-entry{grid-template-columns:1fr}.jungle-invade-support{grid-template-columns:1fr}.jungle-map-crossing-marker{width:46px;height:46px}.jungle-map-crossing-marker>em{font-size:9px}}

/* Jungle route atlas v13: keep every route control inside narrow viewports. */
@media(max-width:720px){
  .jungle-page .jungle-route-controls{grid-template-columns:minmax(0,1fr)}
  .jungle-page .jungle-route-controls fieldset,
  .jungle-page .jungle-route-controls .is-route,
  .jungle-page .jungle-route-controls .is-entry{grid-column:auto;width:100%;min-width:0}
  .jungle-page .jungle-route-controls button{width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere}
  .jungle-page .jungle-route-controls .is-entry{grid-template-columns:minmax(0,1fr)}
}

/* Jungle route atlas v14: put every line and territory option beside the map. */
.jungle-map-route-dashboard{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.8fr);gap:10px;margin:0 0 12px}
.jungle-map-route-dashboard>section{min-width:0;padding:12px;border:1px solid #2d4652;border-top:3px solid #60e7df;border-radius:6px;background:#0b171e}
.jungle-map-route-dashboard>section>header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:9px}.jungle-map-route-dashboard>section>header span{color:#72ece5;font-size:10px;font-weight:950;text-transform:uppercase}.jungle-map-route-dashboard>section>header strong{color:#dce9ed;font-size:11px;text-align:right}
.jungle-map-route-dashboard .is-routes{grid-row:span 2}.jungle-map-route-dashboard .is-territory{border-top-color:#ff7398}.jungle-map-route-dashboard .is-territory>header span{color:#ff91ae}.jungle-map-route-dashboard .is-crossing{border-top-color:#f0bd55}.jungle-map-route-dashboard .is-crossing>header span{color:#f0bd55}
.jungle-map-route-dashboard .jungle-all-route-key{grid-template-columns:repeat(2,minmax(0,1fr));margin:0}.jungle-map-route-dashboard .jungle-all-route-key button:first-child{grid-column:1/-1}
.jungle-map-line-mode,.jungle-map-route-dashboard .is-territory>div,.jungle-map-route-dashboard .is-crossing>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:8px}
.jungle-map-route-dashboard .is-territory>div{grid-template-columns:1fr}.jungle-map-route-dashboard .is-crossing>div{grid-template-columns:repeat(3,minmax(0,1fr))}
.jungle-map-line-mode button,.jungle-map-route-dashboard .is-territory button,.jungle-map-route-dashboard .is-crossing button{display:flex;min-width:0;min-height:48px;align-items:center;gap:9px;padding:9px 10px;border:1px solid #344d59;border-radius:5px;background:#101d25;color:#91a5ae;text-align:left;cursor:pointer}
.jungle-map-line-mode button i,.jungle-map-route-dashboard .is-territory button i{color:#64e9e2;font-size:17px}.jungle-map-line-mode button span,.jungle-map-line-mode button strong,.jungle-map-line-mode button small,.jungle-map-route-dashboard button span,.jungle-map-route-dashboard button strong,.jungle-map-route-dashboard button small{display:block;min-width:0}.jungle-map-route-dashboard button strong{color:#edf7f8;font-size:11px;line-height:1.25}.jungle-map-route-dashboard button small{margin-top:2px;color:#80959e;font-size:9px;line-height:1.3}
.jungle-map-line-mode button[aria-pressed="true"]{border-color:#64e9e2;background:#123039;box-shadow:inset 0 -3px #64e9e2}.jungle-map-route-dashboard .is-territory button[aria-pressed="true"]{border-color:#ff7398;background:#2a111b;box-shadow:inset 0 -3px #ff7398}.jungle-map-route-dashboard .is-crossing button[aria-pressed="true"]{border-color:#f0bd55;background:#30250f;box-shadow:inset 0 -3px #f0bd55}.jungle-map-route-dashboard button:disabled{cursor:not-allowed;filter:grayscale(.55);opacity:.42}
.jungle-route-map .jungle-all-routes polyline{opacity:.62}.jungle-route-map .jungle-all-routes polyline.is-selected{stroke-width:3.8;opacity:1}.jungle-route-map .jungle-all-routes.is-selected-only polyline:not(.is-selected){opacity:0}
.jungle-map-key:after{content:"Faint coloured lines = alternatives";color:#9fb5bd;font-size:10px;font-weight:800}
@media(max-width:900px){.jungle-map-route-dashboard{grid-template-columns:1fr}.jungle-map-route-dashboard .is-routes{grid-row:auto}.jungle-map-route-dashboard .jungle-all-route-key{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.jungle-map-route-dashboard{gap:8px}.jungle-map-route-dashboard>section{padding:10px}.jungle-map-route-dashboard>section>header{align-items:flex-start;flex-direction:column;gap:3px}.jungle-map-route-dashboard>section>header strong{text-align:left}.jungle-map-route-dashboard .jungle-all-route-key,.jungle-map-line-mode{grid-template-columns:1fr}.jungle-map-route-dashboard .jungle-all-route-key button:first-child{grid-column:auto}.jungle-map-route-dashboard .is-crossing>div{grid-template-columns:1fr}.jungle-map-key:after{display:none}}

/* Jungle route atlas v15: centred steps and a simpler crossing picker. */
.jungle-page .jungle-route-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
.jungle-page .jungle-route-controls fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.jungle-route-map .jungle-map-marker>b{top:-16px;left:50%;transform:translateX(-50%)}
.jungle-map-crossing-marker>b{top:-14px;right:auto;left:50%;transform:translateX(-50%)}
.jungle-map-route-dashboard .is-crossing>div{grid-template-columns:1fr}
.jungle-map-route-dashboard .is-crossing button{display:grid;grid-template-columns:minmax(92px,.62fr) minmax(0,1.38fr);min-height:44px;gap:10px;align-items:center}
.jungle-map-route-dashboard .is-crossing button strong{font-size:12px}.jungle-map-route-dashboard .is-crossing button small{margin:0;font-size:10px;line-height:1.4;overflow-wrap:anywhere}
@media(max-width:720px){.jungle-page .jungle-route-controls,.jungle-page .jungle-route-controls fieldset{grid-template-columns:1fr}}
@media(max-width:540px){.jungle-map-route-dashboard .is-crossing button{grid-template-columns:1fr;gap:2px}.jungle-route-map .jungle-map-marker>b{top:-14px}}

/* Jungle route atlas v16: exact route anchors and clearer controls. */
.jungle-route-map .jungle-map-marker{
  width:52px;
  height:52px;
  border-width:2px;
  box-shadow:0 0 0 4px rgba(4,15,20,.82),0 0 18px rgba(55,226,217,.42)
}
.jungle-route-map .jungle-map-marker>.jungle-camp-icon{width:41px;height:41px;flex-basis:41px}
.jungle-route-map .jungle-map-marker>b{
  top:0;
  left:50%;
  width:30px;
  height:30px;
  transform:translate(-50%,-54%);
  border-width:2px;
  font-size:14px;
  box-shadow:0 3px 10px rgba(0,0,0,.7)
}
.jungle-route-map .jungle-map-marker>em{top:calc(100% + 5px);font-size:10px}
.jungle-map-route-dashboard>section{background:linear-gradient(180deg,#0d1a22,#09141a)}
.jungle-map-route-dashboard>section>header span{font-size:11px;letter-spacing:0}
.jungle-map-route-dashboard .jungle-all-route-key button,
.jungle-map-line-mode button,
.jungle-map-route-dashboard .is-territory button,
.jungle-map-route-dashboard .is-crossing button{transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}
.jungle-map-route-dashboard button[aria-pressed="true"] strong{color:#fff}
.jungle-map-route-dashboard button[aria-pressed="true"] small{color:#c3d9df}
.jungle-route-map .jungle-route-line,
.jungle-route-map .jungle-opposing-route-line{stroke-linecap:round;stroke-linejoin:round}
@media(max-width:540px){
  .jungle-route-map .jungle-map-marker{width:46px;height:46px}
  .jungle-route-map .jungle-map-marker>.jungle-camp-icon{width:36px;height:36px;flex-basis:36px}
  .jungle-route-map .jungle-map-marker>b{top:0;width:27px;height:27px;font-size:13px}
}

/* Jungle route atlas v17: calibrated camp anchors and a visible safety gate. */
.jungle-route-health{display:grid;grid-template-columns:minmax(230px,.72fr) minmax(0,1.4fr);gap:14px;margin-top:12px;padding:16px;border:1px solid #714f34;border-left:4px solid #ff886f;border-radius:7px;background:linear-gradient(135deg,#251510,#10191e 62%);color:#d9e4e7}
.jungle-route-health>div{display:flex;min-width:0;align-items:center;gap:12px}.jungle-route-health>div>i{display:grid;width:46px;height:46px;flex:0 0 46px;place-items:center;border:1px solid #a35d4c;border-radius:50%;color:#ff9b83;background:#321a16;font-size:22px}.jungle-route-health>div span,.jungle-route-health>div small,.jungle-route-health>div strong{display:block;min-width:0}.jungle-route-health>div small{color:#ff9b83;font-size:10px;font-weight:950;text-transform:uppercase}.jungle-route-health>div strong{margin-top:3px;color:#fff;font-size:17px;line-height:1.25}.jungle-route-health ul{display:grid;gap:7px;padding:0;margin:0;list-style:none}.jungle-route-health li{padding:8px 10px;border-left:3px solid #4d6b73;background:#0d181e;color:#aebfc5;font-size:12px;line-height:1.45}.jungle-route-health li strong{color:#f2f7f8}.jungle-route-health>p{grid-column:1/-1;margin:0;padding-top:10px;border-top:1px solid rgba(255,255,255,.1);color:#95a9b1;font-size:11px;line-height:1.5}
@media(max-width:760px){.jungle-route-health{grid-template-columns:1fr}.jungle-route-health>p{grid-column:auto}}

/* Recall guide v2: health layers and Heartsteel explainer. */
.recall-health-system,.recall-heartsteel{margin-bottom:58px;overflow:hidden;border:1px solid #344858;border-radius:8px;background:#0a121b}
.recall-health-system>header{display:flex;align-items:end;justify-content:space-between;gap:32px;padding:30px 32px;border-bottom:1px solid #2a3d4c;background:linear-gradient(110deg,rgba(255,100,127,.1),rgba(85,184,255,.06),transparent 70%)}
.recall-health-system h2{margin:5px 0 0;font-size:clamp(2rem,3.5vw,3.45rem);line-height:1.04}.recall-health-system>header>p{max-width:570px;margin:0;color:#a7bac8;line-height:1.62}
.recall-health-meter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-height:105px;margin:25px 28px 0;overflow:hidden;border:1px solid #445363;border-radius:7px;background:#111b25}.recall-health-meter>span{--meter:#ff718a;display:grid;align-content:center;min-width:0;padding:20px;border-right:1px solid rgba(255,255,255,.14);background:#111b25}.recall-health-meter>span:last-child{border-right:0}.recall-health-meter b,.recall-health-meter small{display:block;overflow-wrap:anywhere}.recall-health-meter b{color:#fff;font-size:.92rem}.recall-health-meter small{margin-top:7px;color:#9eafbd;font-size:.7rem;line-height:1.35}.recall-health-meter i{display:block;width:100%;height:9px;margin-top:9px;overflow:hidden;border-radius:99px;background:#263541}.recall-health-meter i:before{display:block;width:var(--amount);height:100%;border-radius:inherit;background:var(--meter);box-shadow:0 0 13px color-mix(in srgb,var(--meter) 50%,transparent);content:""}.recall-health-meter .is-max{--meter:#a8485c}.recall-health-meter .is-current{--meter:#f04f6b}.recall-health-meter .is-shield{--meter:#57b8f0}
.recall-health-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:20px 28px 0;border:1px solid #2b3f4e;border-radius:7px;overflow:hidden}.recall-health-cards article{--tone:#ff718a;display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;min-width:0;padding:21px;border-right:1px solid #2b3f4e;border-bottom:1px solid #2b3f4e;background:linear-gradient(145deg,color-mix(in srgb,var(--tone) 8%,#0c151e),#0c151e 62%)}.recall-health-cards article:nth-child(4n){border-right:0}.recall-health-cards article:nth-last-child(-n+4){border-bottom:0}.recall-health-cards .is-max{--tone:#ff8095}.recall-health-cards .is-bonus{--tone:#f2b45d}.recall-health-cards .is-regen{--tone:#68dfa7}.recall-health-cards .is-heal{--tone:#54d6b3}.recall-health-cards .is-shield{--tone:#63b8f3}.recall-health-cards .is-resist{--tone:#bf9bff}.recall-health-cards .is-cost{--tone:#e58bff}.recall-health-cards article>i{display:grid;place-items:center;width:48px;height:48px;border:1px solid color-mix(in srgb,var(--tone) 60%,#263846);border-radius:50%;color:var(--tone);background:color-mix(in srgb,var(--tone) 9%,#0b131c);font-size:1.15rem}.recall-health-cards article>span{min-width:0}.recall-health-cards small{color:var(--tone);font-size:.64rem;font-weight:900;text-transform:uppercase}.recall-health-cards h3{margin:4px 0 8px;font-size:1.05rem;overflow-wrap:anywhere}.recall-health-cards p{margin:0;color:#a9bac7;font-size:.78rem;line-height:1.52}
.recall-health-rule{display:grid;grid-template-columns:52px minmax(0,1fr);gap:17px;align-items:center;margin:20px 28px 28px;padding:19px 21px;border:1px solid rgba(255,100,127,.34);border-left:5px solid var(--rc-health);border-radius:7px;background:#191019}.recall-health-rule>i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:#ff8298;background:#32131e;font-size:1.35rem}.recall-health-rule span{min-width:0}.recall-health-rule strong{color:#fff0f3;font-size:1.05rem}.recall-health-rule p{margin:5px 0 0;color:#c2adb4;line-height:1.5}
.recall-heartsteel{border-color:#755837;background:#12100d}.recall-heartsteel-head{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:23px;align-items:center;padding:30px 32px;border-bottom:1px solid rgba(231,178,91,.25);background:linear-gradient(110deg,rgba(143,83,38,.22),rgba(223,174,87,.08),#101116)}.recall-heartsteel-head>img{display:block;width:96px;height:96px;border:2px solid #e0ad58;border-radius:7px;object-fit:cover;box-shadow:0 0 28px rgba(224,173,88,.18)}.recall-heartsteel-head>div{min-width:0}.recall-heartsteel-head h2{margin:5px 0 9px;font-size:clamp(2rem,3.6vw,3.55rem);line-height:1.03;overflow-wrap:anywhere}.recall-heartsteel-head p:last-child{max-width:820px;margin:0;color:#c3b8a7;line-height:1.6}.recall-heartsteel-head>span{display:grid;min-width:170px;padding:15px 17px;border:1px solid rgba(231,178,91,.35);border-left:4px solid #e7b25b;background:#1d1811}.recall-heartsteel-head>span b{color:#ffe1a7}.recall-heartsteel-head>span small{margin-top:4px;color:#a99b84}
.recall-heartsteel-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid rgba(231,178,91,.2)}.recall-heartsteel-flow article{position:relative;display:grid;grid-template-columns:50px minmax(0,1fr);gap:15px;min-width:0;padding:27px;border-right:1px solid rgba(231,178,91,.18);background:#12130f}.recall-heartsteel-flow article:last-child{border-right:0}.recall-heartsteel-flow article>b{position:absolute;right:18px;top:18px}.recall-heartsteel-flow article>i{display:grid;place-items:center;width:50px;height:50px;border:1px solid #dca856;border-radius:50%;color:#f2c36e;background:#281e11;font-size:1.15rem}.recall-heartsteel-flow article>span{min-width:0}.recall-heartsteel-flow small{color:#e3b55e;font-size:.64rem;font-weight:900;text-transform:uppercase}.recall-heartsteel-flow h3{margin:5px 0 8px;font-size:1.17rem;overflow-wrap:anywhere}.recall-heartsteel-flow p{margin:0;color:#b7ad9c;line-height:1.54}
.recall-heartsteel-truths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:22px}.recall-heartsteel-truths article{--tone:#e3b35e;min-width:0;padding:22px;border:1px solid #4b4437;border-top:4px solid var(--tone);border-radius:7px;background:#151510}.recall-heartsteel-truths article.is-do{--tone:#67dca2}.recall-heartsteel-truths article.is-not{--tone:#ff758e}.recall-heartsteel-truths article.is-recall{--tone:#67bff2}.recall-heartsteel-truths header{display:grid;grid-template-columns:44px minmax(0,1fr);gap:13px;align-items:center}.recall-heartsteel-truths header>i{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--tone);border-radius:50%;color:var(--tone);background:color-mix(in srgb,var(--tone) 8%,#111)}.recall-heartsteel-truths small{color:var(--tone);font-size:.62rem;font-weight:900;text-transform:uppercase}.recall-heartsteel-truths h3{margin:4px 0 0;font-size:1.12rem;overflow-wrap:anywhere}.recall-heartsteel-truths ul{display:grid;gap:9px;margin:17px 0 0;padding:0;list-style:none}.recall-heartsteel-truths li{position:relative;padding-left:20px;color:#c2b8a8;font-size:.79rem;line-height:1.48}.recall-heartsteel-truths li:before{position:absolute;left:2px;top:.55em;width:7px;height:7px;border:2px solid var(--tone);border-radius:50%;content:""}.recall-heartsteel-truths article>p{margin:17px 0 0;color:#c2b8a8;line-height:1.55}
.recall-heartsteel>aside{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:17px;align-items:center;margin:0 22px 22px;padding:19px 21px;border:1px solid rgba(231,178,91,.35);border-left:5px solid #e7b25b;border-radius:7px;background:#201a11}.recall-heartsteel>aside>i{display:grid;place-items:center;width:54px;height:54px;border:1px solid #e7b25b;border-radius:50%;color:#f3ca7a;font-size:1.35rem}.recall-heartsteel>aside span{min-width:0}.recall-heartsteel>aside strong{color:#ffe3ae}.recall-heartsteel>aside p{margin:5px 0 0;color:#c1b39b;line-height:1.5}.recall-heartsteel>aside a{padding:11px 15px;border:1px solid #d9a956;border-radius:999px;color:#ffe6b8;background:#2b2113;text-decoration:none;font-weight:850;white-space:nowrap}
@media(max-width:1120px){.recall-health-cards{grid-template-columns:1fr 1fr}.recall-health-cards article:nth-child(4n){border-right:1px solid #2b3f4e}.recall-health-cards article:nth-child(2n){border-right:0}.recall-health-cards article:nth-last-child(-n+4){border-bottom:1px solid #2b3f4e}.recall-health-cards article:nth-last-child(-n+2){border-bottom:0}.recall-heartsteel-head{grid-template-columns:96px minmax(0,1fr)}.recall-heartsteel-head>span{grid-column:1/-1}.recall-heartsteel-truths{grid-template-columns:1fr}}
@media(max-width:760px){.recall-health-system>header{display:block;padding:24px 20px}.recall-health-system>header>p{margin-top:10px}.recall-health-meter{grid-template-columns:1fr;margin:18px 16px 0}.recall-health-meter>span{border-right:0;border-bottom:1px solid rgba(255,255,255,.18)}.recall-health-meter>span:last-child{border-bottom:0}.recall-health-cards{grid-template-columns:1fr;margin:14px 16px 0}.recall-health-cards article,.recall-health-cards article:nth-child(2n),.recall-health-cards article:nth-child(4n){border-right:0;border-bottom:1px solid #2b3f4e}.recall-health-cards article:nth-last-child(-n+2){border-bottom:1px solid #2b3f4e}.recall-health-cards article:last-child{border-bottom:0}.recall-health-rule{grid-template-columns:46px minmax(0,1fr);margin:14px 16px 18px;padding:17px}.recall-health-rule>i{width:46px;height:46px}.recall-heartsteel-head{grid-template-columns:72px minmax(0,1fr);gap:16px;padding:22px 18px}.recall-heartsteel-head>img{width:72px;height:72px}.recall-heartsteel-head h2{font-size:clamp(1.75rem,9vw,2.45rem)}.recall-heartsteel-head>span{min-width:0}.recall-heartsteel-flow{grid-template-columns:1fr}.recall-heartsteel-flow article{border-right:0;border-bottom:1px solid rgba(231,178,91,.18);padding:22px 18px}.recall-heartsteel-flow article:last-child{border-bottom:0}.recall-heartsteel-truths{padding:14px}.recall-heartsteel>aside{grid-template-columns:48px minmax(0,1fr);margin:0 14px 14px;padding:17px}.recall-heartsteel>aside>i{width:48px;height:48px}.recall-heartsteel>aside a{grid-column:1/-1;text-align:center;white-space:normal}}

/* Recall guide v3: practical health-item families. */
.recall-health-items{margin-bottom:58px;overflow:hidden;border:1px solid #345366;border-radius:8px;background:#09141c}.recall-health-items>header{display:flex;align-items:end;justify-content:space-between;gap:32px;padding:30px 32px;border-bottom:1px solid #2d4858;background:linear-gradient(110deg,rgba(83,213,179,.1),rgba(87,184,240,.07),transparent 72%)}.recall-health-items h2{max-width:880px;margin:5px 0 0;font-size:clamp(2rem,3.4vw,3.35rem);line-height:1.04}.recall-health-items>header>p{max-width:540px;margin:0;color:#a6bac7;line-height:1.62}.recall-health-item-answer{display:grid;grid-template-columns:58px minmax(0,1fr);gap:18px;align-items:center;margin:24px 26px 0;padding:20px 22px;border:1px solid rgba(255,106,132,.4);border-left:5px solid #ff6a84;border-radius:7px;background:#211019}.recall-health-item-answer>i{display:grid;place-items:center;width:58px;height:58px;border:1px solid #ff718b;border-radius:50%;color:#ff8fa3;background:#36131e;font-size:1.5rem}.recall-health-item-answer span{min-width:0}.recall-health-item-answer small,.recall-health-item-answer strong{display:block}.recall-health-item-answer small{color:#ff8298;font-size:.64rem;font-weight:900;text-transform:uppercase}.recall-health-item-answer strong{margin-top:4px;color:#fff1f4;font-size:1.15rem}.recall-health-item-answer p{margin:6px 0 0;color:#c8b2b8;line-height:1.52}
.recall-health-item-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:20px 26px;background:#29404d;border:1px solid #29404d;border-radius:7px;overflow:hidden}.recall-health-item-grid article{--tone:#69dfb1;display:grid;grid-template-columns:64px minmax(0,1fr);gap:15px;min-width:0;min-height:220px;padding:21px;background:linear-gradient(145deg,color-mix(in srgb,var(--tone) 8%,#0b151d),#0b151d 60%)}.recall-health-item-grid article.is-steal{--tone:#ff718c}.recall-health-item-grid article.is-heal{--tone:#69dfb1}.recall-health-item-grid article.is-regen{--tone:#7fe29d}.recall-health-item-grid article.is-amplify{--tone:#8ec5ff}.recall-health-item-grid article.is-shield{--tone:#b69cff}.recall-health-item-grid article.is-resist{--tone:#e5bd68}.recall-health-item-grid img{display:block;width:64px;height:64px;border:2px solid var(--tone);border-radius:6px;object-fit:cover;box-shadow:0 0 18px color-mix(in srgb,var(--tone) 20%,transparent)}.recall-health-item-grid span{min-width:0}.recall-health-item-grid small{color:var(--tone);font-size:.61rem;font-weight:900;text-transform:uppercase}.recall-health-item-grid h3{margin:5px 0 8px;font-size:1.08rem;overflow-wrap:anywhere}.recall-health-item-grid p{margin:0;color:#a9bbc7;font-size:.77rem;line-height:1.5}.recall-health-item-grid strong{display:block;margin-top:13px;padding-top:11px;border-top:1px solid color-mix(in srgb,var(--tone) 25%,#2a3d49);color:#d9e7ec;font-size:.73rem;line-height:1.45}.recall-health-items>aside{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:17px;align-items:center;margin:0 26px 26px;padding:19px 21px;border:1px solid rgba(95,219,194,.32);border-left:5px solid #5fdbc2;border-radius:7px;background:#0b211f}.recall-health-items>aside>i{display:grid;place-items:center;width:52px;height:52px;border:1px solid #5fdbc2;border-radius:50%;color:#89f0db;font-size:1.3rem}.recall-health-items>aside span{min-width:0}.recall-health-items>aside strong{color:#e5fff9}.recall-health-items>aside p{margin:5px 0 0;color:#a9c4be;line-height:1.5}.recall-health-items>aside a{padding:11px 15px;border:1px solid #57ad9e;border-radius:999px;color:#dffff8;background:#12332f;text-decoration:none;font-weight:850;white-space:nowrap}
@media(max-width:1120px){.recall-health-item-grid{grid-template-columns:1fr 1fr}.recall-health-item-grid article{min-height:190px}}
@media(max-width:760px){.recall-health-items>header{display:block;padding:24px 20px}.recall-health-items>header>p{margin-top:11px}.recall-health-item-answer{grid-template-columns:48px minmax(0,1fr);margin:16px 14px 0;padding:17px}.recall-health-item-answer>i{width:48px;height:48px}.recall-health-item-grid{grid-template-columns:1fr;margin:14px}.recall-health-item-grid article{min-height:0;padding:18px}.recall-health-items>aside{grid-template-columns:46px minmax(0,1fr);margin:0 14px 14px;padding:17px}.recall-health-items>aside>i{width:46px;height:46px}.recall-health-items>aside a{grid-column:1/-1;text-align:center;white-space:normal}}
html[dir="rtl"] body{direction:rtl}
html[dir="rtl"] input,html[dir="rtl"] textarea,html[dir="rtl"] code,html[dir="rtl"] .riot-id,html[dir="rtl"] [data-i18n-skip]{direction:ltr;unicode-bidi:isolate;text-align:start}
html[dir="rtl"] .league-nav-panel,html[dir="rtl"] .league-language-menu,html[dir="rtl"] main,html[dir="rtl"] footer{text-align:right}
@media(min-width:761px){
  html[dir="rtl"] body .topbar .league-language>div{
    position:fixed;
    right:auto!important;
    left:max(10px,env(safe-area-inset-left))!important;
    max-width:calc(100vw - 20px);
  }
  html[dir="rtl"] body .topbar .league-nav-more>div{right:auto;left:0}
}

.league-not-found-page{min-height:100vh;background:#05090d;color:#eef8fb}
.league-not-found-main{width:min(1180px,calc(100% - 28px));margin:26px auto 70px}
.league-not-found-hero{position:relative;display:grid;min-height:460px;align-items:end;overflow:hidden;border:1px solid #294653;border-radius:8px;background:linear-gradient(90deg,rgba(3,9,14,.97),rgba(3,9,14,.76) 55%,rgba(3,9,14,.2)),url('/league/assets/vex-social-20260718.jpg') center/cover}
.league-not-found-copy{display:grid;max-width:720px;gap:13px;padding:clamp(28px,6vw,70px)}
.league-not-found-code{color:#58ecf2;font-size:clamp(72px,14vw,150px);font-weight:950;line-height:.75;text-shadow:0 0 34px rgba(63,220,231,.32)}
.league-not-found-copy h1{margin:10px 0 0;font-size:clamp(30px,5vw,56px);line-height:1.02}
.league-not-found-copy p{max-width:660px;margin:0;color:#b8cbd4;font-size:clamp(16px,2vw,20px);line-height:1.6}
.league-not-found-copy code{justify-self:start;max-width:100%;overflow-wrap:anywhere;padding:8px 11px;border:1px solid #31515d;border-radius:4px;background:#07131a;color:#8edee5}
.league-not-found-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.league-not-found-paths{padding:34px 0}
.league-not-found-paths header{margin-bottom:18px}.league-not-found-paths h2{margin:5px 0;font-size:clamp(24px,4vw,38px)}
.league-not-found-paths>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.league-not-found-paths>div>a{display:grid;grid-template-columns:48px minmax(0,1fr);gap:13px;align-items:start;padding:18px;border:1px solid #273d49;border-radius:6px;background:#0d161e;color:inherit;text-decoration:none}
.league-not-found-paths>div>a:hover{border-color:#4fdce5;background:#10202a}
.league-not-found-paths>div>a>b{display:grid;width:42px;height:42px;place-items:center;border-radius:4px;background:#153b43;color:#6ff4f5;font-size:20px}
.league-not-found-paths span,.league-not-found-paths strong,.league-not-found-paths small{display:block;min-width:0}.league-not-found-paths strong{font-size:17px}.league-not-found-paths small{margin-top:5px;color:#91a9b5;line-height:1.5}
@media(max-width:760px){.league-not-found-main{width:min(100% - 18px,1180px);margin-top:12px}.league-not-found-hero{min-height:520px;background-position:62% center}.league-not-found-copy{padding:24px 18px;background:linear-gradient(0deg,rgba(3,9,14,.98),rgba(3,9,14,.52))}.league-not-found-paths>div{grid-template-columns:1fr}.league-not-found-actions .league-pill-action{flex:1 1 145px;justify-content:center}}

/* Team play and emote guides */
.social-guide-page{--social-cyan:#56e4eb;--social-gold:#f3c65a;--social-violet:#b395ff;--social-rose:#ff789b;background:#050b11;color:#edf7fa}
.social-guide-page main{width:min(1380px,calc(100% - 32px));margin:0 auto 70px}
.social-guide-page :is(h1,h2,h3,p,strong,small,span,li,a){min-width:0;overflow-wrap:break-word}
.social-guide-hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(310px,.55fr);overflow:hidden;margin-bottom:18px;border:1px solid #31515f;border-radius:8px;background:linear-gradient(105deg,rgba(7,22,31,.97),rgba(11,23,36,.88)),url('/league/assets/vex-social-20260718.jpg') center/cover}
.social-guide-hero>div{padding:clamp(32px,5vw,72px)}.social-guide-hero h1{max-width:900px;margin:8px 0 18px;font-size:clamp(2.65rem,5.7vw,5.8rem);line-height:1.01;text-wrap:balance}.social-guide-hero>div>p:not(.eyebrow){max-width:790px;margin:0;color:#b8cbd4;font-size:clamp(1rem,1.6vw,1.22rem);line-height:1.65}
.social-guide-hero>aside{display:grid;align-content:center;gap:12px;padding:clamp(26px,4vw,48px);border-left:1px solid #3b5361;background:rgba(8,15,24,.88)}.social-guide-hero>aside>i{display:grid;width:68px;height:68px;place-items:center;border-radius:8px;color:#061013;background:var(--social-cyan);font-size:2rem}.social-guide-hero>aside strong{font-size:1.45rem}.social-guide-hero>aside p{margin:0;color:#a9bdc8;line-height:1.6}
.social-guide-hero.is-emotes{border-color:#604a78;background:linear-gradient(105deg,rgba(15,9,28,.97),rgba(9,20,31,.88)),url('/league/assets/vex-social-20260718.jpg') center/cover}.social-guide-hero.is-emotes>aside{border-color:#604a78}.social-guide-hero.is-emotes>aside>i{background:var(--social-violet)}
.social-guide-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}.social-guide-actions a,.social-inline-action{display:inline-flex;gap:9px;align-items:center;justify-content:center;min-height:46px;padding:0 17px;border:1px solid var(--social-cyan);border-radius:999px;color:#061013;background:var(--social-cyan);font-weight:900;text-decoration:none}.social-guide-actions a.is-secondary{color:#d9edf2;background:#10212b}.social-guide-actions a:hover,.social-inline-action:hover{filter:brightness(1.1)}
.social-guide-jump{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:22px;padding:13px;border:1px solid #2b424f;border-radius:7px;background:#0a141c}.social-guide-jump strong{padding:8px 11px;color:#89a2b0;font-size:.75rem;text-transform:uppercase}.social-guide-jump a{display:inline-flex;align-items:center;min-height:38px;padding:0 13px;border:1px solid #385362;border-radius:999px;color:#d9e8ee;background:#10202a;font-size:.8rem;font-weight:900;text-decoration:none}.social-guide-jump a:hover{border-color:var(--social-cyan);color:#fff}
.social-guide-section,.social-guide-sources{margin:0 0 22px;padding:clamp(26px,4vw,54px);border:1px solid #2d4653;border-top:5px solid var(--social-cyan);border-radius:8px;background:#08131b}.social-guide-section.is-cyan{--tone:var(--social-cyan)}.social-guide-section.is-gold{--tone:var(--social-gold);border-top-color:var(--social-gold)}.social-guide-section.is-violet{--tone:var(--social-violet);border-top-color:var(--social-violet)}.social-guide-section>header,.social-guide-sources>header{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.75fr);gap:24px;align-items:end;margin-bottom:25px;padding-bottom:23px;border-bottom:1px solid #29404c}.social-guide-section>header h2,.social-guide-sources h2{margin:5px 0 0;font-size:clamp(2rem,4vw,3.65rem);line-height:1.05;text-wrap:balance}.social-guide-section>header>p:last-child{margin:0;color:#a8bcc7;line-height:1.62}
.social-step-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.social-step-grid article,.emote-control-grid article{position:relative;display:grid;align-content:start;min-width:0;padding:22px 18px;border:1px solid #324c5a;border-radius:7px;background:#0d1a24}.social-step-grid article>b,.emote-control-grid article>b{position:absolute;top:13px;right:13px}.social-step-grid article>i{display:grid;width:48px;height:48px;place-items:center;margin-bottom:24px;border-radius:7px;color:#061115;background:var(--social-cyan);font-size:1.3rem}.social-step-grid h3,.emote-control-grid h3{margin:0 0 9px;font-size:1.1rem}.social-step-grid p,.emote-control-grid p{margin:0;color:#9eb3bf;line-height:1.55}
.social-guide-links,.social-guide-sources>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}.social-guide-links>a,.social-guide-sources a{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center;padding:17px;border:1px solid #365462;border-radius:7px;color:inherit;background:#0e1d27;text-decoration:none}.social-guide-links>a>i,.social-guide-sources a>i{display:grid;width:48px;height:48px;place-items:center;border-radius:6px;color:#071115;background:var(--social-cyan);font-size:1.25rem}.social-guide-links span,.social-guide-links strong,.social-guide-links small,.social-guide-sources span,.social-guide-sources strong,.social-guide-sources small{display:block}.social-guide-links small,.social-guide-sources small{margin-top:4px;color:#95aebb;line-height:1.45}
.social-compare-grid,.social-boundary-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.social-compare-grid article,.social-boundary-grid article{padding:25px;border:1px solid #2f5d50;border-top:5px solid #61dda3;border-radius:7px;background:#0b1b18}.social-compare-grid article.is-warn,.social-boundary-grid article.is-no{border-color:#6b3c4a;border-top-color:var(--social-rose);background:#201017}.social-compare-grid article>i{font-size:1.7rem;color:#61dda3}.social-compare-grid article.is-warn>i{color:var(--social-rose)}.social-compare-grid h3{margin:10px 0 14px}.social-compare-grid ul{display:grid;gap:10px;margin:0;padding-left:20px;color:#b8c9c2;line-height:1.5}.social-compare-grid .is-warn ul{color:#d2b4bd}.social-boundary-grid strong{font-size:1.25rem}.social-boundary-grid p{margin:9px 0 0;color:#b5c9c0;line-height:1.6}.social-boundary-grid .is-no p{color:#d1b6be}
.social-inline-action{margin-top:18px}.social-decision-list{display:grid;gap:9px;margin:0;padding:0;list-style:none}.social-decision-list li{display:grid;grid-template-columns:54px minmax(0,1fr);gap:15px;align-items:start;padding:18px;border:1px solid #3a4c57;border-radius:7px;background:#0d1821}.social-decision-list strong{font-size:1.08rem}.social-decision-list p{margin:5px 0 0;color:#a8bac5;line-height:1.55}.social-wide-note,.social-fact-note{margin:14px 0 0;padding:17px 19px;border:1px solid #5f5131;border-left:5px solid var(--social-gold);border-radius:6px;color:#cdbf98;background:#1b180e;line-height:1.58}.social-fact-note{display:flex;gap:13px;align-items:flex-start;border-color:#3d5d6c;border-left-color:var(--social-cyan);color:#b7cbd4;background:#0b1d26}.social-fact-note p{margin:0}.social-fact-note i{color:var(--social-cyan);font-size:1.25rem}
.emote-control-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.emote-control-grid article{min-height:235px;border-top:4px solid var(--social-violet)}.emote-control-grid article>i{color:var(--social-violet);font-size:1.55rem}.emote-control-grid kbd{justify-self:start;margin:17px 0 18px;padding:7px 10px;border:1px solid #69558d;border-bottom-width:3px;border-radius:5px;color:#eee8ff;background:#1c142a;font:900 .82rem/1 system-ui}.social-guide-sources{border-top-color:var(--social-violet)}.social-guide-sources>div{grid-template-columns:repeat(3,minmax(0,1fr))}.social-guide-sources a>i{background:var(--social-violet)}
@media(max-width:1100px){.social-guide-hero{grid-template-columns:1fr}.social-guide-hero>aside{border-top:1px solid #3b5361;border-left:0}.social-step-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.emote-control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.social-guide-sources>div{grid-template-columns:1fr}}
@media(max-width:760px){.social-guide-page main{width:min(100% - 18px,1380px)}.social-guide-hero>div,.social-guide-hero>aside{padding:25px 18px}.social-guide-hero h1{font-size:clamp(2.35rem,12vw,3.5rem)}.social-guide-section,.social-guide-sources{padding:24px 17px}.social-guide-section>header,.social-guide-sources>header{grid-template-columns:1fr;gap:9px}.social-step-grid,.social-compare-grid,.social-boundary-grid,.social-guide-links,.emote-control-grid{grid-template-columns:1fr}.social-guide-jump{overflow:visible}.social-guide-jump a{flex:1 1 130px;justify-content:center}.emote-control-grid article{min-height:0}}

/* Team play and emote guides v2: compact controls and clearer answer panels. */
.social-guide-actions a,.social-inline-action,.social-guide-jump a{
  position:relative;
  border-radius:5px;
  letter-spacing:0;
  text-transform:none;
  box-shadow:inset 0 -3px 0 rgba(3,10,15,.24);
}
.social-guide-actions a{min-height:50px;padding:0 19px}
.social-guide-actions a i{font-size:1.05rem}
.social-guide-actions a.is-secondary{border-color:#496875;box-shadow:inset 0 -3px 0 #304955}
.social-guide-jump{
  position:sticky;
  top:8px;
  z-index:12;
  gap:6px;
  padding:10px;
  border-radius:6px;
  background:rgba(7,17,24,.96);
  backdrop-filter:blur(14px);
}
.social-guide-jump strong{padding:8px 10px}
.social-guide-jump a{min-height:40px;border-radius:5px;font-size:.78rem;text-transform:uppercase;box-shadow:inset 0 -3px 0 #203943}
.social-guide-jump a:hover,.social-guide-jump a:focus-visible{border-color:var(--social-cyan);background:#15313a;box-shadow:inset 0 -3px 0 var(--social-cyan)}
.team-play-dashboard{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin:0 0 22px;
}
.team-play-dashboard article{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:13px;
  align-items:center;
  min-width:0;
  padding:15px;
  border:1px solid #34505d;
  border-bottom:4px solid var(--social-cyan);
  border-radius:6px;
  background:#0b1821;
}
.team-play-dashboard i{display:grid;width:46px;height:46px;place-items:center;border-radius:5px;color:#061115;background:var(--social-cyan);font-size:1.15rem}
.team-play-dashboard span,.team-play-dashboard small,.team-play-dashboard strong{display:block;min-width:0}
.team-play-dashboard small{margin-bottom:4px;color:#87a3b0;font-size:.68rem;font-weight:900;text-transform:uppercase}
.team-play-dashboard strong{font-size:.96rem;line-height:1.25}
.team-play-dashboard article:nth-child(2){border-bottom-color:var(--social-gold)}.team-play-dashboard article:nth-child(2) i{background:var(--social-gold)}
.team-play-dashboard article:nth-child(3){border-bottom-color:var(--social-violet)}.team-play-dashboard article:nth-child(3) i{background:var(--social-violet)}
.team-play-dashboard article:nth-child(4){border-bottom-color:var(--social-rose)}.team-play-dashboard article:nth-child(4) i{background:var(--social-rose)}
.emote-clear-answer{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) auto;
  gap:20px;
  align-items:center;
  margin:0 0 22px;
  padding:22px;
  border:1px solid #39725f;
  border-left:6px solid #64e3a7;
  border-radius:7px;
  background:linear-gradient(100deg,#0a201a,#0b171f);
}
.emote-clear-answer>i{display:grid;width:60px;height:60px;place-items:center;border-radius:6px;color:#062015;background:#64e3a7;font-size:1.75rem}
.emote-clear-answer h2{margin:3px 0 7px;font-size:clamp(1.45rem,2.5vw,2.35rem);line-height:1.08}
.emote-clear-answer p:not(.eyebrow){max-width:820px;margin:0;color:#b8cec5;line-height:1.55}
.emote-clear-answer>strong{max-width:220px;padding:11px 13px;border:1px solid #43826c;border-radius:5px;color:#9ff1c9;background:#102c24;font-size:.72rem;text-align:center;text-transform:uppercase}
.emote-self-check{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.emote-self-check article{position:relative;min-width:0;padding:22px 18px;border:1px solid #455363;border-top:4px solid var(--social-gold);border-radius:6px;background:#111820}
.emote-self-check article>b{position:absolute;top:12px;right:12px}
.emote-self-check strong{display:block;padding-right:42px;font-size:1.05rem}
.emote-self-check p{margin:9px 0 0;color:#aebdc5;line-height:1.55}
@media(max-width:1050px){.team-play-dashboard{grid-template-columns:repeat(2,minmax(0,1fr))}.emote-clear-answer{grid-template-columns:60px minmax(0,1fr)}.emote-clear-answer>strong{grid-column:2;justify-self:start;max-width:none}}
@media(max-width:760px){.social-guide-jump{position:relative;top:auto}.social-guide-jump strong{flex:1 0 100%}.social-guide-jump a{flex:1 1 calc(50% - 6px);min-height:44px}.team-play-dashboard,.emote-self-check{grid-template-columns:1fr}.emote-clear-answer{grid-template-columns:48px minmax(0,1fr);gap:14px;padding:18px 15px}.emote-clear-answer>i{width:46px;height:46px;font-size:1.3rem}.emote-clear-answer>strong{grid-column:1/-1;justify-self:stretch;max-width:none}.social-guide-actions a{flex:1 1 155px}}

/* Team play colour and action hierarchy. */
.team-play-page .social-guide-actions a{
  min-height:52px;
  border-color:#3c6975;
  color:#e8fbff;
  background:#10232c;
  box-shadow:inset 0 -4px 0 var(--social-cyan);
}
.team-play-page .social-guide-actions a i{display:grid;width:30px;height:30px;place-items:center;border-radius:4px;color:#061115;background:var(--social-cyan)}
.team-play-page .social-guide-actions a.is-secondary{border-color:#5d507b;color:#f0ebff;background:#1a1728;box-shadow:inset 0 -4px 0 var(--social-violet)}
.team-play-page .social-guide-actions a.is-secondary i{background:var(--social-violet)}
.team-play-page .social-guide-actions a:hover,.team-play-page .social-guide-actions a:focus-visible{border-color:#77edf2;background:#15313a;transform:translateY(-1px)}
.team-play-page .team-play-dashboard article{background:linear-gradient(145deg,#0c1d25,#0b151c)}
.team-play-page .team-play-dashboard article:nth-child(2){border-color:#66572d;background:linear-gradient(145deg,#211d10,#11181d)}
.team-play-page .team-play-dashboard article:nth-child(3){border-color:#554771;background:linear-gradient(145deg,#1d172b,#10161e)}
.team-play-page .team-play-dashboard article:nth-child(4){border-color:#6b3b49;background:linear-gradient(145deg,#241219,#11161c)}
.team-play-page .social-step-grid article{--step-tone:var(--social-cyan);border-color:#31545d;border-top:4px solid var(--step-tone);background:linear-gradient(160deg,color-mix(in srgb,var(--step-tone) 10%,#0c1820),#0b151c)}
.team-play-page .social-step-grid article:nth-child(2){--step-tone:#64dfa4}.team-play-page .social-step-grid article:nth-child(3){--step-tone:var(--social-violet)}.team-play-page .social-step-grid article:nth-child(4){--step-tone:var(--social-gold)}.team-play-page .social-step-grid article:nth-child(5){--step-tone:#ff8caa}
.team-play-page .social-step-grid article>i{background:var(--step-tone)}
.team-play-page .social-step-grid article>.league-step-number{border-color:color-mix(in srgb,var(--step-tone) 70%,#fff);color:#071116;background:var(--step-tone);box-shadow:none}
.team-play-page .social-guide-links>a{border-bottom:4px solid #64dfa4;background:linear-gradient(145deg,#0d201b,#0d1820)}
.team-play-page .social-guide-links>a:nth-child(2){border-color:#5d507b;border-bottom-color:var(--social-violet);background:linear-gradient(145deg,#1b1728,#0e1720)}
.team-play-page .social-guide-links>a>i{background:#64dfa4}.team-play-page .social-guide-links>a:nth-child(2)>i{background:var(--social-violet)}
.team-play-page .social-guide-links>a:hover,.team-play-page .social-guide-links>a:focus-visible{transform:translateY(-2px);filter:brightness(1.08)}
.team-play-page #during-match{border-color:#345964;border-top-color:var(--social-cyan);background:linear-gradient(145deg,#0a1d25,#08131b 45%)}
.team-play-page #disagreement{background:linear-gradient(145deg,#201c0e,#08131b 42%)}
.team-play-page #privacy-boundary{background:linear-gradient(145deg,#1a1528,#08131b 42%)}
@media(max-width:520px){.team-play-page .social-guide-actions a{justify-content:flex-start;width:100%}.team-play-page .team-play-dashboard article{grid-template-columns:44px minmax(0,1fr)}.team-play-page .team-play-dashboard i{width:42px;height:42px}}

/* Emote guide colour and quick-reference hierarchy. */
.emotes-page .social-guide-actions a{
  min-height:52px;
  border-color:#66528a;
  color:#f4efff;
  background:#1d172b;
  box-shadow:inset 0 -4px 0 var(--social-violet);
}
.emotes-page .social-guide-actions a i{display:grid;width:30px;height:30px;place-items:center;border-radius:4px;color:#0c0a12;background:var(--social-violet)}
.emotes-page .social-guide-actions a.is-secondary{border-color:#39705e;color:#e4fff2;background:#10271f;box-shadow:inset 0 -4px 0 #64dfa4}
.emotes-page .social-guide-actions a.is-secondary i{background:#64dfa4}
.emotes-page .social-guide-actions a.is-tertiary{border-color:#66572d;color:#fff5d7;background:#251f10;box-shadow:inset 0 -4px 0 var(--social-gold)}
.emotes-page .social-guide-actions a.is-tertiary i{background:var(--social-gold)}
.emotes-page .social-guide-actions a:hover,.emotes-page .social-guide-actions a:focus-visible{filter:brightness(1.12);transform:translateY(-1px)}
.emote-fact-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:0 0 22px}
.emote-fact-strip article{--fact-tone:var(--social-cyan);display:grid;grid-template-columns:46px minmax(0,1fr);gap:13px;align-items:start;min-width:0;padding:17px;border:1px solid color-mix(in srgb,var(--fact-tone) 38%,#263741);border-bottom:4px solid var(--fact-tone);border-radius:6px;background:linear-gradient(145deg,color-mix(in srgb,var(--fact-tone) 10%,#0b171f),#0a141b)}
.emote-fact-strip article:nth-child(2){--fact-tone:var(--social-violet)}.emote-fact-strip article:nth-child(3){--fact-tone:var(--social-gold)}.emote-fact-strip article:nth-child(4){--fact-tone:#ff8caa}
.emote-fact-strip i{display:grid;width:44px;height:44px;place-items:center;border-radius:5px;color:#071116;background:var(--fact-tone);font-size:1.12rem}
.emote-fact-strip span,.emote-fact-strip small,.emote-fact-strip strong{display:block;min-width:0}.emote-fact-strip small{margin-bottom:4px;color:var(--fact-tone);font-size:.68rem;font-weight:950;text-transform:uppercase}.emote-fact-strip strong{font-size:.96rem;line-height:1.25}.emote-fact-strip p{margin:7px 0 0;color:#9fb3bd;font-size:.84rem;line-height:1.45}
.emotes-page .emote-control-grid article{--control-tone:var(--social-violet);border-color:color-mix(in srgb,var(--control-tone) 42%,#2c3d48);border-top-color:var(--control-tone);background:linear-gradient(155deg,color-mix(in srgb,var(--control-tone) 10%,#0d1922),#0b151c)}
.emotes-page .emote-control-grid article:nth-child(2){--control-tone:#ff8caa}.emotes-page .emote-control-grid article:nth-child(3){--control-tone:var(--social-cyan)}.emotes-page .emote-control-grid article:nth-child(4){--control-tone:var(--social-gold)}.emotes-page .emote-control-grid article:nth-child(5){--control-tone:#64dfa4}.emotes-page .emote-control-grid article:nth-child(6){--control-tone:#ff9d69}.emotes-page .emote-control-grid article:nth-child(7){--control-tone:#83aaff}
.emotes-page .emote-control-grid article>i{color:var(--control-tone)}
.emotes-page .emote-control-grid article>.league-step-number{border-color:var(--control-tone);color:#071116;background:var(--control-tone);box-shadow:none}
.emotes-page .emote-control-grid kbd{border-color:color-mix(in srgb,var(--control-tone) 65%,#39444d);color:#fff;background:color-mix(in srgb,var(--control-tone) 16%,#111820)}
.emotes-page #what-they-do{background:linear-gradient(145deg,#0a1e25,#08131b 43%)}.emotes-page #friendly-boundary{background:linear-gradient(145deg,#211d10,#08131b 43%)}.emotes-page #mute{background:linear-gradient(145deg,#1a1529,#08131b 43%)}
@media(max-width:1050px){.emote-fact-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.emote-fact-strip{grid-template-columns:1fr}.emotes-page .social-guide-actions a{justify-content:flex-start;width:100%}.emote-fact-strip article{grid-template-columns:42px minmax(0,1fr)}.emote-fact-strip i{width:40px;height:40px}}

.emotes-page #controls>.emote-controls-heading{grid-template-columns:minmax(0,1.1fr) minmax(300px,.65fr);gap:28px;align-items:end;margin-bottom:22px;padding:20px 22px;border:1px solid #55466f;border-left:5px solid var(--social-violet);border-radius:6px;background:linear-gradient(110deg,#1b1628,#0c1820)}
.emote-controls-heading>div{min-width:0}.emote-controls-heading .eyebrow{display:flex;gap:8px;align-items:center;margin:0 0 8px;color:#c9b9ff}.emote-controls-heading .eyebrow i{font-size:1rem}.emotes-page #controls>.emote-controls-heading h2{margin:0;font-size:clamp(1.85rem,3.2vw,3rem);line-height:1.08}.emotes-page #controls>.emote-controls-heading>p{margin:0;padding:0 0 2px;color:#b4c4cc;line-height:1.6}
@media(max-width:820px){.emotes-page #controls>.emote-controls-heading{grid-template-columns:1fr;gap:12px;padding:18px 16px}}

.emotes-page .emote-control-grid article{grid-template-rows:auto auto 1fr;gap:0;padding-top:18px}
.emote-control-top{display:flex;gap:11px;align-items:center;min-width:0;margin:0 42px 18px 0}
.emotes-page .emote-control-top>i{display:grid;flex:0 0 46px;width:46px;height:46px;place-items:center;border:1px solid color-mix(in srgb,var(--control-tone) 65%,#34434b);border-radius:6px;color:var(--control-tone);background:transparent;font-size:1.25rem}
.emotes-page .emote-control-top>kbd{min-width:0;margin:0;padding:9px 12px;font-size:.88rem;white-space:nowrap}
.emotes-page .emote-control-grid h3{margin:0 0 9px;font-size:1.16rem}.emotes-page .emote-control-grid p{font-size:.92rem;line-height:1.58}
@media(max-width:430px){.emote-control-top{margin-right:38px}.emotes-page .emote-control-top>i{flex-basis:42px;width:42px;height:42px}}

/* Team play accent rebalance: reserve cyan for information, not every action. */
.team-play-page .social-guide-hero>aside>i{background:var(--social-gold)}
.team-play-page .social-guide-actions a{border-color:#3e765f;box-shadow:inset 0 -4px 0 #64dfa4}.team-play-page .social-guide-actions a i{background:#64dfa4}
.team-play-page .team-play-dashboard article:first-child{border-color:#39705e;border-bottom-color:#64dfa4;background:linear-gradient(145deg,#10251e,#0b151c)}.team-play-page .team-play-dashboard article:first-child i{background:#64dfa4}
.team-play-page .social-step-grid article:first-child{--step-tone:#ff9d69}.team-play-page .social-step-grid article:nth-child(2){--step-tone:#64dfa4}
.team-play-page .social-inline-action{display:inline-grid;grid-template-columns:34px minmax(0,1fr) 22px;gap:10px;min-height:52px;padding:7px 12px 7px 8px;border-color:#6b592d;border-radius:5px;color:#fff5d4;background:#241f10;box-shadow:inset 0 -4px 0 var(--social-gold);text-decoration:none}
.team-play-page .social-inline-action>i:first-child{display:grid;width:34px;height:34px;place-items:center;border-radius:4px;color:#171104;background:var(--social-gold)}.team-play-page .social-inline-action>span{font-weight:900}.team-play-page .social-inline-action>i:last-child{color:var(--social-gold)}
.team-play-page .social-inline-action:hover,.team-play-page .social-inline-action:focus-visible{border-color:#f1ca63;background:#302815;transform:translateY(-1px)}

/* Social guides use outlined accent icons instead of solid colour tiles. */
.team-play-page .social-guide-hero>aside>i{color:var(--social-gold);border:1px solid #8a7133;background:rgba(243,198,90,.08)}
.team-play-page .social-guide-actions a{--action-tone:#64dfa4}.team-play-page .social-guide-actions a.is-secondary{--action-tone:var(--social-violet)}
.team-play-page .social-guide-actions a i{color:var(--action-tone);border:1px solid color-mix(in srgb,var(--action-tone) 65%,#34434b);background:transparent}
.team-play-page .team-play-dashboard article{--phase-tone:#64dfa4}.team-play-page .team-play-dashboard article:nth-child(2){--phase-tone:var(--social-gold)}.team-play-page .team-play-dashboard article:nth-child(3){--phase-tone:var(--social-violet)}.team-play-page .team-play-dashboard article:nth-child(4){--phase-tone:var(--social-rose)}
.team-play-page .team-play-dashboard i{color:var(--phase-tone);border:1px solid color-mix(in srgb,var(--phase-tone) 62%,#34434b);background:transparent}
.team-play-page .social-step-grid article>i{color:var(--step-tone);border:1px solid color-mix(in srgb,var(--step-tone) 62%,#34434b);background:transparent}
.team-play-page .social-guide-links>a{--link-tone:#64dfa4}.team-play-page .social-guide-links>a:nth-child(2){--link-tone:var(--social-violet)}.team-play-page .social-guide-links>a>i,.team-play-page .social-guide-links>a:nth-child(2)>i{color:var(--link-tone);border:1px solid color-mix(in srgb,var(--link-tone) 62%,#34434b);background:transparent}
.team-play-page .social-inline-action>i:first-child{color:var(--social-gold);border:1px solid #816b30;background:transparent}
.emotes-page .social-guide-hero>aside>i{color:var(--social-violet);border:1px solid #6a5790;background:rgba(179,149,255,.07)}
.emotes-page .social-guide-actions a{--action-tone:var(--social-violet)}.emotes-page .social-guide-actions a.is-secondary{--action-tone:#64dfa4}.emotes-page .social-guide-actions a.is-tertiary{--action-tone:var(--social-gold)}
.emotes-page .social-guide-actions a i{color:var(--action-tone);border:1px solid color-mix(in srgb,var(--action-tone) 65%,#34434b);background:transparent}
.emote-clear-answer>i{color:#64dfa4;border:1px solid #43826c;background:transparent}
.emote-fact-strip i{color:var(--fact-tone);border:1px solid color-mix(in srgb,var(--fact-tone) 62%,#34434b);background:transparent}
.emotes-page .social-guide-sources a{--source-tone:var(--social-violet)}.emotes-page .social-guide-sources a:nth-child(2){--source-tone:#64dfa4}.emotes-page .social-guide-sources a:nth-child(3){--source-tone:var(--social-gold)}.emotes-page .social-guide-sources a>i{color:var(--source-tone);border:1px solid color-mix(in srgb,var(--source-tone) 62%,#34434b);background:transparent}
/* League install and official-support guide */
.league-install-page{background:#050a10}.league-install-page main{width:min(100% - 30px,1280px);margin:0 auto;padding:24px 0 74px}.install-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;align-items:end;min-height:510px;padding:clamp(28px,6vw,72px);border:1px solid #3d5368;border-left:5px solid #57dde8;border-radius:7px;overflow:hidden;background:#0c1520}.install-hero>img,.install-hero-shade{position:absolute;inset:0;width:100%;height:100%}.install-hero>img{object-fit:cover;object-position:center 30%}.install-hero-shade{background:linear-gradient(90deg,rgba(3,8,14,.97) 0%,rgba(3,8,14,.82) 48%,rgba(3,8,14,.5) 100%)}.install-hero-copy,.install-hero aside{position:relative;z-index:1}.install-hero-copy{max-width:760px}.install-hero h1{margin:5px 0 14px;color:#fff;font-size:clamp(2.5rem,7vw,5.4rem);line-height:.94}.install-hero-copy>p:not(.eyebrow){max-width:670px;margin:0;color:#c3cfda;font-size:1.08rem;line-height:1.65}.install-hero-copy>div{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}.install-hero-copy a{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 17px;border:1px solid #557181;border-radius:999px;background:rgba(8,20,29,.9);color:#ecfbff;font-weight:900;text-decoration:none}.install-hero-copy a.is-primary{border-color:#61dce7;background:#153840;color:#fff}.install-hero aside{display:grid;justify-items:center;align-content:center;min-height:200px;padding:24px;border:1px solid #aa8742;border-radius:6px;background:rgba(12,16,24,.9);text-align:center}.install-hero aside i{color:#efbd55;font-size:2.2rem}.install-hero aside strong{margin-top:12px;color:#fff;font-size:1.2rem}.install-hero aside span{margin-top:7px;color:#aebdca;line-height:1.45}.install-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0 58px}.install-trust article{display:grid;grid-template-columns:54px minmax(0,1fr);gap:14px;align-items:center;padding:18px;border:1px solid #2f4353;border-radius:6px;background:#0d161f}.install-trust article>i{display:grid;place-items:center;width:52px;height:52px;border:1px solid currentColor;border-radius:5px;color:#62dce6;font-size:1.35rem}.install-trust article:nth-child(2)>i{color:#b493f2}.install-trust article:nth-child(3)>i{color:#efb650}.install-trust small,.install-trust strong{display:block}.install-trust small{color:#8598a9;font-size:.7rem;font-weight:900;text-transform:uppercase}.install-trust strong{margin-top:2px;color:#fff;font-size:1.05rem}.install-trust p{margin:4px 0 0;color:#91a2b2;font-size:.83rem;line-height:1.4}.install-steps,.install-choose,.install-help,.install-next{margin-top:54px}.install-steps>header,.install-choose>header{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:19px}.install-steps h2,.install-choose h2,.install-help h2,.install-next h2{margin:4px 0 0;color:#fff;font-size:clamp(1.8rem,4vw,3.1rem)}.install-steps>header>p:last-child{max-width:520px;margin:0;color:#96a7b7;line-height:1.55}.install-steps ol{display:grid;gap:2px;margin:0;padding:0;border:1px solid #334859;border-radius:7px;overflow:hidden;list-style:none;background:#263746}.install-steps li{display:grid;grid-template-columns:52px 52px minmax(0,1fr);gap:15px;align-items:center;padding:18px;background:#0d1721}.install-steps li>i{display:grid;place-items:center;width:48px;height:48px;border:1px solid #557889;border-radius:5px;color:#6ce2eb;font-size:1.25rem}.install-steps li:nth-child(2n)>i{border-color:#715d92;color:#b99cf3}.install-steps h3{margin:0 0 5px;color:#fff;font-size:1.08rem}.install-steps li p{margin:0;color:#a7b6c4;line-height:1.55}.install-choose>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.install-choose article{padding:23px;border:1px solid #33495a;border-top:4px solid #56dbe6;border-radius:7px;background:#0d1620}.install-choose article:nth-child(2){border-top-color:#a67ce3}.install-choose article:nth-child(3){border-top-color:#eab348}.install-choose article>i{color:#68e1ea;font-size:1.7rem}.install-choose article:nth-child(2)>i{color:#bc9af3}.install-choose article:nth-child(3)>i{color:#f0bb50}.install-choose small{display:block;margin-top:15px;color:#8497a8;font-weight:900;text-transform:uppercase}.install-choose h3{margin:4px 0 8px;color:#fff;font-size:1.2rem}.install-choose p{min-height:78px;margin:0;color:#9fafbd;line-height:1.55}.install-choose a{display:inline-flex;align-items:center;gap:7px;margin-top:17px;color:#79e3eb;font-weight:900;text-decoration:none}.install-help{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:28px;padding:clamp(24px,4vw,42px);border:1px solid #594b76;border-radius:7px;background:linear-gradient(120deg,#111923,#171428)}.install-help>div:first-child>p:last-child{color:#aeb8c8;line-height:1.6}.install-help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.install-help-grid>a{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center;min-width:0;padding:15px;border:1px solid #374d5d;border-radius:6px;background:#0c151e;color:#eafaff;text-decoration:none}.install-help-grid>a>i:first-child{color:#66dfe9;font-size:1.25rem}.install-help-grid small,.install-help-grid strong{display:block;min-width:0}.install-help-grid small{color:#8598aa;font-size:.7rem;text-transform:uppercase}.install-help-grid strong{margin-top:3px;color:#fff}.install-help-grid>a>i:last-child{color:#8c9dac}.install-next{display:grid;grid-template-columns:280px minmax(0,1fr);gap:25px;align-items:center}.install-next nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.install-next a{display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;align-items:center;min-width:0;padding:16px;border:1px solid #385061;border-radius:6px;background:#0d1721;text-decoration:none}.install-next a>i{color:#67dfe8;font-size:1.35rem}.install-next small,.install-next strong{display:block}.install-next small{color:#899aaa;font-size:.72rem}.install-next strong{margin-top:3px;color:#fff}.install-next a:nth-child(2)>i{color:#b899ef}.install-next a:nth-child(3)>i{color:#edb84c}@media(max-width:820px){.league-install-page main{width:min(100% - 18px,1280px);padding-top:14px}.install-hero{grid-template-columns:1fr;min-height:620px;padding:28px 20px}.install-hero aside{min-height:0;justify-items:start;text-align:left}.install-trust,.install-choose>div{grid-template-columns:1fr}.install-steps>header{display:block}.install-steps>header>p:last-child{margin-top:10px}.install-help{grid-template-columns:1fr}.install-next{grid-template-columns:1fr}.install-next nav{grid-template-columns:1fr}}@media(max-width:540px){.install-hero h1{font-size:2.65rem}.install-hero-copy>div{display:grid}.install-hero-copy a{width:100%}.install-steps li{grid-template-columns:40px minmax(0,1fr);gap:11px;padding:14px}.install-steps li>i{grid-row:1/3;width:40px;height:40px}.install-steps li>.league-step-number{display:none}.install-help-grid{grid-template-columns:1fr}.install-choose p{min-height:0}}

/* v115: richer, clearer official-install journey. */
.league-install-page {
  --install-cyan: #55dce8;
  --install-violet: #b68bf0;
  --install-green: #5de0a7;
  --install-gold: #efbd5b;
  --install-rose: #ff758f;
}
.league-install-page main { width: min(100% - 32px, 1340px); }
.install-hero {
  grid-template-columns: minmax(0, 1fr) 310px;
  min-height: 560px;
  border-left: 0;
  border-bottom: 5px solid var(--install-cyan);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .34);
}
.install-hero-shade {
  background: linear-gradient(90deg, rgba(3, 8, 14, .98) 0%, rgba(3, 8, 14, .87) 48%, rgba(5, 10, 18, .38) 100%);
}
.install-hero-copy .eyebrow { color: #78ebf3; }
.install-hero h1 { max-width: 780px; font-size: clamp(3rem, 7vw, 6rem); letter-spacing: 0; }
.install-hero-copy > div { align-items: stretch; }
.install-hero-copy a { border-radius: 7px; }
.install-hero-copy a.is-primary {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 20px;
  min-width: min(100%, 310px);
  min-height: 62px;
  padding: 9px 16px;
  border-color: rgba(93, 224, 167, .7);
  color: #effff7;
  background: linear-gradient(110deg, #123f32, #11343a);
  box-shadow: 0 12px 32px rgba(34, 180, 130, .17);
}
.install-hero-copy a.is-primary > i:first-child { color: var(--install-green); font-size: 1.35rem; }
.install-hero-copy a.is-primary > i:last-child { color: #a5d8c4; }
.install-hero-copy a.is-primary span,
.install-hero-copy a.is-primary small { display: block; min-width: 0; text-align: left; }
.install-hero-copy a.is-primary small { margin-bottom: 2px; color: #9bcfba; font-size: .62rem; text-transform: uppercase; }
.install-hero aside {
  justify-items: start;
  min-height: 250px;
  border-color: rgba(239, 189, 91, .52);
  border-top: 4px solid var(--install-gold);
  background: linear-gradient(145deg, rgba(19, 17, 25, .94), rgba(7, 17, 24, .94));
  text-align: left;
}
.install-source-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 0 18px !important;
  place-items: center;
  border: 1px solid rgba(239, 189, 91, .55);
  border-radius: 7px;
  color: var(--install-gold) !important;
  background: rgba(239, 189, 91, .1);
}
.install-source-icon i { font-size: 1.65rem !important; }
.install-hero aside > small { color: #d6b974; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.install-hero aside > strong { margin-top: 5px; overflow-wrap: anywhere; font-size: 1.28rem; }
.install-hero aside > b {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid rgba(239, 189, 91, .2);
  color: #dce8ed;
  font-size: .72rem;
  line-height: 1.45;
}
.install-hero aside > b i { color: var(--install-green); font-size: .9rem; }
.install-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 14px 0;
  padding: 10px;
  border: 1px solid rgba(130, 165, 190, .24);
  border-radius: 7px;
  background: #09131d;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}
.install-jump > span,
.install-jump a { display: inline-flex; gap: 7px; align-items: center; min-height: 38px; padding: 0 12px; border-radius: 6px; }
.install-jump > span { color: #d9e7ed; background: rgba(85, 220, 232, .08); }
.install-jump > span i { color: var(--install-cyan); }
.install-jump a { border: 1px solid transparent; color: #9fb2c1; text-decoration: none; }
.install-jump a:nth-of-type(1) i { color: var(--install-cyan); }
.install-jump a:nth-of-type(2) i { color: var(--install-violet); }
.install-jump a:nth-of-type(3) i { color: var(--install-gold); }
.install-jump a:nth-of-type(4) i { color: var(--install-green); }
.install-jump a:is(:hover, :focus-visible) { border-color: rgba(85, 220, 232, .34); color: #f2fcff; background: #101e29; }
.install-trust { margin: 14px 0 66px; }
.install-trust article {
  --tone: var(--install-cyan);
  grid-template-columns: 58px minmax(0, 1fr) auto;
  min-height: 108px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--tone) 34%, #273947);
  border-left: 4px solid var(--tone);
  background: linear-gradient(120deg, color-mix(in srgb, var(--tone) 8%, #0c1721), #0b141d 64%);
}
.install-trust article.is-green { --tone: var(--install-green); }
.install-trust article.is-violet { --tone: var(--install-violet); }
.install-trust article.is-gold { --tone: var(--install-gold); }
.install-trust article > i { width: 54px; height: 54px; color: var(--tone) !important; background: color-mix(in srgb, var(--tone) 9%, #0b151e); }
.install-trust article > b { align-self: start; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--tone) 32%, transparent); border-radius: 999px; color: var(--tone); font-size: .58rem; text-transform: uppercase; white-space: nowrap; }
.install-steps > header,
.install-choose > header { align-items: center; }
.install-steps > header > div,
.install-choose > header > div { min-width: 0; }
.install-steps ol { gap: 1px; border-color: rgba(113, 153, 180, .32); background: rgba(113, 153, 180, .3); }
.install-steps li {
  --tone: var(--install-cyan);
  position: relative;
  grid-template-columns: 58px 58px minmax(0, 1fr) 68px;
  min-height: 112px;
  padding: 18px 20px;
  border-left: 4px solid var(--tone);
  background: linear-gradient(100deg, color-mix(in srgb, var(--tone) 7%, #0c1721), #0b151e 45%);
}
.install-steps li.is-violet { --tone: var(--install-violet); }
.install-steps li.is-green { --tone: var(--install-green); }
.install-steps li.is-gold { --tone: var(--install-gold); }
.install-steps li.is-rose { --tone: var(--install-rose); }
.install-steps li > .league-step-number {
  position: static;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--tone) 58%, transparent);
  border-radius: 50%;
  color: #061016;
  background: var(--tone);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--tone) 10%, transparent);
}
.install-steps li > i { width: 52px; height: 52px; border-color: color-mix(in srgb, var(--tone) 45%, #263b4b); color: var(--tone); background: color-mix(in srgb, var(--tone) 8%, #0a141d); }
.install-steps li > div > small { display: block; margin-bottom: 3px; color: var(--tone); font-size: .63rem; font-weight: 900; text-transform: uppercase; }
.install-steps li > span { display: grid; justify-items: center; gap: 4px; color: #728a9c; font-size: .58rem; font-weight: 900; text-transform: uppercase; }
.install-steps li > span i { color: var(--tone); font-size: 1.1rem; }
.install-choose > header > span { display: inline-flex; gap: 7px; align-items: center; padding: 7px 10px; border: 1px solid rgba(93, 224, 167, .3); border-radius: 999px; color: #aee9cf; font-size: .72rem; white-space: nowrap; }
.install-choose article { --tone: var(--install-cyan); position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--tone) 31%, #2d4150); border-top-color: var(--tone) !important; background: linear-gradient(150deg, color-mix(in srgb, var(--tone) 8%, #0d1721), #0b141d 58%); }
.install-choose article.is-violet { --tone: var(--install-violet); }
.install-choose article.is-gold { --tone: var(--install-gold); }
.install-choice-icon { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid color-mix(in srgb, var(--tone) 48%, transparent); border-radius: 7px; color: var(--tone); background: color-mix(in srgb, var(--tone) 9%, #09131c); font-size: 1.45rem; }
.install-choose article > small { color: var(--tone); }
.install-choose article > a { display: flex; justify-content: space-between; width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent); border-radius: 6px; color: #edf9fc; background: color-mix(in srgb, var(--tone) 7%, #0a141d); }
.install-choose article > a > i { color: var(--tone); }
.install-help { border-color: rgba(182, 139, 240, .42); border-left: 5px solid var(--install-violet); background: linear-gradient(120deg, rgba(182, 139, 240, .1), #0d1721 43%, rgba(85, 220, 232, .05)); }
.install-help-mark { display: grid; width: 58px; height: 58px; margin-bottom: 16px; place-items: center; border: 1px solid rgba(182, 139, 240, .48); border-radius: 7px; color: var(--install-violet); background: rgba(182, 139, 240, .09); font-size: 1.5rem; }
.install-help > div:first-child > aside { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 19px; padding: 12px; border: 1px solid rgba(255, 117, 143, .3); border-radius: 6px; background: rgba(75, 23, 38, .24); }
.install-help > div:first-child > aside > i { color: var(--install-rose); font-size: 1.15rem; text-align: center; }
.install-help > div:first-child > aside strong,
.install-help > div:first-child > aside small { display: block; }
.install-help > div:first-child > aside strong { color: #ffe5eb; font-size: .76rem; }
.install-help > div:first-child > aside small { margin-top: 3px; color: #bca3aa; font-size: .66rem; line-height: 1.45; }
.install-help-grid > a { --tone: var(--install-cyan); border-color: color-mix(in srgb, var(--tone) 34%, #2a3d4a); border-left: 4px solid var(--tone); background: linear-gradient(110deg, color-mix(in srgb, var(--tone) 8%, #0b151e), #09131c); }
.install-help-grid > a.is-violet { --tone: var(--install-violet); }
.install-help-grid > a.is-gold { --tone: var(--install-gold); }
.install-help-grid > a.is-green { --tone: var(--install-green); }
.install-help-grid > a > i:first-child,
.install-help-grid > a > i:last-child { color: var(--tone); }
.install-help-grid > a:is(:hover, :focus-visible) { border-color: var(--tone); transform: translateY(-2px); box-shadow: 0 12px 26px color-mix(in srgb, var(--tone) 11%, transparent); }
.install-next { padding: 28px; border: 1px solid rgba(93, 224, 167, .28); border-top: 4px solid var(--install-green); border-radius: 7px; background: linear-gradient(110deg, rgba(93, 224, 167, .08), #0a141d 38%); }
.install-next > div > span { display: grid; width: 52px; height: 52px; margin-bottom: 12px; place-items: center; border: 1px solid rgba(93, 224, 167, .45); border-radius: 50%; color: var(--install-green); background: rgba(93, 224, 167, .09); font-size: 1.35rem; }
.install-next a { --tone: var(--install-green); grid-template-columns: 42px minmax(0, 1fr) 28px; border-color: color-mix(in srgb, var(--tone) 34%, #2c4150); border-left: 3px solid var(--tone); background: color-mix(in srgb, var(--tone) 6%, #0c1721); }
.install-next a.is-violet { --tone: var(--install-violet); }
.install-next a.is-gold { --tone: var(--install-gold); }
.install-next a > i,
.install-next a > b { color: var(--tone) !important; }
.install-next a > b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--tone) 10%, transparent); }
.install-next a:is(:hover, :focus-visible) { border-color: var(--tone); transform: translateY(-2px); }
@media (max-width: 900px) {
  .install-hero { grid-template-columns: 1fr; min-height: 700px; }
  .install-hero aside { min-height: 0; }
  .install-trust { grid-template-columns: 1fr; }
  .install-steps li { grid-template-columns: 52px 52px minmax(0, 1fr); }
  .install-steps li > span { display: none; }
  .install-choose > div { grid-template-columns: 1fr; }
  .install-choose p { min-height: 0; }
  .install-help { grid-template-columns: 1fr; }
  .install-next { grid-template-columns: 1fr; }
  .install-next nav { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .league-install-page main { width: min(100% - 18px, 1340px); }
  .install-hero { min-height: 720px; padding: 28px 19px; }
  .install-hero h1 { font-size: 3rem; }
  .install-hero-copy > p:not(.eyebrow) { font-size: .96rem; }
  .install-hero-copy > div { display: grid; }
  .install-hero-copy a { width: 100%; }
  .install-jump { display: grid; grid-template-columns: 1fr 1fr; }
  .install-jump > span { grid-column: 1 / -1; }
  .install-jump a { padding-inline: 9px; font-size: .68rem; }
  .install-trust article { grid-template-columns: 50px minmax(0, 1fr); padding: 14px; }
  .install-trust article > i { width: 46px; height: 46px; }
  .install-trust article > b { grid-column: 2; justify-self: start; }
  .install-steps > header,
  .install-choose > header { align-items: flex-start; flex-direction: column; }
  .install-steps li { grid-template-columns: 42px minmax(0, 1fr); min-height: 0; gap: 11px; padding: 16px 13px; }
  .install-steps li > .league-step-number { width: 38px; height: 38px; }
  .install-steps li > i { grid-column: 1; grid-row: 2; width: 38px; height: 38px; }
  .install-steps li > div { grid-column: 2; grid-row: 1 / span 2; }
  .install-choose article { padding: 20px 17px; }
  .install-help { padding: 23px 17px; }
  .install-help-grid { grid-template-columns: 1fr; }
  .install-next { padding: 21px 16px; }
}

/* Hero groups introduced before the shared action component had a class. */
.league-command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
}
.league-command-actions > :is(a, button) {
  --action-accent: #69dfe9;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 42px !important;
  padding: 8px 14px !important;
  border: 1px solid color-mix(in srgb, var(--action-accent) 48%, #2a3c49) !important;
  border-radius: 5px !important;
  color: color-mix(in srgb, var(--action-accent) 67%, #eaf4f8) !important;
  background: color-mix(in srgb, var(--action-accent) 7%, #0a141c) !important;
  box-shadow: inset 0 -2px color-mix(in srgb, var(--action-accent) 11%, transparent) !important;
  font-size: .76rem !important;
  font-weight: 900 !important;
  line-height: 1.25;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.league-command-actions > :is(a, button):nth-child(2) { --action-accent: #b28cff; }
.league-command-actions > :is(a, button):nth-child(3n) { --action-accent: #efc45f; }
.league-command-actions > :is(a, button):is(:hover, :focus-visible) {
  outline: 0;
  border-color: var(--action-accent) !important;
  color: #fff !important;
  background: color-mix(in srgb, var(--action-accent) 14%, #0b151e) !important;
  box-shadow: inset 0 -3px color-mix(in srgb, var(--action-accent) 25%, transparent), 0 0 0 2px color-mix(in srgb, var(--action-accent) 12%, transparent) !important;
  transform: translateY(-1px);
}

/* Pulls, hooks and forced-movement reference */
.pulls-page {
  --pull-cyan: #5ee7ef;
  --pull-gold: #f2c45c;
  --pull-violet: #b690ff;
  --pull-rose: #ff769e;
  background: #070c13;
}
.pulls-page main { width: min(1440px, calc(100% - 32px)); margin-inline: auto; }
.pulls-page :is(h1,h2,h3,p,strong,small,span,a,li) { min-width: 0; overflow-wrap: break-word; }
.pulls-hero {
  position: relative; display: grid; min-height: 570px; align-items: end; overflow: hidden;
  border: 1px solid #31536a; border-left: 5px solid var(--pull-cyan); background: #07101a;
}
.pulls-hero-art { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.pulls-hero-art figure { min-width: 0; margin: 0; overflow: hidden; }
.pulls-hero-art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.07); }
.pulls-hero-art figure:first-child img { object-position: 52% 24%; }
.pulls-hero-art figure:last-child img { object-position: 42% 24%; }
.pulls-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(3,8,14,.98) 0%,rgba(3,8,14,.87) 43%,rgba(3,8,14,.35) 73%,rgba(3,8,14,.58)),linear-gradient(0deg,rgba(3,8,14,.96),transparent 65%); }
.pulls-hero-copy { position: relative; z-index: 1; max-width: 870px; padding: clamp(32px,6vw,78px); }
.pulls-hero-copy .eyebrow { display: flex; align-items: center; gap: 9px; color: var(--pull-cyan); }
.pulls-hero h1 { max-width: 800px; margin: 7px 0 17px; color: #fff; font-size: clamp(3rem,7vw,6.4rem); line-height: .92; text-wrap: balance; }
.pulls-hero-copy > p:not(.eyebrow) { max-width: 700px; margin: 0; color: #c5d3df; font-size: clamp(1rem,1.5vw,1.18rem); line-height: 1.68; }
.pulls-hero-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.pulls-hero-facts span { display: grid; grid-template-columns: auto auto; gap: 7px; align-items: baseline; padding: 9px 12px; border: 1px solid rgba(108,220,232,.32); background: rgba(5,15,23,.82); }
.pulls-hero-facts b { color: #fff; font-size: 1.05rem; }
.pulls-hero-facts small { color: #9cc8ce; font-size: .67rem; font-weight: 800; text-transform: uppercase; }
.pulls-range-showdown,.pulls-identify,.pulls-faq { margin: 18px 0 34px; padding: clamp(24px,4vw,46px); border: 1px solid #2c4557; background: #09131d; }
.pulls-range-showdown > header,.pulls-identify > header,.pulls-faq > header { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.62fr); gap: 28px; align-items: end; margin-bottom: 23px; }
.pulls-range-showdown h2,.pulls-identify h2,.pulls-faq h2 { margin: 4px 0 0; color: #fff; font-size: clamp(1.8rem,4vw,3.25rem); line-height: 1.04; }
.pulls-range-showdown > header > p,.pulls-identify > header > p,.pulls-faq > header > p { margin: 0; color: #98aebb; line-height: 1.58; }
.pulls-range-showdown > div { display: grid; grid-template-columns: minmax(0,1fr) 220px minmax(0,1fr); gap: 12px; align-items: stretch; }
.pulls-range-showdown article { display: grid; grid-template-columns: 98px minmax(0,1fr); gap: 18px; align-items: center; padding: 19px; border: 1px solid #376577; background: linear-gradient(120deg,#0b2028,#0c1620); }
.pulls-range-showdown article.is-blitzcrank { border-color: #5e4a7b; background: linear-gradient(120deg,#171126,#101621); }
.pulls-range-showdown article img { width: 98px; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--pull-cyan); }
.pulls-range-showdown article.is-blitzcrank img { border-color: var(--pull-violet); }
.pulls-range-showdown article span { display: grid; }
.pulls-range-showdown article small { color: #86dfe7; font-weight: 900; text-transform: uppercase; }
.pulls-range-showdown article.is-blitzcrank small { color: #c1a5f4; }
.pulls-range-showdown article strong { margin-top: 3px; color: #fff; font-size: 1.32rem; }
.pulls-range-showdown article b { margin-top: 7px; color: #fff; font-size: clamp(2rem,4vw,3.2rem); line-height: 1; }
.pulls-range-showdown article em { margin-top: 5px; color: #899dab; font-style: normal; }
.pulls-range-verdict { display: grid; place-items: center; align-content: center; padding: 18px; border: 1px solid #755f31; background: #1a170f; text-align: center; }
.pulls-range-verdict i { color: var(--pull-gold); font-size: 1.65rem; }
.pulls-range-verdict strong,.pulls-range-verdict b { margin-top: 8px; color: #ffe19a; }
.pulls-range-verdict span { margin-top: 5px; color: #bdb49e; font-size: .78rem; line-height: 1.4; }
.pulls-range-verdict hr { width: 100%; margin: 15px 0 4px; border: 0; border-top: 1px solid #4a4029; }
.pulls-identify { border-color: #4d426e; background: linear-gradient(125deg,#0a1720,#151123); }
.pulls-identify > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.pulls-identify article { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 13px; padding: 18px; border: 1px solid #3e3a59; background: #101421; }
.pulls-identify article > i { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid currentColor; color: var(--pull-violet); font-size: 1.15rem; }
.pulls-identify article:nth-child(2)>i { color: var(--pull-gold); }.pulls-identify article:nth-child(3)>i { color: var(--pull-rose); }.pulls-identify article:nth-child(4)>i { color: #72dfa8; }
.pulls-identify small { color: #9d92bc; font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.pulls-identify h3 { margin: 4px 0 8px; color: #fff; font-size: 1.12rem; }
.pulls-identify p { margin: 0; color: #aeb8c7; font-size: .86rem; line-height: 1.5; }
.pulls-jump { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 18px 0 34px; }
.pulls-jump a { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 12px 14px; border: 1px solid #2a4052; color: #d8e6ef; background: #0b141f; text-decoration: none; }
.pulls-jump a:hover, .pulls-jump a:focus-visible { border-color: var(--pull-cyan); color: #fff; transform: translateY(-2px); }
.pulls-jump i { color: var(--pull-cyan); font-size: 1.2rem; }
.pull-family { --family: var(--pull-cyan); margin: 0 0 34px; padding: clamp(22px, 3vw, 38px); border-top: 3px solid var(--family); background: #0b131e; }
.pull-family.is-gold { --family: var(--pull-gold); }
.pull-family.is-violet { --family: var(--pull-violet); }
.pull-family.is-rose { --family: var(--pull-rose); }
.pull-family > header { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.pull-family > header .league-step-number { flex: 0 0 auto; background: color-mix(in srgb, var(--family) 18%, #0c1520); border-color: var(--family); color: var(--family); }
.pull-family h2, .pulls-self h2, .pulls-answers h2, .pulls-practice h2, .pulls-sources h2 { margin: 3px 0 8px; font-size: clamp(1.65rem, 3vw, 2.65rem); }
.pull-family header p:last-child, .pulls-self header p:last-child, .pulls-answers header p:last-child { margin: 0; color: #9fb1c0; }
.pull-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pull-grid article { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 16px; border: 1px solid #26394a; background: #0e1925; }
.pull-grid article > img { width: 88px; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--family); }
.pull-grid h3 { margin: 2px 0; font-size: 1.28rem; }
.pull-grid small { color: var(--family); font-weight: 700; text-transform: uppercase; }
.pull-grid strong { color: #e6edf3; }
.pull-grid p { margin: 7px 0 10px; color: #aebdca; line-height: 1.5; }
.pull-grid a { color: var(--family); font-weight: 700; text-decoration: none; }
.pulls-self, .pulls-answers, .pulls-practice, .pulls-sources { margin: 34px 0; padding: clamp(24px, 4vw, 46px); border: 1px solid #294052; background: #0a121c; }
.pulls-self > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.pulls-self article { padding: 14px; border: 1px solid #26394a; background: #101926; }
.pulls-self img { width: 58px; aspect-ratio: 1; object-fit: cover; margin-bottom: 10px; border: 2px solid var(--pull-violet); }
.pulls-self article span { display: grid; gap: 3px; }
.pulls-self small { color: var(--pull-violet); }
.pulls-self p { margin: 6px 0 0; color: #aebdca; font-size: .88rem; line-height: 1.5; }
.pulls-answers { border-color: #375239; background: linear-gradient(140deg, #0a1715, #10111d); }
.pulls-answers > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.pulls-answers article { display: flex; gap: 14px; padding: 18px; border: 1px solid #2d4d48; background: #0b171b; }
.pulls-answers article .league-step-number { flex: 0 0 auto; }
.pulls-answers h3 { margin: 3px 0 6px; font-size: 1.2rem; }
.pulls-answers small { color: #6fe1bf; font-weight: 700; }
.pulls-answers p { margin: 0; color: #b2c4c8; line-height: 1.52; }
.pulls-answers aside { display: flex; gap: 14px; margin-top: 14px; padding: 17px; border-left: 4px solid var(--pull-gold); background: #201b10; }
.pulls-answers aside i { color: var(--pull-gold); font-size: 1.3rem; }
.pulls-answers aside p { margin: 0; color: #d7ccb0; }
.pulls-practice { border-color: #55487b; }
.pulls-practice ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.pulls-practice li { display: flex; gap: 12px; padding: 18px; border: 1px solid #3a3454; background: #121323; }
.pulls-practice p { margin: 6px 0 0; color: #abb6c7; line-height: 1.48; }
.pulls-sources > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.pulls-sources a { display: flex; gap: 13px; align-items: center; min-height: 80px; padding: 16px; border: 1px solid #2d4253; color: #e5edf4; background: #0d1823; text-decoration: none; }
.pulls-sources a:hover { border-color: var(--pull-cyan); }
.pulls-sources i { color: var(--pull-cyan); font-size: 1.4rem; }
.pulls-sources span { display: grid; gap: 4px; }
.pulls-sources small { color: #93a7b6; }
.pulls-faq { border-color: #3a5060; }
.pulls-faq > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pulls-faq details { border: 1px solid #2d4354; background: #0d1823; }
.pulls-faq summary { display: grid; grid-template-columns: 40px minmax(0,1fr) 20px; gap: 12px; align-items: center; min-height: 72px; padding: 12px 16px; cursor: pointer; list-style: none; }
.pulls-faq summary::-webkit-details-marker { display: none; }
.pulls-faq summary strong { color: #edf6fb; font-size: .98rem; line-height: 1.35; }
.pulls-faq summary > i { color: var(--pull-cyan); transition: transform .2s; }
.pulls-faq details[open] summary > i { transform: rotate(180deg); }
.pulls-faq details > p { margin: 0; padding: 0 18px 18px 68px; color: #aebdca; line-height: 1.58; }
@media (max-width: 1050px) {
  .pulls-jump { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pulls-self > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pulls-identify > div { grid-template-columns: 1fr 1fr; }
  .pulls-range-showdown > div { grid-template-columns: 1fr 180px 1fr; }
}
@media (max-width: 720px) {
  .pulls-page main { width: min(100% - 18px, 1440px); }
  .pulls-hero { min-height: 610px; }
  .pulls-hero-art { grid-template-columns: 1fr; }
  .pulls-hero-art figure:first-child { display: none; }
  .pulls-hero-art figure:last-child img { object-position: 56% 18%; }
  .pulls-hero-shade { background: linear-gradient(0deg,rgba(3,8,14,.99) 0%,rgba(3,8,14,.84) 56%,rgba(3,8,14,.22) 100%); }
  .pulls-hero-copy { padding: 30px 20px; }
  .pulls-hero h1 { font-size: clamp(2.75rem,13vw,4.4rem); }
  .pulls-hero-facts span { flex: 1 1 135px; }
  .pulls-range-showdown > header,.pulls-identify > header,.pulls-faq > header { grid-template-columns: 1fr; gap: 10px; }
  .pulls-range-showdown > div { grid-template-columns: 1fr; }
  .pulls-range-verdict { min-height: 150px; }
  .pulls-jump { grid-template-columns: 1fr 1fr; }
  .pull-grid, .pulls-answers > div, .pulls-practice ol, .pulls-sources > div, .pulls-faq > div { grid-template-columns: 1fr; }
  .pull-grid article { grid-template-columns: 64px minmax(0, 1fr); }
  .pull-grid article > img { width: 64px; }
  .pulls-self > div { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 430px) {
  .pulls-jump, .pulls-self > div, .pulls-identify > div { grid-template-columns: 1fr; }
  .pulls-range-showdown article { grid-template-columns: 72px minmax(0,1fr); }
  .pulls-range-showdown article img { width: 72px; }
  .pulls-faq details > p { padding-left: 16px; }
  .pull-family { padding-inline: 15px; }
}
.league-command-actions > :is(a, button) > i {
  flex: 0 0 auto;
  color: var(--action-accent) !important;
}
@media (max-width: 520px) {
  .league-command-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .league-command-actions > :is(a, button) { width: 100%; }
}

/* v181: spacious, decision-first champion counter results. */
.counter-picker-controls > .counter-submit.league-action-pill {
  --action-accent: #63e4ed;
  display: inline-flex;
  width: auto;
  min-height: 52px;
  padding: 8px 18px;
  border: 1px solid var(--action-accent);
  border-radius: 5px;
  color: #f7fdff;
  background: color-mix(in srgb, var(--action-accent) 20%, #07131b);
  box-shadow: inset 0 -3px color-mix(in srgb, var(--action-accent) 28%, transparent), 0 0 0 2px color-mix(in srgb, var(--action-accent) 11%, transparent);
  font-size: .76rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}
.counter-picker-controls > .counter-submit.league-action-pill > i { color: #fff; }
.counter-picker-controls > .counter-submit.league-action-pill:is(:hover, :focus-visible) {
  border-color: #8bf4f8;
  color: #fff;
  background: color-mix(in srgb, #8bf4f8 25%, #07131b);
  box-shadow: inset 0 -3px rgba(139, 244, 248, .25), 0 0 0 3px rgba(99, 228, 237, .13);
}
.counter-reading-key {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 14px 0 18px;
  overflow: hidden;
  border: 1px solid rgba(151, 171, 212, .18);
  border-radius: 7px;
  background: rgba(151, 171, 212, .18);
}
.counter-reading-key > span {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 13px 14px;
  background: #0a121d;
}
.counter-reading-key i {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(99, 228, 237, .34);
  border-radius: 5px;
  color: #6ae7ef;
  background: rgba(99, 228, 237, .08);
}
.counter-reading-key > span:nth-child(2) i { border-color: rgba(239, 196, 95, .36); color: #efc45f; background: rgba(239, 196, 95, .08); }
.counter-reading-key > span:nth-child(3) i { border-color: rgba(178, 140, 255, .36); color: #b28cff; background: rgba(178, 140, 255, .08); }
.counter-reading-key strong { color: #edf6fa; font-size: .73rem; line-height: 1.25; }
.counter-reading-key small { margin-top: 2px; color: #879caf; font-size: .65rem; line-height: 1.4; }

.counter-grid { grid-template-columns: 1fr; gap: 14px; }
.counter-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .7fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-left: 4px solid #63e4ed;
  background: linear-gradient(105deg, rgba(99, 228, 237, .035), transparent 52%), #0a111b;
}
.counter-card:nth-child(2) { border-left-color: #b28cff; }
.counter-card:nth-child(3) { border-left-color: #efc45f; }
.counter-card-header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 58px 80px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 17px 18px;
  border-bottom: 1px solid rgba(151, 171, 212, .15);
  background: rgba(3, 9, 15, .48);
}
.counter-card-header > img {
  width: 80px;
  height: 80px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 5px;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}
.counter-card .counter-rank { min-width: 0; justify-items: start; }
.counter-card-title { min-width: 0; }
.counter-card-title h3 { margin-top: 1px; font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.08; overflow-wrap: anywhere; }
.counter-card-title > p { margin: 5px 0 0; color: #8fa4b5; font-size: .72rem; line-height: 1.4; }
.counter-card-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .9fr);
  gap: 14px;
  min-width: 0;
  padding: 17px 18px;
}
.counter-interaction {
  min-width: 0;
  padding: 14px 15px;
  border: 1px solid rgba(79, 230, 166, .2);
  border-left: 3px solid #4fe6a6;
  border-radius: 6px;
  background: rgba(79, 230, 166, .045);
}
.counter-interaction > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #7ceeba;
  font-size: .61rem;
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
}
.counter-interaction > strong { display: block; margin-top: 7px; color: #f1f8f5; font-size: 1rem; line-height: 1.3; }
.counter-interaction > p { margin: 6px 0 0; color: #b4c3ce; font-size: .79rem; line-height: 1.58; }
.counter-card .counter-timing { margin: 0; padding: 14px 15px; border-radius: 6px; }
.counter-card .counter-timing-heading span { display: flex; align-items: center; gap: 6px; }
.counter-card .counter-timing-heading strong { font-size: .78rem; }
.counter-card .counter-timing > p { font-size: .7rem; line-height: 1.52; }
.counter-card .counter-reciprocal { margin-top: 12px; }

.counter-card .counter-build {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 11px;
  min-width: 0;
  margin: 17px 18px 17px 0;
  padding: 14px 15px;
  border-color: rgba(178, 140, 255, .22);
  border-left: 3px solid #b28cff;
  background: rgba(178, 140, 255, .045);
}
.counter-card .counter-build > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.counter-card .counter-build > header > span { display: flex; align-items: center; gap: 7px; color: #cfb9ff; font-size: .63rem; font-weight: 900; text-transform: uppercase; }
.counter-card .counter-build > header > small { color: #7f91a3; font-size: .61rem; line-height: 1.35; text-align: right; }
.counter-card .counter-build-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.counter-card .counter-build-items > div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(151, 171, 212, .13);
  border-radius: 5px;
  background: rgba(3, 9, 15, .58);
}
.counter-card .counter-build-items img { width: 42px; height: 42px; border-radius: 4px; }
.counter-card .counter-build-items small { color: #d3deea; font-size: .67rem; line-height: 1.35; overflow-wrap: anywhere; }
.counter-card .counter-build > p { margin: 0; font-size: .67rem; }
.counter-card-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 13px 18px 15px;
  border-top: 1px solid rgba(151, 171, 212, .14);
  background: rgba(3, 9, 15, .52);
}
.counter-card-actions .league-action-pill {
  --action-accent: #70e1eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 13px;
  border: 1px solid color-mix(in srgb, var(--action-accent) 48%, #263541);
  border-radius: 5px;
  color: color-mix(in srgb, var(--action-accent) 72%, #e5eef3);
  background: color-mix(in srgb, var(--action-accent) 7%, #0b141d);
  box-shadow: inset 0 -2px color-mix(in srgb, var(--action-accent) 10%, transparent);
  font-size: .7rem;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
.counter-card-actions .counter-guide-link { grid-column: auto; justify-self: auto; }
.counter-card-actions .counter-champion-link { --action-accent: #b28cff; }

@media (max-width: 980px) {
  .counter-card { grid-template-columns: 1fr; }
  .counter-card-plan { grid-template-columns: 1fr 1fr; }
  .counter-card .counter-build { grid-column: 1; margin: 0 18px 17px; }
}
@media (max-width: 700px) {
  .counter-reading-key { grid-template-columns: 1fr; }
  .counter-picker-controls > .counter-submit.league-action-pill { width: 100%; }
  .counter-card-header { grid-template-columns: 50px 68px minmax(0, 1fr); gap: 10px; padding: 14px 12px; }
  .counter-card-header > img { width: 68px; height: 68px; }
  .counter-card-plan { grid-template-columns: 1fr; padding: 14px 12px; }
  .counter-card .counter-build { margin: 0 12px 14px; }
  .counter-card .counter-build-items { grid-template-columns: 1fr; }
  .counter-card .counter-build > header { display: grid; }
  .counter-card .counter-build > header > small { text-align: left; }
  .counter-card-actions { display: grid; grid-template-columns: 1fr; padding: 12px; }
  .counter-card-actions .league-action-pill { width: 100%; }
}
@media (max-width: 430px) {
  .counter-card-header { grid-template-columns: 46px 58px minmax(0, 1fr); }
  .counter-card-header > img { width: 58px; height: 58px; }
  .counter-card .counter-rank { min-width: 0; }
  .counter-rank small { max-width: 46px; }
  .counter-card-title h3 { font-size: 1.22rem; }
}

/* v182: complete, search-friendly counter guide structure. */
.counter-hero .hero-copy h1 { max-width: 24ch; }
.counter-target-summary {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: 1px;
  margin: 18px 0 28px;
  overflow: hidden;
  border: 1px solid rgba(151, 171, 212, .18);
  border-top: 4px solid #efc45f;
  border-radius: 7px;
  background: rgba(151, 171, 212, .16);
}
.counter-target-identity {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  min-width: 0;
  padding: 18px;
  background: linear-gradient(115deg, rgba(239, 196, 95, .08), transparent 58%), #0a121c;
}
.counter-target-identity > img { width: 84px; height: 84px; border: 1px solid rgba(239, 196, 95, .36); border-radius: 6px; object-fit: cover; }
.counter-target-identity h2 { margin: 3px 0 0; color: #f5f8fb; font-size: clamp(1.2rem, 2.3vw, 1.65rem); line-height: 1.15; overflow-wrap: anywhere; }
.counter-target-identity p:last-child { margin: 6px 0 0; color: #91a3b4; font-size: .76rem; }
.counter-target-facts { display: grid; grid-template-columns: .7fr .8fr 1.5fr; gap: 1px; min-width: 0; margin: 0; background: rgba(151, 171, 212, .16); }
.counter-target-facts > div { min-width: 0; padding: 17px 15px; background: #08111a; }
.counter-target-facts dt { display: flex; align-items: center; gap: 7px; color: #77e5ec; font-size: .63rem; font-weight: 900; text-transform: uppercase; }
.counter-target-facts > div:nth-child(2) dt { color: #c9adff; }
.counter-target-facts > div:nth-child(3) dt { color: #efc45f; }
.counter-target-facts dd { margin: 8px 0 0; color: #becbd5; font-size: .72rem; line-height: 1.5; overflow-wrap: anywhere; }

.counter-lock-check, .counter-faq { margin-top: 42px; }
.counter-lock-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(151, 171, 212, .18);
  border-radius: 7px;
  background: rgba(151, 171, 212, .16);
}
.counter-lock-grid > article {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 11px;
  align-content: start;
  min-width: 0;
  padding: 16px;
  background: #09121c;
}
.counter-lock-grid > article:nth-child(2) { background: linear-gradient(145deg, rgba(178, 140, 255, .06), transparent 62%), #09121c; }
.counter-lock-grid > article:nth-child(3) { background: linear-gradient(145deg, rgba(79, 230, 166, .05), transparent 62%), #09121c; }
.counter-lock-grid > article:nth-child(4) { background: linear-gradient(145deg, rgba(239, 196, 95, .06), transparent 62%), #09121c; }
.counter-lock-grid .league-step-number { width: 34px; height: 34px; font-size: .82rem; }
.counter-lock-grid strong { display: block; color: #edf4f8; font-size: .78rem; line-height: 1.3; }
.counter-lock-grid p { margin: 6px 0 0; color: #8ea1b2; font-size: .69rem; line-height: 1.55; }
.counter-role-note {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 113, 143, .24);
  border-left: 4px solid #ff718f;
  border-radius: 6px;
  background: rgba(255, 113, 143, .045);
}
.counter-role-note > i { display: grid; place-items: center; width: 38px; height: 38px; color: #ff8ca5; font-size: 1rem; }
.counter-role-note strong { color: #ffd4dd; font-size: .74rem; }
.counter-role-note p { margin: 4px 0 0; color: #aebdc8; font-size: .7rem; line-height: 1.5; }

.counter-faq-list { display: grid; gap: 8px; }
.counter-faq-list details { overflow: hidden; border: 1px solid rgba(151, 171, 212, .18); border-radius: 6px; background: #09121c; }
.counter-faq-list summary {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 28px;
  gap: 11px;
  align-items: center;
  min-height: 62px;
  padding: 10px 14px;
  color: #edf5f8;
  cursor: pointer;
  list-style: none;
}
.counter-faq-list summary::-webkit-details-marker { display: none; }
.counter-faq-list summary strong { font-size: .79rem; line-height: 1.4; }
.counter-faq-list summary > i { color: #65e5ee; transition: transform .18s ease; }
.counter-faq-list details[open] summary { border-bottom: 1px solid rgba(151, 171, 212, .14); background: rgba(99, 228, 237, .04); }
.counter-faq-list details[open] summary > i { transform: rotate(45deg); }
.counter-faq-list details > p { margin: 0; padding: 14px 18px 16px 63px; color: #a8b8c4; font-size: .74rem; line-height: 1.65; }
.counter-next-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 46px; }
.counter-next-links .league-action-pill {
  --action-accent: #6fe5ed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid color-mix(in srgb, var(--action-accent) 48%, #263541);
  border-radius: 5px;
  color: color-mix(in srgb, var(--action-accent) 72%, #e5eef3);
  background: color-mix(in srgb, var(--action-accent) 7%, #0b141d);
  font-size: .7rem;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
}
.counter-next-links .league-action-pill:nth-child(2) { --action-accent: #b28cff; }
.counter-next-links .league-action-pill:nth-child(3) { --action-accent: #efc45f; }
.counter-next-links .league-action-pill:is(:hover, :focus-visible) { color: #fff; background: color-mix(in srgb, var(--action-accent) 15%, #0b141d); transform: translateY(-1px); }

@media (max-width: 980px) {
  .counter-target-summary { grid-template-columns: 1fr; }
  .counter-lock-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .counter-target-facts { grid-template-columns: 1fr; }
  .counter-lock-grid { grid-template-columns: 1fr; }
  .counter-next-links { display: grid; grid-template-columns: 1fr; }
  .counter-next-links .league-action-pill { width: 100%; }
}
@media (max-width: 460px) {
  .counter-target-identity { grid-template-columns: 66px minmax(0, 1fr); padding: 14px 12px; }
  .counter-target-identity > img { width: 66px; height: 66px; }
  .counter-target-facts > div { padding: 14px 12px; }
  .counter-faq-list summary { grid-template-columns: 34px minmax(0, 1fr) 22px; padding-inline: 11px; }
  .counter-faq-list details > p { padding: 13px 12px 15px; }
}
.companion-free-promise{margin:24px auto 0;max-width:1280px;border:1px solid rgba(80,225,218,.34);background:linear-gradient(135deg,rgba(10,38,45,.92),rgba(24,20,48,.94));box-shadow:0 18px 50px rgba(0,0,0,.25);overflow:hidden}
.companion-free-promise>header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:24px 26px;border-bottom:1px solid rgba(255,255,255,.1)}
.companion-free-promise>header>span{display:grid;width:54px;height:54px;place-items:center;border:1px solid rgba(80,225,218,.45);background:rgba(80,225,218,.1);color:#68f1e9;font-size:1.35rem}
.companion-free-promise>header h2{margin:3px 0 5px;font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.12}
.companion-free-promise>header p{margin:0;max-width:760px;color:#c4d4df}
.companion-free-promise>header>strong{font-size:clamp(2rem,4vw,3.5rem);line-height:1;color:#80f0b5}
.companion-free-promise>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.1)}
.companion-free-promise article{display:flex;gap:13px;align-items:flex-start;min-width:0;padding:20px;background:rgba(7,16,27,.88)}
.companion-free-promise article i{flex:0 0 auto;color:#f0bd56;font-size:1.25rem}
.companion-free-promise article span{display:grid;gap:6px;min-width:0}
.companion-free-promise article strong{font-size:1rem;color:#f4f8fb}
.companion-free-promise article small{color:#aebfcb;font-size:.9rem;line-height:1.5}
.companion-free-promise>p{display:flex;gap:12px;align-items:flex-start;margin:0;padding:18px 24px;background:rgba(115,82,210,.13);color:#cad7e2}
.companion-free-promise>p i{color:#bc9cff;font-size:1.05rem}
.companion-free-promise>p strong{color:#e2d7ff}
@media(max-width:900px){.companion-free-promise>div{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.companion-free-promise>header{grid-template-columns:auto minmax(0,1fr);padding:20px}.companion-free-promise>header>strong{grid-column:1/-1}.companion-free-promise>div{grid-template-columns:1fr}.companion-free-promise>p{padding:17px 20px}}

/* v173: richer League home palette and mode-led beginner journey. */
.league-home-page {
  --home-cyan: #61dce5;
  --home-gold: #e5b955;
  --home-violet: #ad87f0;
  --home-green: #64d79e;
  --home-rose: #ee7f9d;
}
.league-home-page main {
  position: relative;
}
.league-home-page .league-hero {
  min-height: 540px;
  border: 1px solid #3b3b42;
  border-bottom: 3px solid var(--home-gold);
  border-radius: 7px 7px 0 0;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .24);
}
.league-home-page .league-hero .hero-art { object-position: 68% 28%; }
.league-home-page .league-hero .hero-shade {
  background:
    linear-gradient(90deg, rgba(3, 8, 13, .99) 0%, rgba(4, 10, 16, .96) 39%, rgba(5, 11, 18, .76) 63%, rgba(7, 10, 17, .22) 100%),
    linear-gradient(0deg, rgba(3, 8, 13, .98) 0%, transparent 58%);
}
.league-home-page .league-hero .hero-copy {
  min-height: 540px;
  justify-content: center;
  padding: clamp(44px, 6vw, 76px) clamp(360px, 33vw, 430px) clamp(44px, 6vw, 76px) clamp(30px, 5vw, 68px);
}
.league-home-page .league-hero .hero-copy::before { display: none; }
.league-home-page .league-hero .hero-copy h1 {
  max-width: 680px;
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.02;
  text-wrap: balance;
  text-shadow: 0 3px 24px #000;
}
.league-home-page .league-hero .hero-copy > p:not(.eyebrow):not(.league-home-hero-rule) {
  max-width: 650px;
  color: #d7e5ea;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.58;
  text-shadow: 0 2px 14px #000;
}
.league-home-hero-rule {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  max-width: 650px;
  margin: 20px 0 0;
  padding: 14px 16px;
  border-block: 1px solid #426f7b;
  color: #b9cbd3;
  background: linear-gradient(90deg, rgba(8, 34, 42, .94), rgba(16, 20, 34, .78));
  font-size: 14px;
  line-height: 1.45;
}
.league-home-hero-rule i { color: var(--home-green); font-size: 25px; }
.league-home-hero-rule strong { display: block; margin-bottom: 2px; color: #fff; font-size: 15px; }
.league-home-page .league-hero-facts {
  position: absolute;
  right: clamp(22px, 4vw, 48px);
  bottom: clamp(28px, 5vw, 58px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  width: min(320px, 27vw);
  margin: 0;
  padding-top: 3px;
  border-top: 3px solid var(--home-gold);
  background: #3b3d46;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .36);
}
.league-home-page .league-hero-facts span {
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0 12px;
  min-height: 68px;
  align-content: center;
  padding: 11px 14px;
  border: 0;
  border-radius: 0;
}
.league-home-page .league-hero-facts span > i {
  grid-row: 1 / 3;
  align-self: center;
  color: var(--home-gold);
  font-size: 23px;
}
.league-home-page .league-hero-facts span:nth-child(2) > i { color: var(--home-cyan); }
.league-home-page .league-hero-facts span:nth-child(3) > i { color: var(--home-violet); }
.league-home-page .league-hero-facts span:nth-child(4) > i { color: var(--home-green); }
.league-home-page .league-hero-facts b { font-size: .92rem; }
.league-home-page .league-hero-facts small { font-size: .62rem; }
.league-home-page .league-hero-facts span:nth-child(1) { border-color: rgba(229, 185, 85, .48); background: rgba(40, 31, 12, .78); }
.league-home-page .league-hero-facts span:nth-child(2) { border-color: rgba(97, 220, 229, .42); background: rgba(10, 37, 42, .78); }
.league-home-page .league-hero-facts span:nth-child(3) { border-color: rgba(173, 135, 240, .45); background: rgba(30, 22, 48, .8); }
.league-home-page .league-hero-facts span:nth-child(4) { border-color: rgba(100, 215, 158, .45); background: rgba(12, 39, 29, .8); }
.league-home-page .league-hero-facts span:nth-child(1) small { color: #e8c778; }
.league-home-page .league-hero-facts span:nth-child(2) small { color: #8ce8ee; }
.league-home-page .league-hero-facts span:nth-child(3) small { color: #c2a8f4; }
.league-home-page .league-hero-facts span:nth-child(4) small { color: #8be4b7; }
.league-home-page .league-home-command {
  border-color: #403a4c;
  background: #0c1219;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}
.league-home-page .league-home-command-grid > a {
  --home-card-tone: var(--home-cyan);
  border-color: color-mix(in srgb, var(--home-card-tone) 38%, #27323c);
  border-top-color: var(--home-card-tone);
  background: color-mix(in srgb, var(--home-card-tone) 7%, #101820);
}
.league-home-page .league-home-command-grid > a.is-draft { --home-card-tone: var(--home-violet); }
.league-home-page .league-home-command-grid > a.is-play { --home-card-tone: var(--home-gold); }
.league-home-page .league-home-command-grid > a:is(:hover, :focus-visible) {
  border-color: var(--home-card-tone);
  background: color-mix(in srgb, var(--home-card-tone) 13%, #101820);
}
.league-home-page .league-home-command-grid > a small,
.league-home-page .league-home-command-grid > a b { color: var(--home-card-tone); }
.league-home-page .league-home-release { border-color: #3d3946; background: #10141b; }
.league-home-page .league-home-release > div:nth-child(1) { border-left: 3px solid var(--home-green); background: rgba(100, 215, 158, .045); }
.league-home-page .league-home-release > div:nth-child(2) { border-left: 3px solid var(--home-violet); background: rgba(173, 135, 240, .05); }
.league-home-page .league-home-release > div:nth-child(3) { border-left: 3px solid var(--home-gold); background: rgba(229, 185, 85, .045); }
.league-home-page .league-home-reference-strip { border-color: #3c3942; background: #3c3942; }
.league-home-page .league-home-reference-strip > span,
.league-home-page .league-home-reference-strip a { background: #10151c; }
.league-home-page .league-home-reference-strip a { --reference-tone: var(--home-cyan); }
.league-home-page .league-home-reference-strip a:nth-of-type(2) { --reference-tone: var(--home-rose); }
.league-home-page .league-home-reference-strip a:nth-of-type(3) { --reference-tone: var(--home-gold); }
.league-home-page .league-home-reference-strip a:nth-of-type(4) { --reference-tone: var(--home-green); }
.league-home-page .league-home-reference-strip a:nth-of-type(5) { --reference-tone: var(--home-violet); }
.league-home-page .league-home-reference-strip a:nth-of-type(6) { --reference-tone: #c6d0d8; }
.league-home-page .league-home-reference-strip a:nth-of-type(7) { --reference-tone: #a99af4; }
.league-home-page .league-home-reference-strip a > b {
  border-color: color-mix(in srgb, var(--reference-tone) 56%, #33414b);
  color: var(--reference-tone);
  background: color-mix(in srgb, var(--reference-tone) 10%, #111820);
}
.league-home-page .league-home-reference-strip a:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--reference-tone) 9%, #111820);
}
.league-home-page .league-tool-finder {
  border-color: #4a4057;
  border-top-color: var(--home-violet);
  background: linear-gradient(110deg, rgba(173, 135, 240, .11), #0d151b 42%, rgba(229, 185, 85, .08));
}
.league-home-page .league-tool-segments button:nth-child(1) i { color: #d7e1e6; }
.league-home-page .league-tool-segments button:nth-child(2) i { color: var(--home-cyan); }
.league-home-page .league-tool-segments button:nth-child(3) i { color: var(--home-gold); }
.league-home-page .league-tool-segments button:nth-child(4) i { color: var(--home-violet); }
.league-home-page .league-tool-group.is-primary { --group-tone: var(--home-cyan); }
.league-home-page .league-tool-group.is-learning { --group-tone: var(--home-gold); }
.league-home-page .league-tool-group.is-reference { --group-tone: var(--home-violet); }

@media (max-width: 820px) {
  .league-home-page .league-hero { min-height: 0; }
  .league-home-page .league-hero .hero-copy {
    min-height: 0;
    padding: 44px 24px 24px;
  }
  .league-home-page .league-hero-facts {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-top: 20px;
  }
  .league-home-page .league-hero-facts span { min-height: 62px; }
}
@media (max-width: 520px) {
  .league-home-page .league-hero .hero-copy { padding: 34px 18px 20px; }
  .league-home-page .league-hero .hero-copy h1 { font-size: clamp(38px, 12vw, 48px); }
  .league-home-hero-rule { grid-template-columns: 34px minmax(0, 1fr); padding: 12px; }
  .league-home-page .league-hero-facts span { grid-template-columns: 30px minmax(0, 1fr); gap: 0 8px; padding: 9px; }
  .league-home-page .league-hero-facts span > i { font-size: 19px; }
}

.beginner-session-track article {
  --mode-tone: #62dce5;
  display: flex;
  flex-direction: column;
  border-top: 3px solid var(--mode-tone);
  background: color-mix(in srgb, var(--mode-tone) 6%, #0a121b);
}
.beginner-session-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.beginner-session-track article.is-ai { --mode-tone: #69d59d; }
.beginner-session-track article.is-swift { --mode-tone: #e9ba55; }
.beginner-session-track article.is-draft { --mode-tone: #ad87ef; }
.beginner-mode-icon {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0 0 20px;
}
.beginner-mode-icon > i {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--mode-tone) 68%, #34434e);
  border-radius: 6px;
  color: var(--mode-tone);
  background: transparent;
  box-shadow: none;
  font-size: 1.25rem;
}
.beginner-mode-icon > b {
  color: var(--mode-tone);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}
.beginner-session-track article > small { color: var(--mode-tone); }
.beginner-session-track article > strong { border-top-color: color-mix(in srgb, var(--mode-tone) 30%, #253848); }
@media (max-width: 600px) {
  .beginner-mode-icon { margin-bottom: 17px; }
  .beginner-mode-icon > i { width: 46px; height: 46px; font-size: 1.15rem; }
}
@media (max-width: 1180px) {
  .beginner-session-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beginner-session-track article:nth-child(2) { border-right: 0; }
  .beginner-session-track article:nth-child(-n+2) { border-bottom: 1px solid var(--beginner-line); }
}
@media (max-width: 720px) {
  .beginner-session-track { grid-template-columns: minmax(0, 1fr); }
  .beginner-session-track article { border-right: 0; border-bottom: 1px solid var(--beginner-line); }
  .beginner-session-track article:last-child { border-bottom: 0; }
}
/* Matchmaking guide */
.matchmaking-page main{width:min(1440px,calc(100% - 32px));margin:0 auto 72px}.matchmaking-hero{position:relative;min-height:510px;display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:end;gap:32px;padding:clamp(32px,5vw,72px);overflow:hidden;border:1px solid #2b5867;background:#07131b}.matchmaking-hero>img,.matchmaking-hero-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.matchmaking-hero>img{object-position:center 28%}.matchmaking-hero-shade{background:linear-gradient(90deg,rgba(3,10,17,.97) 0%,rgba(3,10,17,.88) 48%,rgba(8,12,22,.58) 100%),linear-gradient(0deg,rgba(3,10,17,.94),transparent 55%)}.matchmaking-hero-copy,.matchmaking-hero aside{position:relative;z-index:1}.matchmaking-hero-copy{max-width:790px}.matchmaking-hero h1{max-width:760px;margin:8px 0 16px;font-size:clamp(42px,5vw,76px);line-height:1.01;letter-spacing:0;color:#fff}.matchmaking-hero-copy>p:not(.eyebrow){max-width:720px;color:#c7d5df;font-size:clamp(18px,1.5vw,22px);line-height:1.58}.matchmaking-hero aside{display:grid;gap:12px}.matchmaking-hero aside article{display:flex;align-items:center;gap:14px;min-width:0;padding:16px;border:1px solid #396270;background:rgba(5,17,25,.9);box-shadow:0 14px 36px rgba(0,0,0,.25)}.matchmaking-hero aside article>i{display:grid;place-items:center;width:46px;height:46px;color:#ff709e;font-size:25px}.matchmaking-hero aside span{display:grid;gap:4px;min-width:0}.matchmaking-hero aside small{color:#7fa3b3;text-transform:uppercase;font-weight:800}.matchmaking-hero aside strong{color:#fff;font-size:16px;line-height:1.25}.matchmaking-jumps{display:flex;align-items:center;gap:8px;margin:18px 0 34px;padding:12px 0;overflow-x:auto;scrollbar-width:thin}.matchmaking-jumps strong{padding:10px 8px;color:#8098a7;white-space:nowrap}.matchmaking-jumps a{flex:0 0 auto;padding:10px 15px;border:1px solid #31505d;color:#d6e4eb;background:#0b1821;text-decoration:none;font-weight:800}.matchmaking-jumps a:hover{border-color:#58dbe4;color:#fff}.matchmaking-answers,.matchmaking-section,.matchmaking-faq,.matchmaking-sources{margin:28px 0;padding:clamp(24px,4vw,48px);border:1px solid #263e4b;background:#09141d}.matchmaking-answers>header,.matchmaking-section>header,.matchmaking-faq>header,.matchmaking-sources>header{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:26px}.matchmaking-answers h2,.matchmaking-section h2,.matchmaking-faq h2,.matchmaking-sources h2{margin:3px 0 0;color:#fff;font-size:clamp(28px,3vw,42px);line-height:1.08}.matchmaking-section>header>p,.matchmaking-sources>header>p{max-width:600px;margin:0;color:#93a9b8;font-size:17px;line-height:1.6}.matchmaking-answers>div{display:grid;grid-template-columns:1fr 1fr;gap:16px}.matchmaking-answers article{display:flex;align-items:flex-start;gap:20px;min-width:0;padding:24px;border-top:4px solid #ffca54;background:#101824}.matchmaking-answers article.is-rose{border-color:#ff5f93;background:#1b111b}.matchmaking-answers article>i{flex:0 0 auto;font-size:34px;color:#ffca54}.matchmaking-answers article.is-rose>i{color:#ff709e}.matchmaking-answers article span{min-width:0}.matchmaking-answers small{color:#9ab0be;font-weight:800;text-transform:uppercase}.matchmaking-answers h3{margin:4px 0 8px;color:#fff;font-size:32px}.matchmaking-answers p{margin:0;color:#c0ced7;line-height:1.6}.matchmaking-factor-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.matchmaking-factor-grid article{position:relative;min-width:0;padding:22px;border:1px solid #294552;border-top:3px solid #4ddce2;background:#0d1a23}.matchmaking-factor-grid article>i{display:block;margin:34px 0 14px;color:#53dce4;font-size:30px}.matchmaking-factor-grid .league-step-number{position:absolute;top:16px;right:16px}.matchmaking-factor-grid h3{margin:0 0 8px;color:#fff;font-size:21px}.matchmaking-factor-grid p{margin:0;color:#9fb2be;line-height:1.55}.matchmaking-equation{display:flex;align-items:center;gap:18px;margin-top:16px;padding:20px;border-left:4px solid #f1b943;background:#17180f}.matchmaking-equation>i{color:#f1b943;font-size:34px}.matchmaking-equation strong{color:#fff;font-size:18px}.matchmaking-equation p{margin:5px 0 0;color:#b7c2c4;line-height:1.5}.matchmaking-section.is-violet{border-color:#47396f;background:#100e1d}.matchmaking-queue-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.matchmaking-queue-grid article{display:flex;align-items:flex-start;gap:18px;min-width:0;padding:22px;border:1px solid #3c3761;background:#151329}.matchmaking-queue-grid article.is-warning{border-color:#7b5a27;background:#20190f}.matchmaking-queue-grid article>i{flex:0 0 auto;color:#b699ff;font-size:30px}.matchmaking-queue-grid article.is-warning>i{color:#ffc857}.matchmaking-queue-grid span{min-width:0}.matchmaking-queue-grid small{color:#a89cd0;font-weight:800;text-transform:uppercase}.matchmaking-queue-grid strong{display:block;margin:5px 0 8px;color:#fff;font-size:23px}.matchmaking-queue-grid p{margin:0;color:#b8b3cc;line-height:1.55}.matchmaking-party-callout{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.5fr);align-items:center;gap:12px;margin-top:18px;padding:18px;border:1px solid #55477b;background:#0b0d18}.matchmaking-party-callout>div{display:flex;align-items:center;gap:13px;min-width:0}.matchmaking-party-callout>div>b{display:grid;place-items:center;flex:0 0 auto;width:46px;height:46px;border:2px solid #58dfe4;color:#fff;background:#10252d;font-size:22px}.matchmaking-party-callout>div.is-unknown>b{border-color:#f0b94d;background:#2b2110}.matchmaking-party-callout span{display:grid;min-width:0}.matchmaking-party-callout small{color:#849aaa}.matchmaking-party-callout strong{color:#fff;line-height:1.25}.matchmaking-party-callout>i{color:#6f7890;font-size:20px}.matchmaking-section.is-cyan{border-color:#245d67;background:#08181d}.matchmaking-compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.matchmaking-compare article{padding:24px;border:1px solid #28545e;background:#0b2026}.matchmaking-compare i{color:#4ce0e5;font-size:30px}.matchmaking-compare h3{margin:14px 0 8px;color:#fff;font-size:23px}.matchmaking-compare p{margin:0;color:#a8bec4;line-height:1.55}.matchmaking-section.is-green{border-color:#315f4b;background:#0b1714}.matchmaking-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}.matchmaking-flow li{display:flex;align-items:flex-start;gap:15px;padding:22px;border:1px solid #315c4c;background:#102019}.matchmaking-flow li div{min-width:0}.matchmaking-flow strong{color:#fff;font-size:19px}.matchmaking-flow p{margin:7px 0 0;color:#a7beb4;line-height:1.55}.matchmaking-section.is-rose{border-color:#613247;background:#190f17}.matchmaking-myths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.matchmaking-myths article{padding:20px;border-left:3px solid #ff6e9b;background:#21131c}.matchmaking-myths strong{display:block;color:#fff;font-size:18px;line-height:1.35}.matchmaking-myths p{margin:8px 0 0;color:#c4aeb7;line-height:1.5}.matchmaking-faq>div{display:grid;gap:8px}.matchmaking-faq details{border:1px solid #2b4653;background:#0d1a23}.matchmaking-faq summary{display:flex;justify-content:space-between;gap:16px;padding:18px 20px;color:#fff;font-weight:800;cursor:pointer;list-style:none}.matchmaking-faq summary::-webkit-details-marker{display:none}.matchmaking-faq details[open] summary i{transform:rotate(45deg)}.matchmaking-faq details p{margin:0;padding:0 20px 20px;color:#aebfc8;line-height:1.6}.matchmaking-sources>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.matchmaking-sources a{display:flex;align-items:center;gap:16px;min-width:0;padding:18px;border:1px solid #32505d;background:#0d1a23;color:inherit;text-decoration:none}.matchmaking-sources a:hover{border-color:#4bdde4;background:#10232d}.matchmaking-sources a>i:first-child{flex:0 0 auto;color:#4bdde4;font-size:26px}.matchmaking-sources a>i:last-child{margin-left:auto;color:#718b98}.matchmaking-sources a span{display:grid;gap:4px;min-width:0}.matchmaking-sources a strong{color:#fff}.matchmaking-sources a small{color:#93a9b5;line-height:1.4}
@media(max-width:980px){.matchmaking-hero{grid-template-columns:1fr;min-height:600px}.matchmaking-hero aside{grid-template-columns:1fr 1fr}.matchmaking-factor-grid,.matchmaking-myths{grid-template-columns:repeat(2,minmax(0,1fr))}.matchmaking-flow{grid-template-columns:1fr}.matchmaking-party-callout{grid-template-columns:1fr}.matchmaking-party-callout>i{transform:rotate(90deg);justify-self:center}}
@media(max-width:680px){.matchmaking-page main{width:min(100% - 18px,1440px)}.matchmaking-hero{min-height:680px;padding:26px 20px}.matchmaking-hero h1{font-size:40px}.matchmaking-hero aside,.matchmaking-answers>div,.matchmaking-queue-grid,.matchmaking-compare,.matchmaking-factor-grid,.matchmaking-myths,.matchmaking-sources>div{grid-template-columns:1fr}.matchmaking-answers,.matchmaking-section,.matchmaking-faq,.matchmaking-sources{padding:24px 18px}.matchmaking-answers>header,.matchmaking-section>header,.matchmaking-faq>header,.matchmaking-sources>header{align-items:flex-start;flex-direction:column}.matchmaking-answers article{padding:20px}.matchmaking-party-callout{padding:14px}.matchmaking-jumps{margin-bottom:22px}}

/* Matchmaking visual polish */
.matchmaking-page {
  --mm-cyan: #59dce5;
  --mm-violet: #b18af2;
  --mm-gold: #efbd54;
  --mm-green: #65d89c;
  --mm-rose: #f2769e;
}
.matchmaking-page .matchmaking-hero { border-bottom: 4px solid var(--mm-cyan); box-shadow: 0 24px 60px rgba(0,0,0,.32); }
.matchmaking-page .matchmaking-jumps a { border-radius: 999px; }
.matchmaking-fact-strip {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 1px;
  margin: 0 0 28px;
  border: 1px solid #34444e;
  background: #34444e;
}
.matchmaking-fact-strip article {
  --fact-tone: var(--mm-cyan);
  display: grid;
  grid-template-columns: 46px minmax(0,1fr);
  gap: 14px;
  min-width: 0;
  padding: 22px 20px;
  border-top: 4px solid var(--fact-tone);
  background: color-mix(in srgb,var(--fact-tone) 7%,#0b141c);
}
.matchmaking-fact-strip article.is-rose { --fact-tone: var(--mm-rose); }
.matchmaking-fact-strip article.is-gold { --fact-tone: var(--mm-gold); }
.matchmaking-fact-strip article.is-violet { --fact-tone: var(--mm-violet); }
.matchmaking-fact-strip article > i { display:grid; width:46px; height:46px; place-items:center; color:var(--fact-tone); font-size:1.45rem; }
.matchmaking-fact-strip article span { display:grid; align-content:start; gap:4px; min-width:0; }
.matchmaking-fact-strip small { color:var(--fact-tone); font-size:.72rem; font-weight:950; text-transform:uppercase; }
.matchmaking-fact-strip strong { color:#fff; font-size:1.07rem; line-height:1.25; }
.matchmaking-fact-strip p { margin:2px 0 0; color:#aebec8; font-size:.9rem; line-height:1.45; }
.matchmaking-journey {
  margin: 28px 0;
  padding: clamp(24px,4vw,44px);
  border-block: 1px solid #3a4953;
  background: #0a1219;
}
.matchmaking-journey > header { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.matchmaking-journey h2 { margin:3px 0 0; color:#fff; font-size:clamp(28px,3vw,42px); line-height:1.08; }
.matchmaking-journey > header > p { max-width:520px; margin:0; color:#9fb1bd; line-height:1.55; }
.matchmaking-journey ol { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0; padding:0; list-style:none; }
.matchmaking-journey li {
  --journey-tone:var(--mm-cyan);
  position:relative;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:12px;
  min-width:0;
  padding:20px 18px;
  border:1px solid color-mix(in srgb,var(--journey-tone) 45%,#34434c);
  border-top:3px solid var(--journey-tone);
  background:color-mix(in srgb,var(--journey-tone) 6%,#0c161e);
}
.matchmaking-journey li.is-violet { --journey-tone:var(--mm-violet); }
.matchmaking-journey li.is-gold { --journey-tone:var(--mm-gold); }
.matchmaking-journey li.is-green { --journey-tone:var(--mm-green); }
.matchmaking-journey li > b { display:grid; width:34px; height:34px; place-items:center; border:1px solid var(--journey-tone); color:var(--journey-tone); background:#0a1118; font-size:1rem; }
.matchmaking-journey li > i { position:absolute; top:65px; left:27px; color:var(--journey-tone); font-size:1.25rem; }
.matchmaking-journey li span { display:grid; gap:5px; min-width:0; }
.matchmaking-journey li small { color:var(--journey-tone); font-weight:900; text-transform:uppercase; }
.matchmaking-journey li strong { color:#fff; font-size:1.05rem; }
.matchmaking-journey li p { margin:0; color:#aabac4; font-size:.91rem; line-height:1.48; }
.matchmaking-answers article { position:relative; overflow:hidden; border-inline:1px solid color-mix(in srgb,currentColor 22%,#303c46); }
.matchmaking-answers article::after { content:""; position:absolute; inset:auto 0 0; height:3px; background:currentColor; opacity:.55; }
.matchmaking-answers article.is-rose { color:var(--mm-rose); }
.matchmaking-answers article.is-gold { color:var(--mm-gold); }
.matchmaking-answers h3 { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.matchmaking-answers h3 b { color:#fff; font:inherit; }
.matchmaking-answers h3 em { padding:6px 9px; border:1px solid currentColor; color:currentColor; background:transparent; font-size:.69rem; font-style:normal; font-weight:950; text-transform:uppercase; }
.matchmaking-answers p { color:#c7d3da; }
.matchmaking-factor-grid article:nth-child(2) { border-top-color:var(--mm-violet); }
.matchmaking-factor-grid article:nth-child(2)>i { color:var(--mm-violet); }
.matchmaking-factor-grid article:nth-child(3) { border-top-color:var(--mm-gold); }
.matchmaking-factor-grid article:nth-child(3)>i { color:var(--mm-gold); }
.matchmaking-factor-grid article:nth-child(4) { border-top-color:var(--mm-green); }
.matchmaking-factor-grid article:nth-child(4)>i { color:var(--mm-green); }
.matchmaking-known-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.matchmaking-known-grid article { display:flex; gap:15px; min-width:0; padding:20px; border-left:4px solid var(--mm-green); background:#101b17; }
.matchmaking-known-grid article.is-hidden { border-color:var(--mm-rose); background:#1d1219; }
.matchmaking-known-grid article > i { flex:0 0 auto; color:var(--mm-green); font-size:1.5rem; }
.matchmaking-known-grid article.is-hidden > i { color:var(--mm-rose); }
.matchmaking-known-grid span { display:grid; gap:5px; min-width:0; }
.matchmaking-known-grid small { color:#91a7b3; font-size:.72rem; font-weight:900; text-transform:uppercase; }
.matchmaking-known-grid strong { color:#fff; font-size:1.05rem; }
.matchmaking-known-grid p { margin:0; color:#adbdc6; line-height:1.5; }
.matchmaking-modes { border-color:#4d3d65; border-top:4px solid var(--mm-violet); background:#0d101a; }
.matchmaking-mode-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.matchmaking-mode-grid article {
  --mode-tone:var(--mm-cyan);
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:13px;
  min-width:0;
  padding:21px 18px;
  border:1px solid color-mix(in srgb,var(--mode-tone) 43%,#35414a);
  border-top:3px solid var(--mode-tone);
  background:color-mix(in srgb,var(--mode-tone) 6%,#10161e);
}
.matchmaking-mode-grid article.is-ranked { --mode-tone:var(--mm-gold); }
.matchmaking-mode-grid article.is-flex { --mode-tone:var(--mm-violet); }
.matchmaking-mode-grid article.is-draft { --mode-tone:#75a9ff; }
.matchmaking-mode-grid article.is-swift { --mode-tone:#ff996e; }
.matchmaking-mode-grid article.is-aram { --mode-tone:#74d3ff; }
.matchmaking-mode-grid article.is-arena { --mode-tone:var(--mm-rose); }
.matchmaking-mode-grid article.is-coop { --mode-tone:var(--mm-green); }
.matchmaking-mode-grid article.is-custom { --mode-tone:#c2ccd3; }
.matchmaking-mode-grid article > i { display:grid; width:40px; height:40px; place-items:center; color:var(--mode-tone); font-size:1.4rem; }
.matchmaking-mode-grid article span { display:grid; align-content:start; gap:5px; min-width:0; }
.matchmaking-mode-grid small { color:var(--mode-tone); font-size:.69rem; font-weight:950; text-transform:uppercase; }
.matchmaking-mode-grid h3 { margin:0; color:#fff; font-size:1.3rem; line-height:1.15; }
.matchmaking-mode-grid strong { color:#dce7ed; font-size:.91rem; line-height:1.35; }
.matchmaking-mode-grid p { margin:2px 0 0; color:#aab9c3; font-size:.9rem; line-height:1.5; }
.matchmaking-mode-boundary { display:grid; grid-template-columns:46px minmax(0,1fr) auto; gap:16px; align-items:center; margin-top:16px; padding:19px 20px; border-left:4px solid var(--mm-gold); background:#19170f; }
.matchmaking-mode-boundary > i { color:var(--mm-gold); font-size:1.55rem; }
.matchmaking-mode-boundary strong { color:#fff; font-size:1.05rem; }
.matchmaking-mode-boundary p { margin:4px 0 0; color:#b9b9b0; line-height:1.5; }
.matchmaking-mode-boundary a { display:flex; align-items:center; gap:8px; padding:11px 14px; border:1px solid var(--mm-gold); color:#f4d27f; background:#221c0d; text-decoration:none; font-weight:850; white-space:nowrap; }
.matchmaking-mode-boundary a:is(:hover,:focus-visible) { color:#fff; background:#2a220e; }
.matchmaking-myths article { display:grid; align-content:start; gap:8px; border-top:1px solid #643049; }
.matchmaking-myths article:nth-child(3n+2) { border-left-color:var(--mm-gold); }
.matchmaking-myths article:nth-child(3n) { border-left-color:var(--mm-violet); }
.matchmaking-myths article > small { width:max-content; padding:4px 8px; border:1px solid var(--mm-rose); color:var(--mm-rose); font-size:.67rem; font-weight:950; text-transform:uppercase; }
.matchmaking-myths p { margin:0; }
.matchmaking-myths p b { color:#fff; }
.matchmaking-sources { border-color:#3d4b55; border-top:4px solid var(--mm-gold); background:#0a1219; }
.matchmaking-sources > header { display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; gap:18px; margin-bottom:26px; }
.matchmaking-sources > header > i { display:grid; width:56px; height:56px; place-items:center; color:var(--mm-gold); font-size:1.8rem; }
.matchmaking-sources > header > div { min-width:0; }
.matchmaking-sources > header h2 { max-width:850px; }
.matchmaking-sources > header p:not(.eyebrow) { max-width:850px; margin:9px 0 0; color:#a7b8c2; font-size:1rem; line-height:1.55; }
.matchmaking-sources > header > strong { display:flex; align-items:center; gap:8px; padding:10px 13px; border:1px solid var(--mm-gold); color:var(--mm-gold); background:#1d180d; font-size:.76rem; text-transform:uppercase; white-space:nowrap; }
.matchmaking-sources a:nth-child(2) > i:first-child { color:var(--mm-rose); }
.matchmaking-sources a:nth-child(3) > i:first-child { color:var(--mm-gold); }
.matchmaking-sources a:nth-child(4) > i:first-child { color:var(--mm-violet); }
@media(max-width:1050px){
  .matchmaking-fact-strip,.matchmaking-journey ol,.matchmaking-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .matchmaking-journey>header{align-items:flex-start;flex-direction:column}
  .matchmaking-known-grid{grid-template-columns:1fr}
  .matchmaking-sources>header{grid-template-columns:48px minmax(0,1fr)}
  .matchmaking-sources>header>i{width:46px;height:46px}
  .matchmaking-sources>header>strong{grid-column:1/-1;width:max-content}
  .matchmaking-mode-boundary{grid-template-columns:42px minmax(0,1fr)}
  .matchmaking-mode-boundary a{grid-column:1/-1;width:100%;justify-content:center;white-space:normal;text-align:center}
}
@media(max-width:560px){
  .matchmaking-fact-strip,.matchmaking-journey ol,.matchmaking-mode-grid{grid-template-columns:1fr}
  .matchmaking-fact-strip article{padding:18px 16px}
  .matchmaking-journey{padding:24px 16px}
  .matchmaking-journey li{padding:18px 15px}
  .matchmaking-answers article{display:grid;grid-template-columns:42px minmax(0,1fr);gap:13px}
  .matchmaking-answers article>i{font-size:29px}
  .matchmaking-answers h3{font-size:27px}
}

/* Gifting guide */
.gifting-page{--gift-cyan:#56e0e7;--gift-violet:#af8af3;--gift-gold:#f2bd52;--gift-rose:#ff7398;background:#050a10;color:#edf7fa}
.gifting-page main{width:min(1400px,calc(100% - 32px));margin:0 auto 72px}.gifting-page :is(h1,h2,h3,p,strong,small,span,li,a){min-width:0;overflow-wrap:break-word}
.gifting-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:end;gap:28px;min-height:500px;padding:clamp(32px,6vw,72px);overflow:hidden;border:1px solid #455363;border-bottom:4px solid var(--gift-gold);background:#0b121b}
.gifting-hero>img,.gifting-hero-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.gifting-hero>img{object-position:center 24%}.gifting-hero-shade{background:linear-gradient(90deg,rgba(3,9,15,.98) 0%,rgba(3,9,15,.9) 50%,rgba(18,10,23,.57) 100%),linear-gradient(0deg,rgba(3,9,15,.96),transparent 62%)}
.gifting-hero-copy,.gifting-hero aside{position:relative;z-index:1}.gifting-hero-copy{max-width:800px}.gifting-hero h1{max-width:760px;margin:7px 0 16px;color:#fff;font-size:clamp(44px,6vw,82px);line-height:.98;letter-spacing:0}.gifting-hero-copy>p:not(.eyebrow){max-width:720px;margin:0;color:#c6d3dc;font-size:clamp(17px,1.6vw,22px);line-height:1.6}.gifting-hero aside{display:grid;gap:11px}.gifting-hero aside article{display:flex;align-items:center;gap:13px;padding:17px;border:1px solid #745d2d;background:rgba(24,18,8,.92)}.gifting-hero aside article:last-child{border-color:#75405a;background:rgba(30,12,20,.92)}.gifting-hero aside article>i{display:grid;place-items:center;width:48px;height:48px;color:var(--gift-rose);font-size:27px}.gifting-hero aside span{display:grid;gap:3px}.gifting-hero aside small{color:#ae9a6c;font-weight:850;text-transform:uppercase}.gifting-hero aside article:last-child small{color:#c793a6}.gifting-hero aside strong{color:#fff;font-size:17px}
.gifting-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin:16px 0 46px}.gifting-facts article{display:grid;grid-template-columns:50px minmax(0,1fr);gap:13px;align-items:start;padding:18px;border:1px solid #2d5260;border-top:3px solid var(--gift-cyan);background:#0b171f}.gifting-facts article.is-violet{border-color:#503f74;border-top-color:var(--gift-violet);background:#141121}.gifting-facts article.is-gold{border-color:#665128;border-top-color:var(--gift-gold);background:#18150d}.gifting-facts article.is-rose{border-color:#6d354c;border-top-color:var(--gift-rose);background:#1a0f17}.gifting-facts article>i{display:grid;place-items:center;width:48px;height:48px;color:var(--gift-cyan);font-size:25px}.gifting-facts .is-violet>i{color:var(--gift-violet)}.gifting-facts .is-gold>i{color:var(--gift-gold)}.gifting-facts .is-rose>i{color:var(--gift-rose)}.gifting-facts span{display:grid;gap:4px}.gifting-facts small{color:#89a3af;font-size:11px;font-weight:850;text-transform:uppercase}.gifting-facts strong{color:#fff;font-size:18px}.gifting-facts p{margin:1px 0 0;color:#97aab5;font-size:14px;line-height:1.45}
.gifting-check,.gifting-limits,.gifting-safety,.gifting-faq,.gifting-sources{margin:28px 0;padding:clamp(24px,4vw,48px);border:1px solid #29414e;background:#09141d}.gifting-check>header,.gifting-limits>header,.gifting-safety>header{display:flex;align-items:end;justify-content:space-between;gap:26px;margin-bottom:24px}.gifting-page h2{margin:3px 0 0;color:#fff;font-size:clamp(29px,4vw,46px);line-height:1.08}.gifting-check>header>p,.gifting-limits>header>p{max-width:590px;margin:0;color:#94a8b5;font-size:16px;line-height:1.55}
.gifting-check ol{display:grid;gap:2px;margin:0;padding:0;border:1px solid #2d4855;list-style:none;background:#263e49}.gifting-check li{display:grid;grid-template-columns:48px 48px minmax(0,1fr);gap:15px;align-items:center;padding:18px;background:#0d1a23}.gifting-check li>i{display:grid;place-items:center;width:46px;height:46px;color:var(--gift-cyan);font-size:24px}.gifting-check li:nth-child(2n)>i{color:var(--gift-violet)}.gifting-check li:nth-child(3)>i,.gifting-check li:nth-child(5)>i{color:var(--gift-gold)}.gifting-check li span{display:grid;gap:3px}.gifting-check li small{color:#819ca9;font-weight:850;text-transform:uppercase}.gifting-check li strong{color:#fff;font-size:19px}.gifting-check li p{margin:2px 0 0;color:#a5b5bf;line-height:1.5}
.gifting-troubleshoot{margin:28px 0;padding:clamp(24px,4vw,48px);border:1px solid #514274;background:#121021}.gifting-troubleshoot>header{display:flex;align-items:end;justify-content:space-between;gap:26px;margin-bottom:24px}.gifting-troubleshoot>header>p{max-width:590px;margin:0;color:#aaa4c2;font-size:16px;line-height:1.55}.gifting-troubleshoot>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:#493c67}.gifting-troubleshoot article{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;padding:21px;background:#171329}.gifting-troubleshoot article>i{color:#b897ff;font-size:28px}.gifting-troubleshoot article span{display:grid;gap:4px}.gifting-troubleshoot article small{color:#a996d2;font-weight:850;text-transform:uppercase}.gifting-troubleshoot article strong{color:#fff;font-size:19px}.gifting-troubleshoot article p{margin:2px 0 0;color:#bbb4ca;line-height:1.5}
.gifting-limits{border-color:#665126;background:#17140c}.gifting-limit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.gifting-limit-grid article{padding:22px;border:1px solid #705a2b;border-top:4px solid var(--gift-gold);background:#211b0e}.gifting-limit-grid article.is-client{border-color:#3c4e70;border-top-color:#799cff;background:#101626}.gifting-limit-grid article>span{display:flex;align-items:center;justify-content:space-between}.gifting-limit-grid article i{color:var(--gift-gold);font-size:29px}.gifting-limit-grid .is-client i{color:#8ba7ff}.gifting-limit-grid article b{color:#fff;font-size:43px}.gifting-limit-grid small{display:block;margin-top:18px;color:#b69b64;font-weight:850;text-transform:uppercase}.gifting-limit-grid h3{margin:4px 0 9px;color:#fff;font-size:23px}.gifting-limit-grid p{margin:0;color:#c3b693;line-height:1.55}.gifting-limit-grid .is-client p{color:#aab5ce}.gifting-limits>aside{display:flex;align-items:flex-start;gap:14px;margin-top:15px;padding:18px;border-left:4px solid var(--gift-violet);background:#171328}.gifting-limits>aside i{color:var(--gift-violet);font-size:24px}.gifting-limits>aside p{margin:0;color:#bbb5cc;line-height:1.55}.gifting-limits>aside strong{color:#fff}
.gifting-safety{border-color:#493a66;background:#110e1d}.gifting-safety>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.gifting-safety article{padding:23px;border:1px solid #2e6652;border-top:4px solid #57d79e;background:#0e1b17}.gifting-safety article.is-warning{border-color:#695329;border-top-color:var(--gift-gold);background:#1c170d}.gifting-safety article.is-danger{border-color:#71354c;border-top-color:var(--gift-rose);background:#1d1018}.gifting-safety article>i{color:#62dda6;font-size:30px}.gifting-safety .is-warning>i{color:var(--gift-gold)}.gifting-safety .is-danger>i{color:var(--gift-rose)}.gifting-safety h3{margin:15px 0 8px;color:#fff;font-size:22px}.gifting-safety p{margin:0;color:#a9bbb4;line-height:1.55}.gifting-safety .is-warning p{color:#c1b597}.gifting-safety .is-danger p{color:#c8aeb7}
.gifting-faq>header{margin-bottom:20px}.gifting-faq>div{display:grid;gap:8px}.gifting-faq details{border:1px solid #2d4b58;background:#0d1a23}.gifting-faq summary{display:flex;justify-content:space-between;gap:15px;padding:18px 20px;color:#fff;font-weight:850;cursor:pointer;list-style:none}.gifting-faq summary::-webkit-details-marker{display:none}.gifting-faq details[open] summary i{transform:rotate(45deg)}.gifting-faq details p{margin:0;padding:0 20px 20px;color:#aebdc6;line-height:1.6}
.gifting-sources{border-color:#315664;background:#08171e}.gifting-sources>header{display:grid;grid-template-columns:58px minmax(0,1fr);gap:16px;align-items:center;margin-bottom:22px}.gifting-sources>header>i{display:grid;place-items:center;width:56px;height:56px;color:var(--gift-cyan);font-size:30px}.gifting-sources>header p:last-child{margin:7px 0 0;color:#98adb7}.gifting-sources>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.gifting-sources a{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;padding:17px;border:1px solid #31515f;background:#0d1c24;color:inherit;text-decoration:none}.gifting-sources a:hover{border-color:var(--gift-cyan);background:#11262e}.gifting-sources a>i:first-child{color:var(--gift-cyan);font-size:24px}.gifting-sources a>i:last-child{color:#81949e}.gifting-sources a span{display:grid;gap:3px}.gifting-sources a strong{color:#fff}.gifting-sources a small{color:#8fa5af;line-height:1.4}
@media(max-width:980px){.gifting-hero{grid-template-columns:1fr;min-height:620px}.gifting-hero aside{grid-template-columns:1fr 1fr}.gifting-facts{grid-template-columns:1fr 1fr}.gifting-limit-grid,.gifting-safety>div,.gifting-sources>div,.gifting-troubleshoot>div{grid-template-columns:1fr}.gifting-check>header,.gifting-limits>header,.gifting-safety>header,.gifting-troubleshoot>header{align-items:flex-start;flex-direction:column}}
@media(max-width:620px){.gifting-page main{width:min(100% - 18px,1400px)}.gifting-hero{min-height:700px;padding:26px 18px}.gifting-hero h1{font-size:42px}.gifting-hero aside,.gifting-facts{grid-template-columns:1fr}.gifting-check,.gifting-limits,.gifting-safety,.gifting-faq,.gifting-sources{padding:24px 16px}.gifting-check li{grid-template-columns:40px minmax(0,1fr);gap:10px}.gifting-check li>i{grid-row:1/3;width:40px;height:40px}.gifting-check li>.league-step-number{display:none}.gifting-sources>header{grid-template-columns:44px minmax(0,1fr)}.gifting-sources>header>i{width:42px;height:42px;font-size:24px}}

/* League chat rules and external-link safety. */
@media(max-width:650px){.chat-rules-page .chat-rules-hero{margin-bottom:4px!important}.chat-rules-page .chat-rules-hero+.chat-link-answer{margin-top:4px!important}}
.chat-rules-page{--chat-cyan:#59dfe8;--chat-gold:#efc85f;--chat-green:#63d8a3;--chat-rose:#f27091;--chat-violet:#b492ff;background:#050a10}.chat-rules-page main{width:min(1400px,calc(100% - 28px));margin:auto}.chat-rules-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,350px);gap:clamp(24px,4vw,56px);align-items:end;min-height:540px;margin:10px 0 28px;padding:clamp(30px,5vw,68px);overflow:hidden;border:1px solid #31515d;background:#071119;box-shadow:inset 5px 0 0 var(--chat-cyan),inset 0 -5px 0 var(--chat-violet)}.chat-rules-hero>img,.chat-rules-hero-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.chat-rules-hero>img{object-position:70% 28%}.chat-rules-hero-shade{background:linear-gradient(90deg,rgba(3,9,14,.99) 0,rgba(4,11,17,.97) 38%,rgba(6,12,18,.82) 61%,rgba(8,11,18,.22) 100%),linear-gradient(0deg,rgba(3,8,13,.98) 0,transparent 54%)}.chat-rules-hero>div,.chat-rules-hero>aside{position:relative;z-index:1}.chat-rules-hero-copy{max-width:690px}.chat-rules-hero h1{max-width:660px;margin:8px 0 18px;color:#fff;font-size:clamp(42px,5vw,64px);line-height:1.02;text-wrap:balance;text-shadow:0 3px 22px #000}.chat-rules-hero-copy>p:not(.eyebrow):not(.chat-rules-hero-rule){max-width:650px;margin:0;color:#d7e5ea;font-size:clamp(17px,1.4vw,20px);line-height:1.58;text-wrap:pretty;text-shadow:0 2px 14px #000}.chat-rules-hero-rule{display:grid;grid-template-columns:40px minmax(0,1fr);gap:13px;align-items:center;max-width:650px;margin:20px 0 0;padding:15px 17px;border-top:1px solid #3f7180;border-bottom:1px solid #3f7180;background:linear-gradient(90deg,rgba(7,31,39,.94),rgba(11,21,31,.78));color:#bed0d8;font-size:15px;line-height:1.45}.chat-rules-hero-rule i{color:var(--chat-green);font-size:27px}.chat-rules-hero-rule strong{display:block;margin-bottom:2px;color:#fff;font-size:16px}.chat-rules-hero aside{display:grid;gap:2px;border-top:3px solid var(--chat-gold);background:#2d4853;box-shadow:0 18px 45px rgba(0,0,0,.32)}.chat-rules-hero aside article{display:grid;grid-template-columns:46px minmax(0,1fr);gap:13px;align-items:center;padding:18px;background:rgba(8,18,25,.95)}.chat-rules-hero aside i{grid-row:1/3;color:var(--chat-gold);font-size:29px}.chat-rules-hero aside article:last-child i{color:var(--chat-rose)}.chat-rules-hero aside span,.chat-rules-hero aside strong{display:block}.chat-rules-hero aside small{color:#9ab2bd;font-weight:850;text-transform:uppercase}.chat-rules-hero aside strong{margin-top:3px;color:#fff;font-size:17px}
.chat-rules-hero>.chat-rules-hero-shade{position:absolute;z-index:0}.chat-rules-hero>div:not(.chat-rules-hero-shade),.chat-rules-hero>aside{position:relative;z-index:1}
.chat-link-answer,.chat-channel-guide,.chat-copy,.chat-safety,.chat-faq,.chat-sources{margin:28px 0;padding:clamp(24px,4vw,48px);border:1px solid #2a4652;background:#09141c}.chat-link-answer>header,.chat-channel-guide>header,.chat-copy>header,.chat-safety>header{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.chat-rules-page h2{margin:4px 0 0;color:#fff;font-size:clamp(30px,4vw,48px);line-height:1.06}.chat-link-answer>header>strong{padding:10px 14px;border:1px solid #34745d;color:#7de1b4;white-space:nowrap}.chat-link-answer>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:#314550}.chat-link-answer article{display:grid;grid-template-columns:50px minmax(0,1fr);gap:14px;padding:24px;background:#0d1921}.chat-link-answer article>i{color:var(--chat-green);font-size:32px}.chat-link-answer .is-warning>i{color:var(--chat-gold)}.chat-link-answer .is-danger>i{color:var(--chat-rose)}.chat-link-answer small{color:#7fdcb5;font-weight:850;text-transform:uppercase}.chat-link-answer .is-warning small{color:#dbbd6c}.chat-link-answer .is-danger small{color:#e787a0}.chat-link-answer h3{margin:5px 0 9px;color:#fff;font-size:22px}.chat-link-answer p{margin:0;color:#aabcc5;line-height:1.55}.chat-link-answer>footer{display:flex;gap:13px;align-items:flex-start;margin-top:2px;padding:17px;border-left:4px solid var(--chat-violet);background:#151226}.chat-link-answer>footer i{color:var(--chat-violet);font-size:23px}.chat-link-answer>footer p{margin:0;color:#bcb5ce}.chat-link-answer>footer strong{color:#fff}
.chat-channel-guide>header>p,.chat-copy>header>p{max-width:590px;margin:0;color:#96abb6;line-height:1.55}.chat-channel-guide>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:#28424e}.chat-channel-guide article{position:relative;padding:24px;background:#0c1921}.chat-channel-guide article>i{display:block;margin:14px 0;color:var(--chat-cyan);font-size:28px}.chat-channel-guide article:nth-child(2)>i{color:var(--chat-violet)}.chat-channel-guide article:nth-child(3)>i{color:var(--chat-gold)}.chat-channel-guide article:nth-child(4)>i{color:var(--chat-green)}.chat-channel-guide h3{margin:0 0 8px;color:#fff;font-size:22px}.chat-channel-guide p{min-height:104px;margin:0;color:#9db0b9;line-height:1.52}.chat-channel-guide small{display:block;margin-top:15px;color:#6fdbdf;font-weight:850;text-transform:uppercase}
.chat-channel-guide article>.league-step-number{display:none!important}.chat-channel-guide article>i{width:42px;height:42px;margin:0 0 18px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;background:transparent}
.chat-copy{border-color:#514172;background:#110f20}.chat-copy>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.chat-copy article{display:grid;grid-template-rows:auto 1fr auto;gap:14px;min-width:0;padding:22px;border:1px solid #4b3e69;background:#171329}.chat-copy article>span{display:flex;align-items:center;gap:10px;color:#d8cbf7;font-weight:900}.chat-copy article>span i{color:var(--chat-violet);font-size:23px}.chat-copy article p{margin:0;padding:15px;border-left:3px solid var(--chat-violet);background:#0d111b;color:#d4dbe2;line-height:1.55;overflow-wrap:anywhere}.chat-copy button{min-height:43px;border:1px solid #705ba0;background:#211a38;color:#dccbff;font-weight:900;cursor:pointer}.chat-copy button:hover{border-color:#b492ff;background:#2b2149}.chat-copy output{display:block;min-height:24px;margin-top:12px;color:#86e7c0;font-weight:800}
.chat-safety{border-color:#66542d;background:#17140c}.chat-safety ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin:0;padding:0;background:#5b4b29;list-style:none}.chat-safety li{padding:20px;background:#201b10}.chat-safety li span{display:block;margin-top:17px}.chat-safety strong{display:block;color:#fff;font-size:18px}.chat-safety p{margin:8px 0 0;color:#c1b898;line-height:1.5}
.chat-faq>header{margin-bottom:20px}.chat-faq>div{display:grid;gap:8px}.chat-faq details{border:1px solid #2d4b58;background:#0d1a23}.chat-faq summary{display:flex;justify-content:space-between;gap:15px;padding:18px 20px;color:#fff;font-weight:850;cursor:pointer;list-style:none}.chat-faq summary::-webkit-details-marker{display:none}.chat-faq details[open] summary i{transform:rotate(45deg)}.chat-faq details p{margin:0;padding:0 20px 20px;color:#aebdc6;line-height:1.6}
.chat-sources{border-color:#315664;background:#08171e}.chat-sources>header{display:grid;grid-template-columns:58px minmax(0,1fr);gap:16px;align-items:center;margin-bottom:22px}.chat-sources>header>i{display:grid;place-items:center;width:56px;height:56px;color:var(--chat-cyan);font-size:30px}.chat-sources>header p:last-child{margin:7px 0 0;color:#98adb7}.chat-sources>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.chat-sources a{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;padding:17px;border:1px solid #31515f;background:#0d1c24;color:inherit;text-decoration:none}.chat-sources a:hover{border-color:var(--chat-cyan);background:#11262e}.chat-sources a>i:first-child{color:var(--chat-cyan);font-size:24px}.chat-sources a>i:last-child{color:#81949e}.chat-sources a span{display:grid;gap:3px}.chat-sources a strong{color:#fff}.chat-sources a small{color:#8fa5af;line-height:1.4}
@media(max-width:1050px){.chat-rules-hero{grid-template-columns:1fr;min-height:0}.chat-rules-hero-shade{background:linear-gradient(90deg,rgba(3,9,14,.99) 0,rgba(4,11,17,.95) 58%,rgba(8,11,18,.42) 100%),linear-gradient(0deg,rgba(3,8,13,.98) 0,transparent 54%)}.chat-rules-hero aside{grid-template-columns:1fr 1fr}.chat-link-answer>div,.chat-copy>div,.chat-sources>div{grid-template-columns:1fr}.chat-channel-guide>div{grid-template-columns:1fr 1fr}.chat-safety ol{grid-template-columns:1fr 1fr}.chat-channel-guide p{min-height:0}}
@media(max-width:650px){.chat-rules-page main{width:min(100% - 18px,1400px)}.chat-rules-hero{gap:16px;padding:27px 17px 20px}.chat-rules-hero>img{object-position:66% center}.chat-rules-hero-shade{background:linear-gradient(90deg,rgba(3,9,14,.98),rgba(5,11,17,.86)),linear-gradient(0deg,rgba(3,8,13,.98) 0,transparent 54%)}.chat-rules-hero h1{font-size:clamp(38px,11vw,48px);line-height:1.03}.chat-rules-hero-copy>p:not(.eyebrow):not(.chat-rules-hero-rule){font-size:17px}.chat-rules-hero-rule{grid-template-columns:34px minmax(0,1fr);margin-top:15px;padding:12px}.chat-rules-hero-rule i{font-size:24px}.chat-rules-hero .league-command-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:16px}.chat-rules-hero .league-command-actions>a{min-height:48px!important;padding:7px 5px!important;font-size:.64rem!important}.chat-rules-hero .league-command-actions>a i{display:none}.chat-rules-hero aside{grid-template-columns:repeat(2,minmax(0,1fr))}.chat-rules-hero aside article{grid-template-columns:30px minmax(0,1fr);gap:8px;padding:12px 10px}.chat-rules-hero aside i{font-size:22px}.chat-rules-hero aside small{font-size:10px}.chat-rules-hero aside strong{font-size:13px;line-height:1.25}.chat-channel-guide>div,.chat-safety ol{grid-template-columns:1fr}.chat-link-answer,.chat-channel-guide,.chat-copy,.chat-safety,.chat-faq,.chat-sources{padding:24px 16px}.chat-link-answer>header,.chat-channel-guide>header,.chat-copy>header,.chat-safety>header{align-items:flex-start;flex-direction:column}.chat-link-answer>header>strong{white-space:normal}.chat-link-answer article{grid-template-columns:40px minmax(0,1fr);padding:19px 15px}.chat-link-answer article>i{font-size:27px}.chat-sources>header{grid-template-columns:44px minmax(0,1fr)}.chat-sources>header>i{width:42px;height:42px;font-size:24px}}

/* Shared first-screen rhythm for the larger League guides. */
:is(.modes-hero,.objectives-hero,.conduct-hero,.reporting-hero,.companion-release-hero,.beginner-hero,.jungle-hero) > * {
  min-width: 0;
}
:is(.modes-hero,.objectives-hero,.conduct-hero,.reporting-hero,.companion-release-hero,.beginner-hero,.jungle-hero) h1 {
  max-width: 760px;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
:is(.modes-hero,.objectives-hero,.conduct-hero,.reporting-hero,.companion-release-hero,.beginner-hero,.jungle-hero) p {
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
@media (min-width: 901px) {
  .modes-hero { min-height: 520px; }
  .modes-hero-copy { padding-block-start: clamp(52px, 6vw, 82px); }
  .modes-hero-copy h1,
  .conduct-hero h1,
  .reporting-hero h1,
  .companion-release-copy h1,
  .beginner-hero-copy h1,
  .jungle-hero h1 { font-size: clamp(2.8rem, 5vw, 4rem); line-height: 1; }
  .conduct-hero { min-height: 520px; }
  .reporting-hero { min-height: 500px; }
  .reporting-hero > div { padding: 56px; }
  .companion-release-hero { gap: 34px; min-height: 480px; padding: 42px; }
  .beginner-hero { min-height: 580px; }
  .beginner-hero-copy { padding: 74px 60px; }
  .jungle-hero { min-height: 520px; }
}
@media (max-width: 720px) {
  .modes-hero {
    display: flex;
    min-height: 0;
    flex-direction: column;
  }
  .modes-hero-copy {
    width: auto;
    padding: 42px 20px 22px;
  }
  .modes-hero-copy h1 { font-size: clamp(2.45rem, 12vw, 3.15rem); }
  .modes-hero > aside {
    position: relative;
    right: auto;
    bottom: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: auto;
    margin: 0 20px 20px;
  }
  .modes-hero > aside article {
    display: grid;
    justify-items: start;
    gap: 8px;
    padding: 11px;
  }
  .modes-hero > aside .league-step-number { width: 34px; height: 34px; flex-basis: 34px; }
  .conduct-hero-copy { min-height: 400px; padding: 150px 18px 20px; }
  .conduct-verdict article { padding: 13px 15px; }
  .conduct-verdict article p { display: none; }
  .reporting-hero { min-height: 0; }
  .reporting-hero > div { padding: 40px 20px 24px; }
  .reporting-hero h1 { font-size: clamp(2.45rem, 11vw, 3.1rem); line-height: 1.02; }
  .reporting-hero > aside { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 16px 20px; }
  .reporting-hero > aside article { padding: 13px 10px; }
  .reporting-hero > aside article strong { display: none; }
  .companion-release-hero { gap: 22px; min-height: 0; padding: 34px 20px 22px; }
  .companion-release-copy h1 { font-size: clamp(2.45rem, 11vw, 3.15rem); line-height: 1; }
  .companion-app-roster,
  .companion-app-grid,
  .companion-app-preview { display: none; }
  .companion-app-status { padding-bottom: 12px; }
  .beginner-hero { height: 650px; }
  .beginner-hero-copy { padding: 190px 20px 22px; }
  .beginner-hero-copy h1 { font-size: clamp(2.4rem, 11vw, 2.9rem); }
  .jungle-hero { min-height: 580px; }
  .objectives-hero { display: block; min-height: 0; padding: 34px 20px 24px; }
  .objectives-hero .objective-path { display: none; }
  .objectives-hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .objectives-hero-actions a { min-width: 0; padding-inline: 10px; text-align: center; }
  .objectives-hero-actions a:last-child { grid-column: 1 / -1; }
}
@media (max-width: 430px) {
  .modes-hero > aside { grid-template-columns: 1fr; }
  .modes-hero > aside article { grid-template-columns: 34px minmax(0, 1fr); align-items: center; }
  .reporting-hero > aside { grid-template-columns: 1fr; }
}

/* v182: readable, colour-coded champion matchup directory. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.champion-page .champion-lane-directory {
  margin-top: 20px;
  padding: 0 0 22px;
  overflow: hidden;
  border: 1px solid #3d3442;
  border-radius: 7px;
  background: #0a1018;
  box-shadow: inset 4px 0 #c491f4;
}
.champion-page .champion-lane-directory > header {
  padding: 22px 24px;
  border-bottom: 1px solid #3c3440;
  background: linear-gradient(110deg, rgba(196, 145, 244, .11), rgba(238, 187, 91, .07) 60%, transparent);
}
.champion-page .champion-lane-directory > header .eyebrow { color: #d0a4fb; }
.champion-page .champion-lane-directory > header h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); }
.champion-page .champion-lane-directory > header p { max-width: 820px; color: #aeb8c2; font-size: .77rem; }
.champion-page .champion-lane-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
.champion-page .champion-lane-summary span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid rgba(196, 145, 244, .25);
  border-radius: 5px;
  color: #b9c2cb;
  background: rgba(10, 14, 21, .72);
  font-size: .59rem;
}
.champion-page .champion-lane-summary span:nth-child(2) { border-color: rgba(99, 214, 154, .27); }
.champion-page .champion-lane-summary span:nth-child(3) { border-color: rgba(148, 160, 172, .25); }
.champion-page .champion-lane-summary b { color: #f3d28e; font-size: .72rem; }
.champion-page .champion-lane-directory > header label {
  padding: 12px;
  border: 1px solid rgba(238, 187, 91, .32);
  border-radius: 6px;
  background: rgba(42, 31, 19, .42);
}
.champion-page .champion-lane-directory > header label span { color: #f0c774; }
.champion-page .champion-lane-directory > header input {
  min-height: 46px;
  border-color: rgba(238, 187, 91, .34);
  background: #0b0e13;
}
.champion-page .champion-lane-directory > header input:focus {
  border-color: #efc36c;
  outline-color: rgba(239, 195, 108, .42);
}
.champion-page .champion-lane-filters {
  gap: 9px;
  margin: 16px 20px 0;
}
.champion-page .champion-lane-filters button {
  --filter-color: #b995ed;
  --filter-rgb: 185, 149, 237;
  min-height: 78px;
  padding: 12px 13px;
  border-color: rgba(var(--filter-rgb), .3);
  border-left: 3px solid var(--filter-color);
  background: linear-gradient(120deg, rgba(var(--filter-rgb), .1), #10161e 66%);
}
.champion-page .champion-lane-filters button:nth-child(2) { --filter-color: #63d69a; --filter-rgb: 99, 214, 154; }
.champion-page .champion-lane-filters button:nth-child(3) { --filter-color: #a7b1bb; --filter-rgb: 167, 177, 187; }
.champion-page .champion-lane-filters button:nth-child(4) { --filter-color: #ef7898; --filter-rgb: 239, 120, 152; }
.champion-page .champion-lane-filters button strong {
  color: #edf2f6;
  font-size: .72rem;
  white-space: normal;
}
.champion-page .champion-lane-filters button span {
  min-width: 31px;
  height: 31px;
  color: #0b1017;
  background: var(--filter-color);
}
.champion-page .champion-lane-filters button small { color: #99a6b1; font-size: .58rem; }
.champion-page .champion-lane-filters button[aria-pressed="true"] {
  border-color: var(--filter-color);
  color: #fff;
  background: linear-gradient(120deg, rgba(var(--filter-rgb), .2), #141a22 70%);
  box-shadow: inset 0 -4px var(--filter-color), 0 0 0 1px rgba(var(--filter-rgb), .12);
}
.champion-page .champion-lane-filters button[aria-pressed="true"] span { background: var(--filter-color); }
.champion-page .champion-lane-filters button[aria-pressed="true"] small { color: #cad2d9; }
.champion-page .champion-lane-key {
  gap: 8px;
  margin: 11px 20px 0;
}
.champion-page .champion-lane-key span {
  --key-color: #e5b85f;
  --key-rgb: 229, 184, 95;
  padding: 7px 10px;
  border-color: rgba(var(--key-rgb), .28);
  border-radius: 6px;
  color: #aeb8c2;
  background: rgba(var(--key-rgb), .07);
  font-size: .58rem;
}
.champion-page .champion-lane-key .is-opening { --key-color: #63d69a; --key-rgb: 99, 214, 154; }
.champion-page .champion-lane-key .is-unclassified { --key-color: #a7b1bb; --key-rgb: 167, 177, 187; }
.champion-page .champion-lane-key .is-caution { --key-color: #ef7898; --key-rgb: 239, 120, 152; }
.champion-page .champion-lane-key :is(.is-opening, .is-unclassified, .is-caution) b { color: var(--key-color); }
.champion-page .champion-lane-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 14px 20px 0;
}
.champion-page .champion-lane-list > a {
  --opponent-color: #a7b1bb;
  --opponent-rgb: 167, 177, 187;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  min-height: 76px;
  padding: 10px;
  border-color: rgba(var(--opponent-rgb), .22);
  border-left-color: var(--opponent-color);
  background: linear-gradient(105deg, rgba(var(--opponent-rgb), .09), #0d141c 48%);
}
.champion-page .champion-lane-list > a[data-lane-group="pressure"] { --opponent-color: #63d69a; --opponent-rgb: 99, 214, 154; }
.champion-page .champion-lane-list > a[data-lane-group="even"] { --opponent-color: #a7b1bb; --opponent-rgb: 167, 177, 187; }
.champion-page .champion-lane-list > a[data-lane-group="danger"] { --opponent-color: #ef7898; --opponent-rgb: 239, 120, 152; }
.champion-page .champion-lane-list img {
  width: 50px;
  height: 50px;
  border: 2px solid rgba(var(--opponent-rgb), .52);
  border-radius: 50%;
}
.champion-page .champion-lane-list strong { font-size: .78rem; }
.champion-page .champion-lane-list small { color: var(--opponent-color); font-size: .58rem; }
.champion-page .champion-lane-list > a > b {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(var(--opponent-rgb), .32);
  border-radius: 50%;
  color: var(--opponent-color);
  background: rgba(var(--opponent-rgb), .08);
  font-size: .82rem;
}
.champion-page .champion-lane-list > a:is(:hover, :focus-visible) {
  border-color: var(--opponent-color);
  background: linear-gradient(105deg, rgba(var(--opponent-rgb), .16), #121922 54%);
}
.champion-page .champion-lane-empty { margin-inline: 20px; }

@media (max-width: 1000px) {
  .champion-page .champion-lane-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .champion-page .champion-lane-directory > header { grid-template-columns: 1fr; padding: 19px; }
  .champion-page .champion-lane-filters { grid-template-columns: 1fr 1fr; margin-inline: 14px; }
  .champion-page .champion-lane-key,
  .champion-page .champion-lane-list { margin-inline: 14px; }
}
@media (max-width: 520px) {
  .champion-page .champion-lane-filters,
  .champion-page .champion-lane-list { grid-template-columns: 1fr; }
  .champion-page .champion-lane-filters button { min-height: 68px; }
  .champion-page .champion-lane-summary { display: grid; grid-template-columns: 1fr; }
  .champion-page .champion-lane-summary span { justify-content: space-between; }
}

/* Icon-led reference cards: keep numbers only where reading order matters. */
.matchmaking-factor-grid .league-step-number,
.recall-checks article > .league-step-number,
.between-basics article > .league-step-number {
  display: none !important;
}
.matchmaking-factor-grid article > i { margin-top: 0; }
.between-basics article { grid-template-columns: 46px minmax(0, 1fr); }
@media (max-width: 620px) {
  .between-basics article { grid-template-columns: 42px minmax(0, 1fr); }
}

/* Icon-led directories: descriptive symbols replace decorative numbering. */
.conduct-jump {
  padding: 20px 0 8px;
  border: 0;
  border-top: 2px solid #b989ff;
  background: transparent;
}
.conduct-jump > header { padding: 0 4px 8px; }
.conduct-jump-grid { gap: 0 22px; }
.conduct-jump-grid a {
  --jump-tone: #59e0e9;
  min-height: 82px;
  padding: 14px 4px;
  border: 0;
  border-bottom: 1px solid #293640;
  border-radius: 0;
  color: #edf8fa;
  background: transparent;
}
.conduct-jump-grid a:nth-child(4n+2) { --jump-tone: #f2bd58; }
.conduct-jump-grid a:nth-child(4n+3) { --jump-tone: #b58cff; }
.conduct-jump-grid a:nth-child(4n+4) { --jump-tone: #ef7798; }
.conduct-jump-grid a:is(:hover, :focus-visible, [aria-current="location"]) {
  border-bottom-color: var(--jump-tone);
  background: color-mix(in srgb, var(--jump-tone) 6%, transparent);
  box-shadow: none;
}
.conduct-jump-grid a > .conduct-jump-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--jump-tone);
  border-radius: 50%;
  color: var(--jump-tone);
  background: transparent;
  font-size: 1.05rem;
}
.conduct-jump-grid a strong { color: #f5f8fa; font-size: .88rem; }
.conduct-jump-grid a small { color: #93a4ae; font-size: .72rem; }
.conduct-icon-action {
  display: inline-grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 20px;
  gap: 11px;
  align-items: center;
  min-height: 48px;
  padding: 5px 12px 5px 5px !important;
  border-radius: 5px;
}
.conduct-icon-action > i:first-child {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.conduct-icon-action > i:last-child { opacity: .68; }

.discord-destination-grid { gap: 18px; background: transparent; }
.discord-destination-grid > a {
  min-height: 218px;
  border: 0;
  border-top: 2px solid var(--destination-color);
  border-bottom: 1px solid #2b3742;
  background: transparent;
}
.discord-destination-grid > a:is(:hover, :focus-visible) {
  border-bottom-color: var(--destination-color);
  background: color-mix(in srgb, var(--destination-color) 6%, transparent);
  transform: none;
}
.discord-destination-icon {
  border-radius: 50%;
  color: var(--destination-color);
  background: transparent;
}
.discord-destination-grid b { background: transparent; }
.discord-role-picker article {
  min-height: 180px;
  padding: 24px 18px;
  background: transparent;
}
.discord-role-lane-icon {
  margin: 0 0 16px;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

/* v151: neutral matchup surfaces with colour reserved for meaning. */
body:has(.guide-main) {
  background:
    linear-gradient(180deg, rgba(181, 140, 255, .045), transparent 420px),
    #090c11;
}
.guide-main {
  --guide-shell: #111319;
  --guide-card: #151820;
  --guide-card-deep: #0c0e13;
}
.guide-main .guide-hero {
  border-color: #e5b95c;
  background: #101116;
}
.guide-main .guide-hero .hero-shade {
  background: linear-gradient(90deg, rgba(8, 9, 13, .96), rgba(11, 11, 16, .75) 58%, rgba(11, 10, 16, .26));
}
.guide-main .guide-hero .hero-copy {
  z-index: 1;
  min-height: 0;
  height: 100%;
  justify-content: flex-end;
}
.guide-main .guide-picker,
.guide-main .role-fit,
.guide-main .duo-lane-planner,
.guide-main .starter-build,
.guide-main .champion-playbook,
.guide-main .combo-guide,
.guide-main .ability-compare {
  border-color: #343640;
  background: linear-gradient(180deg, color-mix(in srgb, var(--section-accent) 5%, #12141a), #101218 165px);
}
.guide-main .guide-picker { --section-accent: #e8b956; }
.guide-main .role-fit { --section-accent: #68dda6; }
.guide-main .duo-lane-planner { --section-accent: #e47f9a; }
.guide-main .starter-build { --section-accent: #f0bd5d; }
.guide-main .champion-playbook { --section-accent: #9d8ae8; }
.guide-main .combo-guide { --section-accent: #c783ef; }
.guide-main .ability-compare { --section-accent: #5bd4df; }
.guide-main .champion-input-shell {
  border-color: #3b3d47;
  background: #151820;
}
.guide-main .champion-input-shell:hover { border-color: #d5a950; }
.guide-main .champion-input-shell:focus-within {
  border-color: #e8b956;
  background: #191b22;
  box-shadow: 0 0 0 3px rgba(232, 185, 86, .1);
}
.guide-main .champion-field:first-child .champion-input-shell:focus-within { border-color: #68dda6; box-shadow: 0 0 0 3px rgba(104, 221, 166, .1); }
.guide-main .champion-field:nth-of-type(2) .champion-input-shell:focus-within { border-color: #e47f9a; box-shadow: 0 0 0 3px rgba(228, 127, 154, .1); }
.guide-main .guide-picker button[type="submit"] {
  border-color: #c593dc;
  color: #f5eaff;
  background: rgba(110, 66, 129, .2);
}
.guide-main .guide-picker button[type="submit"] i { color: #d7a7ed; }
.guide-main .guide-picker button[type="submit"]:is(:hover, :focus-visible) {
  border-color: #dfb3f2;
  background: rgba(139, 82, 164, .3);
}
.guide-main .guide-source strong,
.guide-main .guide-source span,
.guide-main .guide-jumps,
.guide-main .guide-jumps a {
  background: #11141a;
}
.guide-main .guide-jumps a:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--jump-tone) 9%, #11141a);
}
.guide-main .role-fit-card,
.guide-main .duo-target-primary,
.guide-main .duo-target-backup,
.guide-main .build-overview article,
.guide-main .build-items li,
.guide-main .build-guidance article,
.guide-main .build-unavailable,
.guide-main .alternative-grid article,
.guide-main .matchup-core,
.guide-main .matchup-swap,
.guide-main .guide-tips article,
.guide-main .playbook-grid article,
.guide-main .playbook-phases article,
.guide-main .ability-key-map > div,
.guide-main .combo-grid article,
.guide-main .ability-row {
  background: #151820;
}
.guide-main .champion-summary {
  background: linear-gradient(145deg, rgba(232, 185, 86, .08), #13151b 58%);
}
.guide-main .champion-summary:nth-child(2) {
  background: linear-gradient(145deg, rgba(228, 127, 154, .08), #13151b 58%);
}
.guide-main .selected-role-verdict {
  background: linear-gradient(110deg, color-mix(in srgb, var(--selected-role-color) 10%, #14161c) 0 32%, #14161c 64%);
}
.guide-main .role-fit-card {
  background: linear-gradient(155deg, color-mix(in srgb, var(--role-color) 7%, #151820), #151820 52%);
}
.guide-main .role-fit-card.selected {
  background: linear-gradient(150deg, color-mix(in srgb, var(--role-color) 13%, #171920), #171920 62%);
}
.guide-main .build-items li.build-opening-step {
  background: linear-gradient(160deg, rgba(79, 230, 166, .09), #151820 52%);
}
.guide-main .build-items li.build-quest-step {
  background: linear-gradient(160deg, rgba(240, 189, 93, .09), #151820 52%);
}
@media (max-width: 620px) {
  .guide-main .guide-hero .hero-shade {
    background: linear-gradient(0deg, rgba(8, 9, 13, .98), rgba(10, 10, 15, .73) 68%, rgba(10, 10, 15, .2));
  }
  .guide-main .guide-hero .hero-copy {
    min-height: 0;
    padding: 18px 22px;
  }
  .guide-main .guide-hero .hero-copy h1 {
    font-size: clamp(2rem, 10vw, 2.65rem);
    line-height: 1;
  }
  .guide-main .guide-hero .hero-copy > p:last-child { display: none; }
}

/* v152: champion build routes use colour to separate decisions, not tint the whole page blue. */
.champion-build-summary {
  border-color: #383844;
  background: linear-gradient(145deg, rgba(239, 185, 73, .075), #13151b 29%, #111319 72%, rgba(166, 112, 230, .06));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .2);
}
.champion-build-summary > header { border-bottom-color: #33343c; }
.champion-build-summary header p { color: #b4b5bf; font-size: .8rem; }
.champion-build-actions a {
  border-color: rgba(128, 219, 177, .42);
  color: #c8f8df;
  background: rgba(64, 174, 126, .09);
}
.champion-build-actions a:last-child {
  border-color: rgba(231, 180, 81, .42);
  color: #ffe1a0;
  background: rgba(231, 180, 81, .08);
}
.champion-build-summary.is-swiftplay .champion-build-mode-note {
  border-color: rgba(231, 180, 81, .35);
  border-left-color: #e7b451;
  background: linear-gradient(90deg, rgba(112, 73, 16, .3), rgba(39, 29, 41, .52));
}
.champion-build-summary.is-swiftplay .champion-build-mode-note strong { color: #ffe6a9; }
.champion-build-summary.is-swiftplay .champion-build-mode-note span { color: #d4c9ba; font-size: .72rem; }
.champion-build-reading {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.champion-build-reading > span {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas: "icon title" "icon copy";
  gap: 2px 10px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #32343d;
  border-radius: 6px;
  background: #17191f;
}
.champion-build-reading i {
  grid-area: icon;
  align-self: center;
  color: #e8b958;
  font-size: 1.15rem;
  text-align: center;
}
.champion-build-reading > span:nth-child(2) i { color: #ad83e5; }
.champion-build-reading > span:nth-child(3) i { color: #6ed7a6; }
.champion-build-reading strong { grid-area: title; color: #f3f0e8; font-size: .72rem; }
.champion-build-reading small { grid-area: copy; color: #9d9faa; font-size: .63rem; line-height: 1.4; }
.champion-build-path { gap: 10px; margin-top: 10px; }
.champion-build-path li {
  min-height: 138px;
  border-color: #343640;
  background: #16181e;
  box-shadow: inset 3px 0 var(--build-accent, #8b8d98);
}
.champion-build-path li.is-step-1 { --build-accent: #60d39a; --build-soft: rgba(64, 174, 126, .14); }
.champion-build-path li.is-step-2 { --build-accent: #65cbd5; --build-soft: rgba(60, 174, 188, .13); }
.champion-build-path li.is-step-3 { --build-accent: #ae84e8; --build-soft: rgba(141, 91, 203, .15); }
.champion-build-path li.is-step-4 { --build-accent: #e77f9e; --build-soft: rgba(205, 78, 119, .14); }
.champion-build-path li.is-step-5 { --build-accent: #e9b957; --build-soft: rgba(201, 139, 37, .14); }
.champion-build-path li.is-step-6 { --build-accent: #d98d69; --build-soft: rgba(196, 103, 66, .14); }
.champion-build-step {
  border-color: color-mix(in srgb, var(--build-accent, #999) 74%, #fff);
  color: #fff;
  background: var(--build-soft, #292b33);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--build-accent, #999) 10%, transparent), 0 6px 16px rgba(0, 0, 0, .25);
}
.champion-build-path small { color: var(--build-accent, #b8bac4); font-size: .59rem; }
.champion-build-path strong { font-size: .85rem; }
.champion-build-path p { color: #aeb0ba; font-size: .69rem; line-height: 1.5; }
.champion-build-summary > footer {
  border-color: rgba(174, 132, 232, .28);
  background: linear-gradient(100deg, rgba(118, 70, 176, .13), #15171d 48%);
}
.champion-build-summary > footer span { color: #e0c8ff; background: rgba(151, 96, 217, .14); }
.champion-build-summary > footer p { color: #a6a8b2; font-size: .67rem; }

.champion-runes {
  border-color: #3a3943;
  background: linear-gradient(145deg, rgba(155, 101, 222, .08), #13151b 32%, #111319 74%, rgba(73, 180, 116, .055));
}
.champion-runes > header p { color: #b6b7c1; }
.champion-runes > header > a {
  border-color: rgba(231, 180, 81, .44);
  color: #ffe3a6;
  background: rgba(231, 180, 81, .08);
}
.champion-rune-page {
  border-color: rgba(170, 120, 229, .32);
  background: linear-gradient(150deg, rgba(113, 65, 168, .16), #171820 48%);
}
.champion-rune-tree img { background: rgba(137, 87, 194, .19); }
.champion-rune-tree small,
.champion-rune-keystone small { color: #c49bf2; }
.champion-rune-row > span { border-color: rgba(173, 127, 226, .2); background: #1b1822; }
.champion-rune-secondary {
  border-top-color: rgba(103, 205, 148, .28);
  background: linear-gradient(90deg, rgba(44, 132, 84, .1), transparent);
}
.champion-rune-secondary > span { border-color: rgba(93, 202, 141, .22); background: #151d19; }
.champion-rune-plan > div { border-color: #363740; background: #17191f; }
.champion-rune-plan > .champion-rune-reason { border-left: 3px solid #a879df; }
.champion-rune-plan > div > span { color: #bf96ec; }
.champion-rune-plan p { color: #b4b5bf; line-height: 1.5; }
.champion-spells { border-left: 3px solid #67cde0 !important; }
.champion-spells > span { color: #83ddeb !important; }
.champion-spells figure { padding: 7px 10px; border: 1px solid #343641; border-radius: 5px; background: #12141a; }
.champion-spells figure.is-heal { border-color: rgba(81, 205, 135, .4); background: rgba(43, 129, 80, .12); }
.champion-spells figure.is-ignite { border-color: rgba(235, 112, 77, .42); background: rgba(174, 67, 41, .13); }
.champion-spells figure.is-flash { border-color: rgba(236, 195, 80, .42); background: rgba(168, 125, 23, .12); }
.champion-rune-adjustment { border-left: 3px solid #e4ad4e !important; background: rgba(104, 68, 17, .16) !important; }
.champion-rune-adjustment.is-adjustment-2 { border-left-color: #62c9d5 !important; background: rgba(35, 113, 124, .12) !important; }
.champion-rune-adjustment strong { color: #f4c96e; }
.champion-rune-adjustment.is-adjustment-2 strong { color: #83dce6; }
.champion-runes > footer { border-top-color: #353640; color: #a7a9b3; }

@media (max-width: 760px) {
  .champion-build-reading { grid-template-columns: 1fr; }
  .champion-build-path li { min-height: 0; }
}
@media (max-width: 480px) {
  .champion-build-summary,
  .champion-runes { padding: 16px 13px; }
  .champion-build-path li { grid-template-columns: 44px 46px minmax(0, 1fr); padding: 12px 10px; }
  .champion-build-step { width: 36px; min-width: 36px; min-height: 36px; }
  .champion-build-mode-note strong { white-space: normal; }
  .champion-rune-row { grid-template-columns: 1fr; }
  .champion-rune-secondary { grid-template-columns: 1fr; }
  .champion-spells figure { flex: 1 1 120px; }
}

/* v153: champion decisions and map plans share the same semantic colour language. */
.champion-state-guide,
.support-macro {
  border-color: #393a43;
  background: linear-gradient(145deg, rgba(231, 180, 81, .055), #13151b 34%, #111319 74%, rgba(151, 96, 217, .05));
  box-shadow: 0 16px 44px rgba(0, 0, 0, .18);
}
.champion-state-guide > header,
.support-macro > header { border-bottom-color: #34353d; }
.champion-state-guide > header > p,
.support-macro > header p { color: #b1b3bd; font-size: .78rem; }
.champion-state-tabs button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-areas: "icon label" "icon copy";
  min-height: 76px;
  border-color: #373943;
  background: #17191f;
}
.champion-state-tabs button > i {
  grid-area: icon;
  align-self: center;
  color: #a4a6b0;
  font-size: 1.2rem;
  text-align: center;
}
.champion-state-tabs button > span { grid-area: label; }
.champion-state-tabs button > small { grid-area: copy; color: #a0a2ad; }
.champion-state-tabs button[data-champion-state-button="ahead"] > i { color: #65d9a0; }
.champion-state-tabs button[data-champion-state-button="even"] > i { color: #e8b755; }
.champion-state-tabs button[data-champion-state-button="behind"] > i { color: #e77b99; }
.champion-state-tabs button[data-champion-state-button="ahead"][aria-selected="true"] { border-color: #55c98f; background: rgba(53, 145, 95, .16); box-shadow: inset 0 -3px #55c98f; }
.champion-state-tabs button[data-champion-state-button="even"][aria-selected="true"] { border-color: #dca944; background: rgba(154, 102, 22, .16); box-shadow: inset 0 -3px #dca944; }
.champion-state-tabs button[data-champion-state-button="behind"][aria-selected="true"] { border-color: #df6d8c; background: rgba(153, 52, 84, .16); box-shadow: inset 0 -3px #df6d8c; }
.champion-state-summary { border-color: #383a43; background: #181a20; }
.champion-state-panel.is-even .champion-state-summary { border-left-color: #dfa947; background: linear-gradient(110deg, rgba(159, 105, 23, .14), #181a20 62%); }
.champion-state-panel.is-ahead .champion-state-summary { background: linear-gradient(110deg, rgba(45, 139, 88, .13), #181a20 62%); }
.champion-state-panel.is-behind .champion-state-summary { background: linear-gradient(110deg, rgba(155, 52, 83, .13), #181a20 62%); }
.champion-state-summary span { color: #b2a078; }
.champion-state-phases article { border-color: #343640; background: #17191f; }
.champion-state-phases article:nth-child(1) { border-top: 3px solid #e4ae4c; }
.champion-state-phases article:nth-child(2) { border-top: 3px solid #a977df; }
.champion-state-phases article:nth-child(3) { border-top: 3px solid #62cb9b; }
.champion-state-phases article > span {
  border-color: currentColor;
  color: #f0c76f;
  background: rgba(170, 116, 25, .1);
}
.champion-state-phases article:nth-child(2) > span { color: #c39aef; background: rgba(130, 75, 188, .11); }
.champion-state-phases article:nth-child(3) > span { color: #81ddb0; background: rgba(47, 137, 87, .11); }
.champion-state-phases p { color: #afb1bb; font-size: .7rem; }
.support-macro > header > a {
  border-color: rgba(166, 112, 230, .43);
  color: #e5ccff;
  background: rgba(126, 72, 186, .1);
}
.support-state-grid > article { border-color: #373942; border-top-color: #dfa947; background: #17191f; }
.support-state-grid > article.is-ahead { border-top-color: #55c98f; }
.support-state-grid > article.is-behind { border-top-color: #df6d8c; }
.support-state-title {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas: "icon label" "icon title";
  gap: 2px 9px;
  background: rgba(177, 119, 29, .09);
}
.support-state-title > i { grid-area: icon; align-self: center; color: #e8b755; font-size: 1.1rem; text-align: center; }
.support-state-title > span { grid-area: label; }
.support-state-title > strong { grid-area: title; }
.support-state-grid .is-ahead .support-state-title { background: rgba(47, 139, 88, .09); }
.support-state-grid .is-ahead .support-state-title > i { color: #68d7a0; }
.support-state-grid .is-behind .support-state-title { background: rgba(157, 51, 83, .09); }
.support-state-grid .is-behind .support-state-title > i { color: #e67c99; }
.support-state-title span { color: #e8b755; }
.support-state-grid dl > div { border-bottom-color: #30313a; }
.support-state-grid dt { display: flex; gap: 7px; align-items: center; color: #c1c2cb; }
.support-state-grid dt i { color: #a97adf; }
.support-state-grid dl > div:nth-child(2) dt i { color: #e4ae4c; }
.support-state-grid dl > div:nth-child(3) dt i { color: #68d3a0; }
.support-state-grid dd { color: #adb0ba; font-size: .71rem; }
.support-objective-plan {
  border-color: rgba(231, 180, 81, .28);
  background: linear-gradient(115deg, rgba(129, 83, 17, .14), #17191f 38%, rgba(117, 68, 169, .08));
}
.support-objective-plan > div > span { color: #ecc36b; }
.support-objective-plan li { border-color: #383943; background: #13151b; }
.support-objective-plan li:nth-child(1) { border-left: 3px solid #e2ad4a; }
.support-objective-plan li:nth-child(2) { border-left: 3px solid #a978df; }
.support-objective-plan li:nth-child(3) { border-left: 3px solid #62cb9b; }
.support-objective-plan li:nth-child(4) { border-left: 3px solid #dd7695; }
.support-objective-plan li > b { border-color: currentColor; color: #e8ba5d; }
.support-objective-plan li:nth-child(2) > b { color: #c19aee; }
.support-objective-plan li:nth-child(3) > b { color: #7bd9aa; }
.support-objective-plan li:nth-child(4) > b { color: #ea91aa; }
.support-objective-plan li p { color: #aaacb6; font-size: .68rem; }
.support-after-lane { border-left-color: #a879df; color: #b4b4bf; background: rgba(126, 73, 184, .09); }
.champion-next {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  border: 1px solid #3b3943;
  border-left: 4px solid #e1ad4c;
  background: linear-gradient(110deg, rgba(149, 95, 17, .12), #15171d 38%, rgba(120, 67, 177, .09));
}
.champion-next > .bi { color: #e8b959; font-size: 1.8rem; text-align: center; }
.champion-next p { color: #b1b2bc; }
.champion-next a { gap: 7px; border-color: rgba(165, 111, 226, .42); color: #e5cdff; background: rgba(124, 73, 181, .1); }
.champion-next a:last-child { border-color: rgba(99, 202, 154, .4); color: #c7f6df; background: rgba(45, 139, 88, .1); }

@media (max-width: 900px) {
  .champion-next { grid-template-columns: 44px minmax(0, 1fr); }
  .champion-next > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .champion-state-tabs button { grid-template-columns: 28px minmax(0, 1fr); align-items: initial; text-align: left; }
  .support-state-grid { grid-template-columns: 1fr; }
  .support-objective-plan { grid-template-columns: 1fr; }
  .support-objective-plan ol { grid-template-columns: 1fr; }
  .champion-next { grid-template-columns: 1fr; }
  .champion-next > .bi { text-align: left; }
  .champion-next > div:last-child { grid-column: auto; }
}
.champion-matchup-name span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid currentColor;
  border-radius: 5px;
  background: transparent;
  line-height: 1.15;
}

.champion-matchup-name span i {
  flex: 0 0 auto;
  font-size: .78rem;
}

.is-favourable .champion-matchup-name span {
  color: #7bd9aa;
  background: rgba(55, 153, 98, .08);
}

.is-danger .champion-matchup-name span {
  color: #ea91aa;
  background: rgba(160, 53, 86, .08);
}

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

.champion-common-reference-sources { min-width:0; margin-block:16px; }
.champion-review-provenance { min-width:0;overflow-wrap:anywhere;font-size:14px;line-height:1.55; }
details.champion-review-provenance { border:1px solid #826638;padding:16px;margin:16px 0;color:#ead2a0; }
details.champion-review-provenance summary { min-height:44px;padding:10px 0;cursor:pointer;font-weight:700; }
details.champion-review-provenance summary:focus-visible { outline:2px solid #f1ce70;outline-offset:3px; }
details.champion-review-provenance dl { display:grid;gap:12px;margin:8px 0 0; }
details.champion-review-provenance dl>div { display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 18px;padding:12px;border:1px solid #665c43;border-radius:6px;background:#171710;min-width:0; }
details.champion-review-provenance dt { font-size:14px;font-weight:600;line-height:1.5; }
details.champion-review-provenance dd { display:flex;flex-wrap:wrap;gap:6px 10px;margin:0;font-size:16px;font-weight:700;line-height:1.5; }
details.champion-review-provenance dd span { font-weight:400;color:#c8bd9f; }
details.champion-review-provenance .build-review-explanation { margin:0 0 12px; }
.champion-common-reference-sources>ul { display:grid;gap:12px;list-style:none;padding:0; }
.champion-common-reference-sources>ul>li { min-width:0;padding:16px;border:1px solid #826638;border-radius:8px; }
.champion-common-reference-sources a { display:inline-flex;align-items:center;min-height:44px;max-width:100%;font-size:15px;overflow-wrap:anywhere; }
.champion-common-reference-sources .review-source-facts { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-block:12px; }
.champion-common-reference-sources .review-source-facts>div { min-width:0; }
.champion-common-reference-sources dt { font-size:14px;line-height:1.5;overflow-wrap:anywhere; }
.champion-common-reference-sources dd { margin:4px 0 0;font-size:15px;font-weight:700;line-height:1.5;overflow-wrap:anywhere; }
.champion-common-reference-sources p { font-size:14px;line-height:1.6;overflow-wrap:anywhere; }
@media(max-width:520px) { .champion-common-reference-sources .review-source-facts { grid-template-columns:minmax(0,1fr); } }

/* The closed review card keeps its pending status visible in every language. */
html details:is(.build-review-provenance,.champion-review-provenance) summary { position:relative;display:grid;gap:6px;min-height:64px;box-sizing:border-box;padding:14px 38px 14px 14px;list-style:none;border-radius:8px;background:#242015;overflow-wrap:anywhere;text-align:start; }
html details:is(.build-review-provenance,.champion-review-provenance) summary::-webkit-details-marker { display:none; }
html details:is(.build-review-provenance,.champion-review-provenance) summary::after { content:'›';position:absolute;inset-inline-end:14px;top:14px;font-size:24px;line-height:1;transition:transform .15s; }
html details:is(.build-review-provenance,.champion-review-provenance)[open] summary::after { transform:rotate(90deg); }
html details:is(.build-review-provenance,.champion-review-provenance) .build-review-title { min-width:0;font-size:17px;font-weight:700;line-height:1.5;color:#ffe19a; }
html details:is(.build-review-provenance,.champion-review-provenance) .build-review-state { min-width:0;font-size:14px;font-weight:500;line-height:1.6;color:#e9d6b4; }
html details:is(.build-review-provenance,.champion-review-provenance)[open] summary { margin-bottom:16px; }
html[dir='rtl'] details:is(.build-review-provenance,.champion-review-provenance) summary { padding:14px 14px 14px 38px; }
html[dir='rtl'] details:is(.build-review-provenance,.champion-review-provenance) summary::after { transform:rotate(180deg); }
html[dir='rtl'] details:is(.build-review-provenance,.champion-review-provenance)[open] summary::after { transform:rotate(90deg); }
@media(prefers-reduced-motion:reduce) { html details:is(.build-review-provenance,.champion-review-provenance) summary::after { transition:none; } }