/* Nexus Lab, League of Legends pages (2026-10-21, pass 2). Loaded only on the League pages, after the shared Nexus Lab layers
   (assets/dist/nexus-rift-lab-v158.css, rift-champion-layout.css, rift-lol.css): the League components (ability strip, clip poster,
   rune trees, matchup cards, item tiles and build path) and the frame fixes. Markup: layout/nexus-lab-lol.php.
   Mobile first: the base rules are the phone layout, wider screens are added with min-width. Logical properties throughout, so the
   /ar/ twin mirrors by itself. One accent (the Nexus signal green); Riot's own rune-path colours appear only inside the rune trees,
   where they carry meaning (which path a rune belongs to). */

.nx-lab-lol{
 --nxl-bg:#0A120E;--nxl-s1:#0d1210;--nxl-s2:#131a16;--nxl-s3:#17231f;
 --nxl-line:rgba(170,255,210,.11);--nxl-line-2:rgba(170,255,210,.2);
 --nxl-text:#e8efeb;--nxl-text-2:#c4d0cb;--nxl-muted:#a3b3ac;
 --nxl-signal:#45f882;--nxl-signal-ink:#04140a;--nxl-signal-tint:rgba(69,248,130,.1);
 --nxl-warn:#f5bc62;--nxl-warn-tint:rgba(245,188,98,.07);--nxl-danger:#ff8a8f;--nxl-gold:#e8c46a;
 --nxl-r-panel:16px;--nxl-r-tile:12px;--nxl-r-chip:999px;
 --nxl-ease:cubic-bezier(.2,.7,.2,1);--nxl-fast:.16s;
 --p-precision:#c8aa6e;--p-domination:#e66a6a;--p-sorcery:#9faafc;--p-resolve:#a1d586;--p-inspiration:#5cc3d1;
}
.nx-lab-lol ::selection{background:rgba(69,248,130,.32);color:#fff}
.nxl-lol :is(a,button,summary,[tabindex="0"]):focus-visible{outline:2px solid var(--nxl-signal);outline-offset:2px}
.nxl-lol :is(td,dd,.nxl-gold,.nxl-meta b,.nxl-ratings b){font-variant-numeric:tabular-nums}
.nxl-lol img{background:var(--nxl-s3)}   /* stable placeholder while a Data Dragon icon loads (no animation) */
.nxl-lol .nx-i{width:1em;height:1em;flex:none}

/* ---------------------------------------------------------------- game switch as links */
a.rl-game-opt{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
a.rl-game-opt:hover:not(.on){color:#fff;background:rgba(69,248,130,.14)}

/* ---------------------------------------------------------------- hero (top of every League page) */
.nxl-hero .nxl-hero-art{display:block}
.nxl-hero .nxl-hero-art img{width:100%;height:100%;object-fit:cover;object-position:62% 22%;background:var(--nxl-bg)}
.nxl-hero .nxl-hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,18,14,.55),rgba(10,18,14,.82) 70%,var(--nxl-bg))}
.nxl-hero .nxl-hero-ambient img{filter:blur(26px) saturate(1.25) brightness(.5);transform:scale(1.18)}
.nxl-hero .nxl-hero-plain{background:radial-gradient(60% 120% at 80% 0,rgba(69,248,130,.12),transparent 70%),var(--nxl-bg)}
.nxl-hero-nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-block-start:14px}
.nxl-hero-nav>*{margin:0!important}
@media (min-width:768px){
 .nxl-hero .nxl-hero-art::after{background:linear-gradient(90deg,var(--nxl-bg) 0,rgba(10,18,14,.9) 34%,rgba(10,18,14,.35) 66%,rgba(10,18,14,.2)),linear-gradient(0deg,var(--nxl-bg),transparent 32%)}
 [dir=rtl] .nxl-hero .nxl-hero-art::after{background:linear-gradient(270deg,var(--nxl-bg) 0,rgba(10,18,14,.9) 34%,rgba(10,18,14,.35) 66%,rgba(10,18,14,.2)),linear-gradient(0deg,var(--nxl-bg),transparent 32%)}
 .nxl-hero .nxl-hero-ambient::after{background:linear-gradient(0deg,var(--nxl-bg),rgba(10,18,14,.35) 60%)}
}

