/* Rift Lab 2.0 / P1 (Oct 2026): the Wild Rift | League of Legends switch and the League of Legends view.
   Loaded on the Nexus Lab hub index pages only, after the shared Nexus Lab layers. Markup: layout/rift-game-switch.php, layout/rift-lol-panel.php;
   behaviour and the panel markup: assets/js/pages/rift-lol.js. Logical properties throughout, so Arabic (RTL) mirrors by itself.
   Switching to League of Legends adds `rl-game-lol` to <body>: that class hides the Wild Rift hero copy, the Wild Rift tools and every
   Wild Rift panel; switching back removes it. Nothing here touches a Wild Rift rule. */

body.nx-rift-lab-page{
 --rll-line:var(--nx-line,#1f2d25);--rll-s1:var(--nx-s1,#0d1210);--rll-s2:var(--nx-s2,#131a16);--rll-s3:var(--nx-s3,#1a241e);
 --rll-text:var(--nx-text,#f2f4f6);--rll-muted:#a9b6ae;--rll-accent:var(--nx-signal,#45f882);--rll-gold:#e3b86a;
}

/* ---- the switch (in the hero) ---------------------------------------------------------------- */
.rl-game-switch{
 display:inline-flex;gap:4px;margin-block:18px 0;margin-inline-end:12px;padding:4px;max-width:100%;
 border:1px solid var(--nx-line-strong,#2f4337);border-radius:999px;background:rgba(10,18,14,.72);
 -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.rl-game-opt{
 appearance:none;border:0;cursor:pointer;min-height:44px;padding:0 20px;border-radius:999px;background:transparent;color:#cfdbd3;
 font:700 15px/1 var(--nx-font,inherit);white-space:nowrap;
}
.rl-game-opt:hover:not(.on){color:#fff;background:rgba(69,248,130,.14)}
.rl-game-opt.on{color:#04140a;background:var(--rll-accent,#45f882)}
.rl-game-opt:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px rgba(69,248,130,.55)}
@media (max-width:480px){.rl-game-switch{display:flex;width:100%}.rl-game-opt{flex:1 1 0;padding:0 10px;font-size:14px;white-space:normal;line-height:1.2}}
@media (prefers-reduced-motion:no-preference){.rl-game-opt{transition:background-color .15s,color .15s}}

/* ---- League of Legends mode: hide the Wild Rift page, show the League panel ----------------------- */
.rl-lol-panel[hidden]{display:none!important}
body.rl-game-lol .riftlab-body > .container > :not(#rl-lol-panel){display:none!important}
body.rl-game-lol .riftlab-hero :is(.riftlab-hero-title,.riftlab-hero-lead,.rlt-hero-meta,.riftlab-tabs,#rl-patch,.rl-detail-crumbs){display:none!important}

/* ---- the League panel -------------------------------------------------------------------------- */
.rl-lol-panel{color:var(--rll-text);font-size:16px;line-height:1.55;padding-block:8px 32px}
.rl-lol-panel h2,.rl-lol-panel h3,.rl-lol-panel h4{margin:0}
.rl-lol-banner{
 display:grid;gap:8px;margin-block-end:20px;padding:16px 18px;border:1px solid var(--rll-line);border-inline-start:4px solid var(--rll-gold);
 border-radius:14px;background:var(--rll-s2);
}
.rl-lol-badge{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rl-lol-badge b{font:800 20px/1.2 var(--nx-font-display,inherit)}
.rl-lol-patch{padding:4px 12px;border-radius:999px;background:rgba(227,184,106,.14);border:1px solid rgba(227,184,106,.5);color:#f6e3b8;font-weight:700;font-size:14px}
.rl-lol-which{margin:0;color:#d6e2da}
.rl-lol-soon{display:flex;align-items:center;gap:10px;margin:0;color:#f6e3b8;font-weight:650}
.rl-lol-soon i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--rll-gold);box-shadow:0 0 0 4px rgba(227,184,106,.2)}
.rl-lol-state{padding:28px 18px;text-align:center;color:var(--rll-muted)}
.rl-lol-btn{appearance:none;cursor:pointer;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--rll-accent);background:transparent;color:var(--rll-accent);font:700 15px/1 inherit}

.rl-lol-tabs{display:flex;gap:4px;margin-block-end:18px;padding:5px;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none;border:1px solid var(--rll-line);border-radius:14px;background:#090e12}
.rl-lol-tabs::-webkit-scrollbar{display:none}
.rl-lol-tab{appearance:none;border:0;cursor:pointer;min-height:44px;padding:0 18px;border-radius:10px;background:transparent;color:#b9c7be;font:700 15px/1 inherit;white-space:nowrap}
.rl-lol-tab small{margin-inline-start:6px;font-size:13px;opacity:.8}
.rl-lol-tab:hover:not(.on){color:#fff;background:rgba(69,248,130,.12)}
.rl-lol-tab.on{color:#04140a;background:var(--rll-accent)}
.rl-lol-tab:focus-visible,.rl-lol-chip:focus-visible,.rl-lol-tile:focus-visible,.rl-lol-back:focus-visible,.rl-lol-chipitem:focus-visible,.rl-lol-btn:focus-visible,.rl-lol-search input:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px rgba(69,248,130,.55)}
.rl-lol-view:focus{outline:0}

.rl-lol-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-block-end:16px}
.rl-lol-search{flex:1 1 260px;max-width:420px}
.rl-lol-search input{width:100%;min-height:46px;padding:0 16px;border:1px solid var(--rll-line);border-radius:12px;background:var(--rll-s1);color:var(--rll-text);font:500 16px/1 inherit}
.rl-lol-chips{display:flex;flex-wrap:wrap;gap:8px}
.rl-lol-chip{appearance:none;cursor:pointer;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--rll-line);background:var(--rll-s2);color:#cfdbd3;font:650 14px/1 inherit}
.rl-lol-chip.on{border-color:var(--rll-accent);background:rgba(69,248,130,.16);color:#fff}
.rl-lol-count{color:var(--rll-muted);font-size:14px;margin-inline-start:auto}

.rl-lol-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.rl-lol-grid-items{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.rl-lol-tile{
 appearance:none;cursor:pointer;display:grid;justify-items:center;gap:4px;padding:12px 8px;min-height:44px;text-align:center;
 border:1px solid var(--rll-line);border-radius:14px;background:var(--rll-s2);color:var(--rll-text);font:inherit;
}
.rl-lol-tile:hover{border-color:rgba(69,248,130,.55);background:var(--rll-s3)}
.rl-lol-tile b{font-size:15px;line-height:1.25;overflow-wrap:anywhere}
.rl-lol-tile small{color:var(--rll-muted);font-size:13px;line-height:1.3}
.rl-lol-ico{width:56px;height:56px;border-radius:12px;background:var(--rll-s1);object-fit:cover}
.rl-lol-grid-items .rl-lol-ico{width:48px;height:48px;border-radius:8px}
.rl-lol-ico-s{width:28px;height:28px;border-radius:6px;background:var(--rll-s1);vertical-align:middle;margin-inline-end:8px}
.rl-lol-empty{grid-column:1/-1;color:var(--rll-muted);padding:24px 0}

.rl-lol-back{appearance:none;cursor:pointer;min-height:44px;padding:0 16px;margin-block-end:14px;border:1px solid var(--rll-line);border-radius:999px;background:var(--rll-s2);color:#d6e2da;font:650 15px/1 inherit}
.rl-lol-back:hover{border-color:rgba(69,248,130,.55);color:#fff}
.rl-lol-head{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-block-end:18px}
.rl-lol-portrait{width:96px;height:96px;border-radius:18px;background:var(--rll-s1);object-fit:cover;border:1px solid var(--rll-line)}
.rl-lol-eyebrow{display:block;color:var(--rll-gold);font-weight:700;font-size:14px}
.rl-lol-head h2{font:800 32px/1.15 var(--nx-font-display,inherit)}
.rl-lol-head h2:focus{outline:0}
.rl-lol-title{margin:2px 0 8px;color:#d6e2da;font-size:17px}
.rl-lol-chips-static{display:flex;flex-wrap:wrap;gap:8px}
.rl-lol-pill{padding:5px 12px;border-radius:999px;background:var(--rll-s3);border:1px solid var(--rll-line);color:#d6e2da;font-size:14px;font-weight:600}
.rl-lol-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px;margin-block-end:14px}
.rl-lol-card,.rl-lol-tips{padding:16px 18px;border:1px solid var(--rll-line);border-radius:14px;background:var(--rll-s2);margin-block-end:14px}
.rl-lol-cols > .rl-lol-card,.rl-lol-cols > .rl-lol-tips{margin-block-end:0}
.rl-lol-card h3,.rl-lol-tips h3{font:800 18px/1.3 var(--nx-font-display,inherit);margin-block-end:10px}
.rl-lol-stats{display:grid;gap:6px;margin:0}
.rl-lol-stats div{display:flex;justify-content:space-between;gap:12px;padding-block:6px;border-block-end:1px solid rgba(255,255,255,.06)}
.rl-lol-stats dt{color:var(--rll-muted)}
.rl-lol-stats dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;text-align:end}
.rl-lol-stats dd small{font-weight:500;color:var(--rll-muted)}
.rl-lol-meter{display:grid;grid-template-columns:96px 1fr 48px;align-items:center;gap:10px;margin-block-end:10px}
.rl-lol-meter i{display:block;height:8px;border-radius:99px;background:var(--rll-s1);overflow:hidden}
.rl-lol-meter i b{display:block;height:100%;background:var(--rll-accent);border-radius:99px}
.rl-lol-meter bdi{text-align:end;font-variant-numeric:tabular-nums;color:var(--rll-muted);font-size:14px}
.rl-lol-abilities{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rl-lol-ability{display:flex;gap:14px;align-items:flex-start;padding-block-end:14px;border-block-end:1px solid rgba(255,255,255,.06)}
.rl-lol-ability:last-child{border-block-end:0;padding-block-end:0}
.rl-lol-aico{flex:none;width:48px;height:48px;border-radius:10px;background:var(--rll-s1)}
.rl-lol-ability h4{font:750 17px/1.3 inherit;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rl-lol-slot{display:inline-grid;place-items:center;min-width:28px;height:26px;padding:0 8px;border-radius:7px;background:var(--rll-accent);color:#04140a;font-size:13px;font-weight:800}
.rl-lol-text p{margin:6px 0 0}
.rl-lol-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-block-start:8px;color:var(--rll-muted);font-size:14px}
.rl-lol-tips ul{margin:0;padding-inline-start:20px;display:grid;gap:8px}
.rl-lol-soon-card{border-color:rgba(227,184,106,.45);background:rgba(227,184,106,.07)}
.rl-lol-soon-card p{margin:0;color:#f6e3b8;font-weight:650}
.rl-lol-itemstats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:8px}
.rl-lol-itemstats li{padding:8px 12px;border-radius:10px;background:var(--rll-s1)}
.rl-lol-itemstats b{color:var(--rll-accent)}
.rl-lol-chipitems{display:flex;flex-wrap:wrap;gap:8px}
.rl-lol-chipitem{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 8px;border:1px solid var(--rll-line);border-radius:999px;background:var(--rll-s1);color:var(--rll-text);font:650 14px/1 inherit}
.rl-lol-chipitem:hover{border-color:rgba(69,248,130,.55)}
.rl-lol-runes{list-style:none;margin:0 0 10px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:10px}
.rl-lol-runes li{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:10px;background:var(--rll-s1)}
.rl-lol-runes img{flex:none;width:36px;height:36px;margin:0}
.rl-lol-runes b{display:block}
.rl-lol-runes span{color:var(--rll-muted);font-size:14px}
.rl-lol-credit{margin-block-start:24px;padding-block-start:14px;border-block-start:1px solid var(--rll-line);color:var(--rll-muted);font-size:13px;line-height:1.5}
.rl-lol-credit p{margin:0 0 6px}
.rl-lol-credit b{color:#d6e2da}
@media (max-width:640px){.rl-lol-head h2{font-size:26px}.rl-lol-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.rl-lol-meter{grid-template-columns:78px 1fr 44px}.rl-lol-count{margin-inline-start:0;width:100%}}
body.rl-game-lol .riftlab-hero{min-height:0!important;padding-block:32px 24px!important}
/* Rift Lab 3: counters with reasons, the draft assistant and the link to the full page (League of Legends view) */
.rl-lol-note{margin:0 0 10px;color:var(--rll-muted);font-size:14px;line-height:1.55}
.rl-lol-fullpage{margin:14px 0 0}
.rl-lol-fullpage a{color:var(--rll-accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.rl-lol-counter-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rl-lol-counter-list>li{padding:10px 12px;border-radius:10px;background:var(--rll-s1)}
.rl-lol-counter-name{display:inline-block;margin-block-end:4px;color:#fff;font-weight:750;text-decoration:underline;text-underline-offset:3px}
.rl-lol-lanes{display:flex;flex-wrap:wrap;gap:8px;margin-block:10px}
.rl-lol-pick{display:grid;gap:10px;align-content:start}
.rl-lol-draftin{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--rll-line);border-radius:10px;background:var(--rll-s1);color:inherit;font:inherit}
.rl-lol-draftin:focus-visible{outline:2px solid var(--rll-accent);outline-offset:2px}
.rl-lol-engine{margin-block-start:14px}
.rl-lol-engine .rl-eng-avatar{width:40px;height:40px;border-radius:10px}
.rl-game-links{margin:10px 0 0;font-size:14px;color:var(--rll-muted,#a9b8af)}
.rl-game-links a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.rl-game-links a:hover{color:#fff}