/* ---------------------------------------------------------------- shared pieces */
.nxl-head{margin-block-end:14px}
.nxl-head h3{margin:0;font-size:clamp(20px,2.2vw,26px);line-height:1.2;letter-spacing:-.01em;color:var(--nxl-text)}
.nxl-head p{margin:6px 0 0;max-width:68ch;font-size:14.5px;line-height:1.6;color:var(--nxl-muted)}
.nxl-panel{margin-block:16px;padding:16px;border:1px solid var(--nxl-line);border-radius:var(--nxl-r-panel);background:var(--nxl-s1)}
.nxl-sub{margin:20px 0 10px;font-size:15px;font-weight:700;color:var(--nxl-text-2)}
.nxl-src{margin:0 0 8px;font-size:13px;color:var(--nxl-muted)}
.nxl-note{margin-block:14px 0;font-size:13.5px;line-height:1.6;color:var(--nxl-muted)}
.nxl-key{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:6px;background:#0a110f;border:1px solid var(--nxl-line-2);color:var(--nxl-text);font:800 11px/1 system-ui,sans-serif;letter-spacing:0}
.nxl-key.lg{min-width:40px;height:40px;border-radius:10px;font-size:18px;background:var(--nxl-signal-tint);border-color:rgba(69,248,130,.4);color:var(--nxl-signal)}
.nxl-gold{display:inline-flex;align-items:center;gap:4px;font-style:normal}
.nxl-gold .nx-i{color:var(--nxl-warn);width:13px;height:13px}
.nxl-ext{display:inline-flex;align-items:center;gap:6px}
.nxl-lol [hidden]{display:none!important}

/* ---------------------------------------------------------------- champion banner */
.nx-lab-lol .nxl-lol .rl54-champion-cinematic.nxl-banner{display:block;height:auto;min-height:0;max-height:none;border-radius:20px;background:var(--nxl-bg);box-shadow:none}
.nxl-banner-art{position:relative;display:block;aspect-ratio:16/10;overflow:hidden}
.nxl-banner-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;transform:none;filter:saturate(1.02)}
.nxl-banner-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,var(--nxl-bg))}
.nx-lab-lol .nxl-banner .rl54-hero-overlay,.nx-lab-lol .nxl-banner .rl54-hero-vignette{display:none}
.nx-lab-lol .nxl-lol .nxl-banner .rl54-hero-copy{position:relative;inset:auto;left:auto;right:auto;bottom:auto;max-width:none;margin-block-start:-56px;padding:0 16px 18px}
.nx-lab-lol .nxl-banner .rl54-hero-title h2{font-size:clamp(44px,12vw,88px);line-height:.95;letter-spacing:-.03em}
.nx-lab-lol .nxl-lol .nxl-banner .rl54-hero-copy>p{font-size:14px;line-height:1.6;color:var(--nxl-text-2);max-width:62ch}
.nxl-banner-keys{display:flex;flex-wrap:wrap;gap:8px;margin-block:14px 4px}
.nxl-banner-keys a{position:relative;display:block;width:48px;height:48px;border-radius:12px;border:1px solid var(--nxl-line-2);overflow:visible;transition:transform var(--nxl-fast) var(--nxl-ease),border-color var(--nxl-fast)}
.nxl-banner-keys img{width:100%;height:100%;border-radius:11px;display:block}
.nxl-banner-keys .nxl-key{position:absolute;inset-block-end:-6px;inset-inline-end:-6px;min-width:18px;height:18px;font-size:10px}
.nxl-banner-keys a:hover{border-color:var(--nxl-signal);transform:translateY(-2px)}
.nx-lab-lol .nxl-banner .rl54-hero-facts{margin-block-start:14px}
@media (min-width:900px){
 .nx-lab-lol .nxl-lol .rl54-champion-cinematic.nxl-banner{height:clamp(480px,60vh,600px);border-radius:24px}
 .nxl-banner-art{position:absolute;inset:0;aspect-ratio:auto}
 .nxl-banner-art img{object-position:center 28%}
 .nxl-banner-art::after{display:none}
 .nx-lab-lol .nxl-banner .rl54-hero-overlay,.nx-lab-lol .nxl-banner .rl54-hero-vignette{display:block}
 .nx-lab-lol .nxl-lol .nxl-banner .rl54-hero-copy{position:absolute;inset-inline:clamp(28px,4vw,56px);inset-block-end:clamp(24px,4vw,44px);margin:0;padding:0;max-width:720px}
 [dir=rtl] .nx-lab-lol .nxl-banner .rl54-hero-overlay{background:linear-gradient(270deg,rgba(3,8,8,.94) 0%,rgba(3,8,8,.76) 32%,rgba(3,8,8,.28) 63%,rgba(3,8,8,.18) 100%)}
}

/* ---------------------------------------------------------------- tab bar */
.nx-lab-lol .nxl-tabs{margin-block-start:14px;scrollbar-width:none}
.nx-lab-lol .nxl-tabs::-webkit-scrollbar{display:none}
.nx-lab-lol .nxl-lol .nxl-tabs button{min-height:44px;transition:background var(--nxl-fast),color var(--nxl-fast)}
.nx-lab-lol .nxl-lol .nxl-tabs button:hover:not(.on){color:var(--nxl-text);background:rgba(255,255,255,.04)}

/* ---------------------------------------------------------------- overview */
.nx-lab-lol .nxl-lol .nxl-lead p{font-size:15px;line-height:1.65;color:var(--nxl-text-2)}
.nxl-ratings{margin-block-start:16px}
.nxl-ratings-cap{margin:0 0 8px!important;font-size:13px!important;color:var(--nxl-muted)!important}
.nxl-ratings dl{display:grid;gap:8px;margin:0;max-width:420px}
.nxl-rating{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:12px}
.nxl-rating dt{font-size:13.5px;color:var(--nxl-text-2)}
.nxl-rating dd{display:flex;align-items:center;gap:10px;margin:0}
.nxl-rating dd b{min-width:2ch;font-size:14px;color:var(--nxl-text)}
.nxl-meter{flex:1;height:8px;border-radius:2px;background:linear-gradient(90deg,var(--nxl-signal) calc(var(--v) * 10%),rgba(255,255,255,.1) 0);
 -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 3px),transparent calc(10% - 3px) 10%);mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 3px),transparent calc(10% - 3px) 10%)}
[dir=rtl] .nxl-meter{background:linear-gradient(270deg,var(--nxl-signal) calc(var(--v) * 10%),rgba(255,255,255,.1) 0);-webkit-mask:repeating-linear-gradient(270deg,#000 0 calc(10% - 3px),transparent calc(10% - 3px) 10%);mask:repeating-linear-gradient(270deg,#000 0 calc(10% - 3px),transparent calc(10% - 3px) 10%)}
.nxl-tips{display:grid;gap:12px;margin-block:16px}
.nx-lab-lol .nxl-lol .nxl-tipcard{padding:16px;border-radius:var(--nxl-r-panel)}
.nxl-tipcard h3{margin:0;font-size:19px;line-height:1.25;color:var(--nxl-text)}
.nxl-tipcard ul{display:grid;gap:12px;margin:12px 0 0;padding:0;list-style:none}
.nxl-tipcard li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start}
.nxl-tipcard li .nx-i{width:18px;height:18px;margin-block-start:2px;color:var(--nxl-signal)}
.nxl-tipcard.risk li .nx-i{color:var(--nxl-warn)}
.nx-lab-lol .nxl-lol .nxl-tipcard li p{margin:0;font-size:14.5px;line-height:1.6;color:var(--nxl-text-2)}
.nxl-kit{margin-block:20px 4px}
.nxl-kit-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.nxl-kit-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--nxl-line);border-radius:var(--nxl-r-tile);background:var(--nxl-s1)}
.nxl-kit-ab{position:relative;display:block;width:40px;height:40px}
.nxl-kit-icon{width:40px;height:40px;border-radius:10px;display:block}
.nxl-kit-ab .nxl-key{position:absolute;inset-block-end:-5px;inset-inline-end:-6px;min-width:17px;height:17px;font-size:10px}
.nxl-kit-none{display:grid;place-items:center;border-radius:10px;background:var(--nxl-s2);color:var(--nxl-muted)}
.nxl-kit-list b{display:block;font-size:14.5px;color:var(--nxl-text)}
.nx-lab-lol .nxl-lol .nxl-kit-list p{margin:2px 0 0;font-size:13.5px;line-height:1.5;color:var(--nxl-muted)}
@media (min-width:720px){.nxl-tips{grid-template-columns:1fr 1fr}.nxl-kit-list{grid-template-columns:1fr 1fr}}

/* ---------------------------------------------------------------- abilities */
.nx-lab-lol .nxl-lol .rl49-ability-workspace.nxl-abil{display:block;padding:12px;border-radius:var(--nxl-r-panel);margin-block-start:0}
.nx-lab-lol .nxl-lol .rl49-ability-list.nxl-abil-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;overflow:visible}
.nx-lab-lol .nxl-lol .rl49-ability-button.nxl-ab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:64px;width:100%;padding:8px 4px;border-radius:var(--nxl-r-tile);text-align:center;flex:initial;transition:border-color var(--nxl-fast),background var(--nxl-fast)}
.nxl-ab-icon{position:relative;display:block;width:44px;height:44px}
.nx-lab-lol .nxl-lol .nxl-ab .rl49-ability-thumb{width:44px;height:44px;border-radius:10px;display:block}
.nxl-ab-icon .nxl-key{position:absolute;inset-block-end:-5px;inset-inline-end:-7px}
.nxl-ab-text{display:none}
.nx-lab-lol .nxl-lol .nxl-ab:hover:not(.on){border-color:var(--nxl-line-2);background:rgba(255,255,255,.04)}
.nx-lab-lol .nxl-lol .nxl-ab.on{border-color:rgba(69,248,130,.55);background:var(--nxl-signal-tint)}
.nxl-ab.on .nxl-key{background:var(--nxl-signal);border-color:var(--nxl-signal);color:var(--nxl-signal-ink)}
.nxl-stage{display:block;margin-block-start:12px}
.nx-lab-lol .nxl-lol .rl49-ability-focus.nxl-focus{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-height:0;padding:0;background:none;border:0}
.nxl-media{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:var(--nxl-bg);border:1px solid var(--nxl-line)}
.nxl-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(1.05);transition:filter .2s var(--nxl-ease)}
.nxl-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(5,9,10,0) 40%,rgba(5,9,10,.75))}
.nxl-media-chip{position:absolute;z-index:2;inset-block-end:12px;inset-inline-start:12px;display:block;width:56px;height:56px}
.nxl-media-chip .nxl-play-icon{width:56px;height:56px;border-radius:12px;border:2px solid rgba(255,255,255,.28);box-shadow:0 6px 20px rgba(2,14,8,.36);display:block}
.nxl-media-chip .nxl-key{position:absolute;inset-block-end:-6px;inset-inline-end:-8px}
.nxl-play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;width:100%;padding:0;border:0;background:transparent;cursor:pointer;color:inherit}
.nxl-play-btn{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--nxl-signal);color:var(--nxl-signal-ink);box-shadow:0 10px 30px rgba(2,14,8,.34)}
.nxl-play-btn .nx-i{width:26px;height:26px;margin-inline-start:3px}
[dir=rtl] .nxl-play-btn .nx-i{transform:scaleX(-1);margin-inline-start:0;margin-inline-end:3px}
.nxl-play-label{position:absolute;inset-block-end:14px;inset-inline-end:14px;padding:6px 12px;border-radius:var(--nxl-r-chip);background:rgba(5,9,10,.78);border:1px solid var(--nxl-line-2);font-size:13px;font-weight:700;color:var(--nxl-text)}
.nxl-play:hover .nxl-play-btn{transform:scale(1.06)}
.nxl-media:has(.nxl-play:hover) .nxl-poster{filter:brightness(.62) saturate(1.1)}
.nxl-play:focus-visible{outline:3px solid var(--nxl-signal);outline-offset:-3px;border-radius:14px}
.nx-lab-lol .nxl-lol .nxl-media .nxl-clip-tag{position:absolute;z-index:2;inset-block-start:12px;inset-inline-start:12px;inset-inline-end:auto;inset-block-end:auto;display:block;pointer-events:none}
.nxl-clip-tag span{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--nxl-r-chip);background:rgba(5,9,10,.72);border:1px solid var(--nxl-line-2);font-size:12px;font-weight:700;color:var(--nxl-text)}
.nxl-clip-tag i{width:7px;height:7px;border-radius:50%;background:var(--nxl-signal)}
.nxl-noclip{position:absolute;z-index:2;inset-block-end:14px;inset-inline-end:14px;margin:0;max-width:60%;padding:6px 10px;border-radius:10px;background:rgba(5,9,10,.78);font-size:12.5px;color:var(--nxl-text-2)}
.nxl-clip{position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;object-fit:contain;background:#000}
.nxl-ab-head{display:flex;align-items:center;gap:12px}
.nxl-ab-head small{display:block;font-size:13px;color:var(--nxl-muted)}
.nxl-ab-head h4{margin:2px 0 0;font-size:clamp(22px,2.6vw,28px);line-height:1.15;color:var(--nxl-text)}
.nxl-meta{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;padding:0;list-style:none}
.nxl-meta li{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid var(--nxl-line);border-radius:10px;background:var(--nxl-s2)}
.nxl-meta .nx-i{width:15px;height:15px;color:var(--nxl-signal)}
.nxl-meta small{font-size:12.5px;color:var(--nxl-muted)}
.nxl-meta b{font-size:14px;color:var(--nxl-text)}
.nx-lab-lol .nxl-lol .nxl-ab-copy .rl52-ability-desc{margin:0;font-size:15.5px;line-height:1.65;color:var(--nxl-text-2);max-width:62ch}
.nxl-ab-kit{margin-block-start:14px;padding:12px 14px;border:1px solid var(--nxl-line);border-radius:var(--nxl-r-tile);background:var(--nxl-s1)}
.nxl-ab-kit ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.nxl-ab-kit li{font-size:14px;line-height:1.5;color:var(--nxl-muted)}
.nxl-ab-kit b{color:var(--nxl-text)}
@media (min-width:600px){
 .nx-lab-lol .nxl-lol .rl49-ability-button.nxl-ab{flex-direction:row;justify-content:flex-start;gap:10px;padding:8px 10px;text-align:start}
 .nxl-ab-text{display:grid;gap:1px;min-width:0}
 .nxl-ab-text small{font-size:11.5px;color:var(--nxl-muted);text-transform:none;letter-spacing:0}
 .nxl-ab-text b{font-size:13.5px;line-height:1.25;color:var(--nxl-text);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
@media (min-width:1100px){
 .nx-lab-lol .nxl-lol .rl49-ability-focus.nxl-focus{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}
}
@media (prefers-reduced-motion:no-preference){
 .nxl-play-btn{transition:transform var(--nxl-fast) var(--nxl-ease)}
 .nxl-focus:not([hidden]){animation:nxlIn .28s var(--nxl-ease)}
 @keyframes nxlIn{from{opacity:.35;filter:blur(3px)}to{opacity:1;filter:none}}
}

/* ---------------------------------------------------------------- build: item tiles */
.nx-lab-lol .nxl-lol .nxl-buildintro p{font-size:14.5px;line-height:1.65;color:var(--nxl-text-2)}
.nxl-itemgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
.nx-lab-lol .nxl-lol .rl-build-item.nxl-tile{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-areas:"i n" "i s";column-gap:10px;row-gap:2px;align-items:center;min-height:58px;padding:8px 10px;border:1px solid var(--nxl-line);border-radius:var(--nxl-r-tile);background:var(--nxl-s2);text-decoration:none;color:var(--nxl-text);transition:border-color var(--nxl-fast),background var(--nxl-fast)}
.nx-lab-lol .nxl-lol .nxl-tile:hover{border-color:rgba(69,248,130,.45);background:var(--nxl-s3)}
.nx-lab-lol .nxl-lol .nxl-tile .rl-build-item-icon{grid-area:i;width:40px;height:40px;border-radius:8px}
.nx-lab-lol .nxl-lol .nxl-tile span{grid-area:n;align-self:end;font-size:13.5px;font-weight:700;line-height:1.25;text-transform:none;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nx-lab-lol .nxl-lol .nxl-tile small{grid-area:s;align-self:start;font-size:12.5px;line-height:1.35;color:var(--nxl-muted);text-transform:none}
.nxl-vs-row+.nxl-vs-row{margin-block-start:14px;padding-block-start:14px;border-block-start:1px solid var(--nxl-line)}
.nx-lab-lol .nxl-lol .nxl-vs-why{margin:0 0 10px;font-size:14.5px;line-height:1.55;color:var(--nxl-text-2)}
.nxl-vs-why span{color:var(--nxl-muted)}
.nxl-vs-items{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

/* ---------------------------------------------------------------- build: rune trees */
.nxl-trees{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
.nxl-tree{--pc:var(--nxl-signal);display:flex;flex-direction:column;gap:8px;padding:12px 10px;border:1px solid var(--nxl-line);border-radius:14px;background:var(--nxl-s2)}
.nxl-tree-precision{--pc:var(--p-precision)}.nxl-tree-domination{--pc:var(--p-domination)}.nxl-tree-sorcery{--pc:var(--p-sorcery)}.nxl-tree-resolve{--pc:var(--p-resolve)}.nxl-tree-inspiration{--pc:var(--p-inspiration)}
.nxl-tree h4{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:14.5px;color:var(--pc)}
.nxl-tree h4 small{margin-inline-start:auto;font-size:12px;font-weight:600;color:var(--nxl-muted)}
.nxl-tree-icon{width:24px;height:24px;background:none!important}
.nxl-tree-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.nxl-tree-row.is-key{padding-block-end:8px;margin-block-end:2px;gap:4px}
.nx-lab-lol .nxl-lol .rl46-rune-chip.nxl-rune{display:inline-grid;place-items:center;width:34px;height:34px;min-height:0;padding:0;border:2px solid transparent;border-radius:50%;background:#0a110f;cursor:pointer;transition:filter var(--nxl-fast),opacity var(--nxl-fast),border-color var(--nxl-fast)}
.nxl-tree-row.is-key .nxl-rune{width:42px!important;height:42px!important}
.nxl-rune .nxl-rune-icon{width:100%;height:100%;border-radius:50%;background:none;filter:grayscale(1) brightness(.6);opacity:.7;transition:filter var(--nxl-fast),opacity var(--nxl-fast)}
.nxl-rune.is-lit{border-color:var(--pc)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--pc) 22%,transparent)}
.nxl-rune.is-lit .nxl-rune-icon,.nxl-rune:hover .nxl-rune-icon,.nxl-rune[aria-pressed=true] .nxl-rune-icon{filter:none;opacity:1}
.nxl-rune[aria-pressed=true]{outline:2px solid var(--nxl-text);outline-offset:2px}
.nxl-tree-cap{min-height:0;margin:2px 0 0;font-size:12.5px;line-height:1.45;color:var(--nxl-text-2)}
.nxl-tree-cap:empty{display:none}
.nxl-tree-cap b{display:block;color:var(--pc)}
.nxl-tree-cap em{display:block;margin-block-start:4px;font-style:normal;color:var(--nxl-signal)}
.nxl-fits{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.nxl-fit{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;padding:12px;border:1px solid var(--nxl-line);border-radius:var(--nxl-r-tile);background:var(--nxl-s2)}
.nxl-fit .nxl-rune-icon{width:40px;height:40px;border-radius:50%;background:#0a110f}
.nxl-fit b{display:block;font-size:14.5px;color:var(--nxl-text)}
.nxl-fit small{display:block;font-size:12.5px;color:var(--nxl-muted)}
.nx-lab-lol .nxl-lol .nxl-fit p{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--nxl-text-2)}

/* ---------------------------------------------------------------- matchups */
.nxl-chips .rl70-match-row h4 small{margin-inline-start:4px;color:var(--nxl-muted);font-weight:600}
.nx-lab-lol .nxl-lol .nxl-mu-cols{margin-block-start:14px}
.nx-lab-lol .nxl-lol .rl60-match-side.nxl-mu-side{padding:16px;border:1px solid var(--nxl-line);border-radius:var(--nxl-r-panel);background:var(--nxl-s1)}
.nx-lab-lol .nxl-lol .rl60-mini-match.nxl-mu{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;padding:14px;border:1px solid var(--nxl-line);border-radius:14px;background:var(--nxl-s2);scroll-margin-block-start:150px;transition:border-color var(--nxl-fast),box-shadow var(--nxl-fast)}
.nx-lab-lol .nxl-lol .rl60-mini-match.nxl-mu:target{border-color:rgba(69,248,130,.6);box-shadow:0 0 0 3px rgba(69,248,130,.16)}
.nxl-mu-face{display:block;width:52px;height:52px}
.nx-lab-lol .nxl-lol .nxl-mu .rl49-match-avatar{width:52px;height:52px;border-radius:12px;display:block}
.nxl-mu-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px}
.nxl-mu-head h4{margin:0;font-size:16.5px;line-height:1.2}
.nxl-mu-head h4 a{color:var(--nxl-text);text-decoration:none}
.nxl-mu-head h4 a:hover{color:var(--nxl-signal);text-decoration:underline;text-underline-offset:3px}
.nxl-mu-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--nxl-r-chip);font-size:12px;font-weight:700;border:1px solid}
.nxl-mu.hard .nxl-mu-tag{color:var(--nxl-danger);border-color:rgba(255,120,128,.3);background:rgba(255,120,128,.07)}
.nxl-mu.good .nxl-mu-tag{color:var(--nxl-signal);border-color:rgba(69,248,130,.3);background:rgba(69,248,130,.06)}
.nx-lab-lol .nxl-lol .nxl-mu p{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--nxl-text-2)}
.nxl-more{margin-block-start:6px}
.nxl-more summary{display:inline-flex;align-items:center;gap:6px;min-height:32px;font-size:13.5px;font-weight:700;color:var(--nxl-signal);cursor:pointer;list-style:none}
.nxl-more summary::-webkit-details-marker{display:none}
.nxl-more summary .nx-i{width:14px;height:14px;transition:transform var(--nxl-fast)}
[dir=rtl] .nxl-more summary .nx-i{transform:scaleX(-1)}
.nxl-more[open] summary .nx-i{transform:rotate(90deg)}
.nx-lab-lol .nxl-lol .nxl-mu .nxl-risk{display:flex;gap:8px;align-items:flex-start;margin-block-start:10px;padding:8px 10px;border:1px solid rgba(245,188,98,.25);border-radius:10px;background:var(--nxl-warn-tint);color:#f1dcb8}
.nxl-risk .nx-i{width:16px;height:16px;margin-block-start:3px;color:var(--nxl-warn)}
.nxl-risk b{color:var(--nxl-warn)}

/* ---------------------------------------------------------------- stats table */
.nxl-table-wrap{overflow-x:auto;border:1px solid var(--nxl-line);border-radius:var(--nxl-r-tile)}
.nxl-table{width:100%;min-width:440px;border-collapse:collapse;margin:0}
.nxl-table th,.nxl-table td{padding:10px 12px;text-align:start;border-block-end:1px solid var(--nxl-line);font-size:14px}
.nxl-table tbody tr:last-child>*{border-block-end:0}
.nxl-table thead th{font-size:12.5px;font-weight:700;color:var(--nxl-muted);background:var(--nxl-s2)}
.nxl-table tbody th{font-weight:600;color:var(--nxl-text-2)}
.nxl-table td{color:var(--nxl-text)}
.nxl-table td:last-child{color:var(--nxl-signal);font-weight:700}
.nxl-list{margin:8px 0 0;padding-inline-start:20px}
.nx-lab-lol .nxl-lol .nxl-sources p{font-size:14.5px;line-height:1.65;color:var(--nxl-text-2)}

/* ---------------------------------------------------------------- side card */
.nx-lab-lol .nxl-side .rl70-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1099px){.nx-lab-lol .nxl-side .rl70-side-actions{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- hubs */
.nxl-filters button small{margin-inline-start:6px;font-size:11.5px;opacity:.75}
.nx-lab-lol .nxl-lol .rl-champion-card[hidden]{display:none}
.nxl-lol .rl-searchbox input{flex:1 1 auto;min-width:0}
.nxl-pips{display:inline-flex;align-items:center;gap:3px;font-style:normal}
.nxl-pips i{width:6px;height:6px;border-radius:2px;background:rgba(255,255,255,.16)}
.nxl-pips[data-l="1"] i:nth-child(-n+1),.nxl-pips[data-l="2"] i:nth-child(-n+2),.nxl-pips[data-l="3"] i:nth-child(-n+3){background:var(--nxl-signal)}
.nxl-items .rl-champion-card-img{object-fit:contain;padding:6px}
.nxl-items .rl-champion-card em{font-size:12px;color:var(--nxl-text)}
.nxl-empty{display:grid;justify-items:center;gap:12px;padding:32px 16px;text-align:center}
.nxl-empty p{margin:0;font-size:15px;color:var(--nxl-text-2)}
.nxl-empty button{min-height:44px;padding:0 18px;border:1px solid rgba(69,248,130,.45);border-radius:var(--nxl-r-chip);background:var(--nxl-signal-tint);color:var(--nxl-signal);font-weight:700;cursor:pointer}
.nxl-empty button:hover{background:rgba(69,248,130,.18)}

/* ---------------------------------------------------------------- item pages */
.nx-lab-lol .nxl-lol .nxl-itembanner{position:relative;display:block;height:auto;min-height:0;max-height:none;overflow:hidden;background:var(--nxl-s1)}
.nxl-itembanner-wash{position:absolute;inset:-25%;z-index:-4;width:150%;height:150%;object-fit:cover;filter:blur(48px) saturate(1.4) brightness(.55);opacity:.7;background:none!important}
.nx-lab-lol .nxl-lol .nxl-itembanner .rl54-hero-copy{position:relative;inset:auto;display:flex;flex-wrap:wrap;gap:16px 22px;align-items:flex-start;max-width:none;margin:0;padding:22px 18px}
.nx-lab-lol .nxl-itembanner .rl54-hero-copy>div{flex:1 1 320px;min-width:0}
.nx-lab-lol .nxl-itembanner .rl54-hero-title h2{font-size:clamp(34px,6vw,64px);line-height:1;letter-spacing:-.02em}
.nxl-bigicon{width:88px;height:88px;border-radius:18px;border:2px solid rgba(255,255,255,.22);box-shadow:0 10px 30px rgba(2,14,8,.34)}
.nxl-card p,.nxl-card li{font-size:15.5px;line-height:1.65;color:var(--nxl-text-2)}
.nxl-card{margin-block:14px}
.nxl-card p{margin:8px 0}
.nxl-path{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.nxl-path-from,.nxl-path-into{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.nxl-path-into{flex-direction:column;align-items:stretch}
.nxl-path-label{font-size:12.5px;color:var(--nxl-muted)}
.nxl-path-item{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-areas:"i n" "i s";column-gap:10px;align-items:center;min-width:150px;max-width:220px;padding:8px 10px;border:1px solid var(--nxl-line);border-radius:var(--nxl-r-tile);background:var(--nxl-s2);text-decoration:none;color:var(--nxl-text)}
.nxl-path-item:hover{border-color:rgba(69,248,130,.45)}
.nxl-path-item.is-this{border-color:rgba(69,248,130,.6);background:var(--nxl-signal-tint)}
.nxl-path-icon{grid-area:i;width:40px;height:40px;border-radius:8px}
.nxl-path-item span{grid-area:n;font-size:13.5px;font-weight:700;line-height:1.25}
.nxl-path-item small{grid-area:s;font-size:12.5px;color:var(--nxl-muted)}
.nxl-path-combine{font-size:13px;font-weight:700;color:var(--nxl-text-2)}
.nxl-path-combine small{font-weight:500;color:var(--nxl-muted)}
.nxl-path-arrow{display:grid;place-items:center;color:var(--nxl-muted)}
.nxl-path-arrow .nx-i{width:20px;height:20px}
@media (min-width:640px){.nx-lab-lol .nxl-lol .nxl-itembanner .rl54-hero-copy{padding:28px}}

/* ---------------------------------------------------------------- wide screens */
@media (min-width:768px){
 .nxl-panel{padding:20px 22px}
 .nxl-trees{gap:10px}
}

/* ---------------------------------------------------------------- frame alignment: banner and hero sit on the same column as the tabs */
.nx-lab-lol .rl54-champion-page>.rl54-champion-cinematic.nxl-banner{width:min(1480px,calc(100% - 24px));margin-inline:auto}
.nx-lab-lol .nxl-lol .rl57-overview-lead.nxl-lead{align-items:start}
@media (min-width:768px){
 .nx-lab-lol .rl54-champion-page>.rl54-champion-cinematic.nxl-banner{width:min(1480px,calc(100% - 48px))}
 .nx-lab-lol .nxl-hero.riftlab-hero-detail>.container{width:min(1232px,calc(100% - 48px));max-width:none;margin-inline:auto;padding-inline:0}
}

/* the shared .rl49-ability-focus span rule (small green caps) must not reach the League media and copy */
.nx-lab-lol .nxl-focus span{color:inherit;font-size:inherit;text-transform:none;letter-spacing:normal}
.nx-lab-lol .nxl-focus .nxl-play-btn{color:var(--nxl-signal-ink)}
.nx-lab-lol .nxl-focus .nxl-play-label{font-size:13px;color:var(--nxl-text)}
.nx-lab-lol .nxl-focus .nxl-clip-tag span{font-size:12px;color:var(--nxl-text)}
.nxl-play-btn .nx-i{fill:currentColor;stroke:none}

/* rune tree fit: keystones stay on one row (Precision has four), header never wraps */
.nxl-tree h4 span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nxl-tree h4 small{white-space:nowrap}
.nxl-tree h4 .nxl-lit{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--nxl-r-chip);background:color-mix(in srgb,var(--pc) 16%,transparent);color:var(--pc);font-size:12px;font-weight:800}
.nxl-fit{padding:10px 12px}
.nx-lab-lol .nxl-lol .nxl-fit p{font-size:13px}
.nxl-tree-row.is-key{flex-wrap:nowrap}
.nxl-tree-row.is-key .nxl-rune{flex:0 1 42px;width:auto!important;height:auto!important;aspect-ratio:1}
/* the matchup note is a quiet line, not a second card */
.nx-lab-lol .nxl-lol .nxl-mu .nxl-risk{padding:0;border:0;background:none;color:var(--nxl-text-2)}
/* long item pools open with three rows; the script adds the "show all" button (without script every item shows) */
.nxl-pool.is-clamped .nxl-itemgrid:not(.nxl-boots)>.nxl-tile:nth-child(n+16){display:none}
.nxl-showall{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-block-start:12px;padding:0 16px;border:1px solid var(--nxl-line-2);border-radius:var(--nxl-r-chip);background:var(--nxl-s2);color:var(--nxl-text);font-weight:700;cursor:pointer}
.nxl-showall:hover{border-color:rgba(69,248,130,.5);color:var(--nxl-signal)}

/* phones: actions wrap instead of running off the banner, facts sit 2 x 2, the summary card follows the guide instead of pushing it down */
.nx-lab-lol .nxl-lol .nxl-banner .rl54-hero-actions{display:flex;flex-wrap:wrap;gap:8px;overflow:visible}
.nx-lab-lol .nxl-lol .nxl-banner .rl54-hero-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.nx-lab-lol .nxl-lol .nxl-banner .rl54-hero-facts>span{min-width:0}
.nx-lab-lol .nxl-lol .rl70-side{order:2}
@media (min-width:600px){.nx-lab-lol .nxl-lol .nxl-banner .rl54-hero-facts{display:flex;flex-wrap:wrap}}
@media (min-width:1100px){.nx-lab-lol .nxl-lol .rl70-side{order:0}}

/* the shared v55 layer forces the ability list into a scrolling flex row (!important): the League strip is a fixed five-column grid */
.nx-lab-lol .nxl-lol .rl49-ability-list.nxl-abil-strip{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;overflow:visible;padding-bottom:0}
.nx-lab-lol .nxl-lol .nxl-ab>.nxl-ab-icon{display:block}
.nx-lab-lol .nxl-lol .nxl-ab>.nxl-ab-text{display:none}
@media (min-width:600px){
 .nx-lab-lol .nxl-lol .nxl-ab>.nxl-ab-text{display:grid}
 .nx-lab-lol .nxl-lol .nxl-ab .nxl-ab-text small{font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--nxl-muted)}
}
.nxl-itemgrid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.nxl-trees{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
@media (min-width:768px){.nxl-itemgrid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}.nxl-trees{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}}
.nxl-vs-items{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

/* phones: item tiles stack (icon over name) so names are not cut; rune trees drop the path icon (the colour names the path) */
@media (max-width:599px){
 .nx-lab-lol .nxl-lol .rl-build-item.nxl-tile{grid-template-columns:minmax(0,1fr);grid-template-areas:"i" "n" "s";row-gap:6px;align-items:start;padding:10px}
 .nx-lab-lol .nxl-lol .nxl-tile .rl-build-item-icon{width:36px;height:36px}
 .nx-lab-lol .nxl-lol .nxl-vs-items .nxl-tile{grid-template-columns:36px minmax(0,1fr);grid-template-areas:"i n" "i s"}
 .nxl-tree .nxl-tree-icon{display:none}
 .nxl-tree h4{font-size:13.5px;gap:6px}
 .nx-lab-lol .nxl-focus .nxl-play-label{display:none}
 .nx-lab-lol .nxl-lol .rl60-match-side.nxl-mu-side{padding:12px}
 .nx-lab-lol .nxl-lol .rl60-mini-match.nxl-mu{grid-template-columns:40px minmax(0,1fr);gap:10px;padding:12px}
 .nxl-mu-face,.nx-lab-lol .nxl-lol .nxl-mu .rl49-match-avatar{width:40px;height:40px}
 .nxl-panel{padding:14px 12px}
}

/* build path reads as a recipe: parts (stacked) -> the item -> what it builds into; vertical on phones */
.nxl-path{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:center}
.nxl-path-from,.nxl-path-into{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.nxl-path-item{max-width:none}
.nxl-path-arrow .nx-i{transform:rotate(90deg)}
@media (min-width:760px){
 .nxl-path{grid-auto-flow:column;grid-auto-columns:max-content;justify-content:start;gap:14px}
 .nxl-path-item{min-width:200px}
 .nxl-path-arrow .nx-i{transform:none}
}

/* RTL: the copy sits on the right, so the splash is mirrored (as the shared hero art already is) and the champion stays clear of the text */
[dir=rtl] .nxl-banner-art img{transform:scaleX(-1)}
[dir=rtl] :is(.nxl-tile,.nxl-path-item) .nxl-gold{justify-content:flex-end}
/* the scrim layers (z -3 / -2 in the shared layer) must sit above the art, so the copy always has its dark side */
@media (min-width:900px){.nxl-banner-art{z-index:-4}}

/* reduced motion: nothing on a League page moves (this also stills the shared footer field and the support button while here) */
@media (prefers-reduced-motion:reduce){
 /* :is(*,#nxl-rm) lifts the specificity to one id, so the shared footer / support rules that set their own !important transition yield */
 .nx-lab-lol :is(*,#nxl-rm),.nx-lab-lol :is(*,#nxl-rm)::before,.nx-lab-lol :is(*,#nxl-rm)::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .nxl-banner-keys a:hover{transform:none}
}
/* measure: body copy in the hub heads and the item banner stays under ~70 characters */
.nx-lab-lol .nxl-hub .riftlab-panel-head p,.nx-lab-lol .nxl-itembanner .rl54-hero-copy p{max-width:68ch}

/* Riot API cards (only printed while the owner switched them on) */
.nxl-riot{margin-block:28px}
.nxl-riot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.nxl-riot-card{display:grid;gap:10px;align-content:start;padding:16px;border:1px solid var(--nxl-line,#1f2d25);border-radius:14px;background:var(--nxl-s2,#131a16)}
.nxl-riot-card h3,.nxl-riot-card h4{margin:0;font-size:20px;line-height:1.25}
.nxl-riot-card label{display:grid;gap:6px;font-size:14px;color:#a9b6ae}
.nxl-riot-card input,.nxl-riot-card select{min-height:46px;padding:0 12px;border:1px solid var(--nxl-line,#1f2d25);border-radius:10px;background:var(--nxl-s1,#0d1210);color:inherit;font:500 16px/1 inherit}
.nxl-riot-line{display:grid;gap:2px;padding-block:6px;border-block-end:1px solid var(--nxl-line,#1f2d25)}
.nxl-riot-line small{color:#a9b6ae}
.nxl-riot-line span{color:#a9b6ae;font-size:14px}
.nxl-riot-err{color:#f0c9a0;margin:0}
.nxl-riot-top{margin:0;padding-inline-start:0;list-style:none;display:grid;gap:6px;counter-reset:nxr}
.nxl-riot-top li{counter-increment:nxr;display:grid;grid-template-columns:28px 1fr;grid-template-areas:"n b" "n s";column-gap:8px}
.nxl-riot-top li::before{content:counter(nxr);grid-area:n;align-self:center;color:#a9b6ae;font-weight:700}
.nxl-riot-top b{grid-area:b}.nxl-riot-top span{grid-area:s;color:#a9b6ae;font-size:14px}
.nxl-riot-mastery{margin:6px 0 0;padding-inline-start:18px}

.nx-lab-lol .rl-art-credit,.nx-lab-lol .rl-hub-source{max-width:68ch}

/* gate fixes (ux-ui-agent-skills): the banner art never exceeds its frame (no inherited scale), the ambient wash is not scaled past the
   viewport, hub counts and the side-card hover keep AA contrast */
.nx-lab-lol .nxl-banner .nxl-banner-art .nxl-banner-img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;min-width:0;transform:none;object-fit:cover}
[dir=rtl] .nx-lab-lol .nxl-banner .nxl-banner-art .nxl-banner-img{transform:scaleX(-1)}
.nx-lab-lol .nxl-hero .nxl-hero-ambient img{transform:none}
.nx-lab-lol .nxl-filters button small{opacity:1;color:var(--nxl-text-2)}
.nx-lab-lol .nxl-filters button.on small{color:inherit}
.nx-lab-lol .nxl-lol #nxl-count{color:var(--nxl-text-2);opacity:1}
.nx-lab-lol .nxl-side .rl70-side-actions a:not(.primary):hover{background:var(--nxl-signal-tint);color:var(--nxl-signal);border-color:rgba(69,248,130,.5)}
.nx-lab-lol .nxl-lol .nxl-grid .rl-champion-card small{color:var(--nxl-muted)!important;opacity:1;font-size:11px!important}
@media (max-width:599px){
 .nx-lab-lol .nxl-banner .rl54-hero-actions a[data-nxl-goto="abilities"]{display:none}   /* the hotkey row right below opens the abilities */
 .nxl-hero .nxl-hub-hero .nxl-hero-art::after,.nxl-hub-hero .nxl-hero-art::after{background:linear-gradient(180deg,rgba(10,18,14,.35),rgba(10,18,14,.78) 62%,var(--nxl-bg))}
}
/* 2026-11-06 recent patches of the champion (nxl_lol_patch_history_html) */
.nxl-patches{margin-top:20px}.nxl-ph-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.nxl-ph{padding:10px 12px;border:1px solid var(--nxl-line);border-radius:var(--nxl-r-tile);background:var(--nxl-s1)}
.nxl-ph-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}.nxl-ph-head b a{min-height:24px;display:inline-block}
.nxl-ph-dir{font-size:13px;font-weight:600;text-transform:capitalize}.nxl-ph.buff .nxl-ph-dir{color:#4ade80}.nxl-ph.nerf .nxl-ph-dir{color:#f87171}
.nxl-ph time{font-size:13px;opacity:.75}.nxl-ph ul{margin:6px 0 0;padding-inline-start:18px;font-size:13.5px;overflow-wrap:anywhere}