/* Rift Lab "Arena" look (Oct 2026) - ONE shared block for every Rift Lab page: draft helper, tier list,
   items, runes, champions (+ detail), counters (+ detail) and the hub. Loaded last by rift-lab.php.
   - Page background and constellation grid: the HOME page's own (assets/css/nexus-vnext-polish.css lists
     body.nx-rift-lab-page next to body.nx-home-v4); nothing here paints the body.
   - Hero banner: layout/rift-hero-art.php prints the neutral ORIGINAL Wild Rift art (assets/img/games/hero/);
     title, one-line lead and the tab strip sit over it on the home page's scrim recipe (assets/css/pages/home-v4.css).
   Presentation only: no markup, URL, SEO, tab, tier-engine or data change. Logical properties so Arabic mirrors;
   no keyframes, nothing hidden, no external request. */

/* ---- hero banner ------------------------------------------------------------------------------ */
body.nx-rift-lab-page .riftlab-hero{
 position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;
 min-height:clamp(268px,25vw,360px);
 padding:clamp(30px,4vw,52px) 0 clamp(22px,2.8vw,32px)!important;
 background:transparent!important;border-bottom:1px solid var(--nx-line,#1f2d25);
}
body.nx-rift-lab-page .riftlab-hero.riftlab-hero-detail{min-height:clamp(210px,19vw,270px)}
/* same box as .riftlab-body>.container (rift-lab-vnext.css) so the banner copy lines up with the panels below */
body.nx-rift-lab-page .riftlab-hero>.container{position:relative;width:min(100% - 36px,1500px);max-width:1500px;margin-inline:auto}
.riftlab-hero-art{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--nx-bg,#07080a);pointer-events:none}
.riftlab-hero-art img{position:absolute;inset-block:0;inset-inline-end:0;display:block;width:min(100%,1180px);height:100%;object-fit:cover;object-position:right center;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 30%,#000 54%);mask-image:linear-gradient(90deg,transparent 0,transparent 30%,#000 54%)}
[dir="rtl"] .riftlab-hero-art img{transform:scaleX(-1)}
/* the home hero's scrim: solid page colour under the copy, the art opens up on the far side, a floor fade into the page */
.riftlab-hero-art::after{
 content:"";position:absolute;inset:0;
 background:
  linear-gradient(180deg,rgba(7,8,10,0) 58%,var(--nx-bg,#07080a) 100%),
  linear-gradient(90deg,var(--nx-bg,#07080a) 0%,rgba(7,8,10,.88) 28%,rgba(7,8,10,.5) 52%,rgba(7,8,10,.1) 76%,rgba(7,8,10,0) 100%);
}
[dir="rtl"] .riftlab-hero-art::after{
 background:
  linear-gradient(180deg,rgba(7,8,10,0) 58%,var(--nx-bg,#07080a) 100%),
  linear-gradient(270deg,var(--nx-bg,#07080a) 0%,rgba(7,8,10,.88) 28%,rgba(7,8,10,.5) 52%,rgba(7,8,10,.1) 76%,rgba(7,8,10,0) 100%);
}
body.nx-rift-lab-page .riftlab-hero .riftlab-kicker{margin-block-end:0}
body.nx-rift-lab-page .riftlab-hero .riftlab-kicker #rl-patch{margin-inline-start:0;margin-left:0}
body.nx-rift-lab-page .riftlab-hero h1,body.nx-rift-lab-page .riftlab-hero p{text-shadow:0 2px 18px rgba(0,0,0,.6)}
body.nx-rift-lab-page .riftlab-hero h1{font-family:var(--nx-font-display,inherit)!important;font-weight:800;color:var(--nx-text,#f2f4f6)}
body.nx-rift-lab-page .riftlab-hero p.riftlab-hero-lead{color:#d6e2da;max-width:62ch;margin-block:0 22px}
body.nx-rift-lab-page .riftlab-hero h1.riftlab-hero-title{margin-block:14px 12px}
/* the tab strip is the banner's navigation: glass over the art, one clear current tab */
body.nx-rift-lab-page .riftlab-hero .riftlab-tabs{
 background:rgba(7,8,10,.72);border-color:var(--nx-line-strong,#2f4337);
 -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
body.nx-rift-lab-page .riftlab-hero .riftlab-tabs a{color:#cfdbd3!important}
body.nx-rift-lab-page .riftlab-hero .riftlab-tabs a.on,
body.nx-rift-lab-page .riftlab-hero .riftlab-tabs a[aria-current="page"]{
 color:#04140a!important;background:var(--nx-signal,#45f882)!important;border-color:var(--nx-signal,#45f882)!important;
}
body.nx-rift-lab-page .riftlab-hero .riftlab-tabs a:hover:not(.on){color:#fff!important;background:rgba(69,248,130,.14)!important}
body.nx-rift-lab-page .rl-detail-crumbs{margin-block-end:6px}
@media (max-width:767px){
 body.nx-rift-lab-page .riftlab-hero{min-height:0;padding-block:26px 20px!important}
 .riftlab-hero-art img{width:100%;object-position:82% center}
 .riftlab-hero-art::after{
  background:linear-gradient(180deg,rgba(7,8,10,.84) 0%,rgba(7,8,10,.62) 55%,var(--nx-bg,#07080a) 100%);
 }
 [dir="rtl"] .riftlab-hero-art::after{
  background:linear-gradient(180deg,rgba(7,8,10,.84) 0%,rgba(7,8,10,.62) 55%,var(--nx-bg,#07080a) 100%);
 }
 body.nx-rift-lab-page .riftlab-hero p.riftlab-hero-lead{margin-block-end:18px}
}

/* ---- body: panels are the home page's panels (green edge, soft top wash) -------------------------- */
body.nx-rift-lab-page .riftlab-body{background:transparent!important;padding-block:clamp(20px,2.4vw,34px) 72px!important} /* the theme's global section{padding:70px!important} left a dead band under the banner */
body.nx-rift-lab-page .riftlab-panel:not([data-panel="champions"]),
body.nx-rift-lab-page .riftlab-panel.rl45-draft-panel{
 background:var(--nx-panel)!important;border-color:var(--nx-panel-line)!important;border-radius:var(--nx-r-card,14px)!important;
}
body.nx-rift-lab-page .riftlab-panel-head>div>span:first-child{
 display:inline-flex;align-items:center;gap:8px;color:var(--nx-signal,#45f882);
 font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
body.nx-rift-lab-page .riftlab-panel-head>div>span:first-child::before{content:"";width:6px;height:16px;border-radius:2px;background:var(--nx-signal,#45f882);flex:none}
body.nx-rift-lab-page .riftlab-panel-head h2{font-family:var(--nx-font-display,inherit)!important;font-weight:800}
body.nx-rift-lab-page .riftlab-panel-head p{color:var(--nx-text-2,#b2b8bf)}
body.nx-rift-lab-page :is(.rl-hub,.rl-seo-spotlight){background:var(--nx-panel);border-color:var(--nx-panel-line)}

/* ---- tier list ------------------------------------------------------------------------------------ */
/* data-source note: an evidence strip with a signal edge, the editorial-estimate label stays in plain sight */
body.nx-rift-lab-page .rl-tier-freshness{
 position:relative;padding:14px 18px;padding-inline-start:22px;border-color:var(--nx-line-strong,#2f4337);
 border-radius:var(--nx-r-control,10px);background:var(--nx-s2,#131a16);overflow:hidden;
}
body.nx-rift-lab-page .rl-tier-freshness::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--nx-signal,#45f882)}
body.nx-rift-lab-page .rl-tier-freshness strong{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--nx-signal,#45f882)}
body.nx-rift-lab-page .rl-tier-freshness .rl-tier-estimate{color:var(--nx-text,#f2f4f6);font-weight:600;line-height:1.6}
body.nx-rift-lab-page .rl-tier-freshness>span:not(.rl-tier-estimate){color:var(--nx-text-2,#b2b8bf)}
/* role filters */
body.nx-rift-lab-page .rl46-tier-roles button{border-radius:var(--nx-r-control,10px)!important;background:var(--nx-s1,#0d1210)!important;color:var(--nx-text-2,#b2b8bf)}
body.nx-rift-lab-page .rl46-tier-roles button:hover{border-color:var(--rlx-strong)!important;color:var(--nx-text,#f2f4f6)}
body.nx-rift-lab-page .rl46-tier-roles button.on,
body.nx-rift-lab-page .rl46-tier-roles button[aria-pressed="true"]{
 background:var(--nx-signal-tint,rgba(69,248,130,.1))!important;border-color:var(--nx-signal,#45f882)!important;color:var(--nx-text,#f2f4f6)!important;
 box-shadow:inset 0 0 0 1px rgba(69,248,130,.25);
}
/* one row per tier: a coloured rank plate (S+ gold, S red, A green, B blue, C violet, D grey) and the roster */
body.nx-rift-lab-page #rl-tier-board{gap:14px}
body.nx-rift-lab-page .rl-tier-row{
 --t:170,180,173;grid-template-columns:96px minmax(0,1fr);gap:16px;
 padding:14px!important; /* beats the theme's global section{padding:100px!important} */
 border-color:var(--nx-line,#1f2d25);border-radius:var(--nx-r-card,14px);
 background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0)),var(--nx-s1,#0d1210);
}
body.nx-rift-lab-page .rl-tier-badge{
 gap:2px;min-height:96px;border:1px solid rgba(var(--t),.5)!important;border-radius:var(--nx-r-control,10px)!important;
 background:linear-gradient(165deg,rgba(var(--t),.24),rgba(var(--t),.07))!important;color:rgb(var(--t));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 22px -12px rgba(var(--t),.55);
}
body.nx-rift-lab-page .rl-tier-badge.tier-sp{--t:247,213,101}
body.nx-rift-lab-page .rl-tier-badge.tier-s{--t:255,139,153}
body.nx-rift-lab-page .rl-tier-badge.tier-a{--t:115,230,166}
body.nx-rift-lab-page .rl-tier-badge.tier-b{--t:125,188,237}
body.nx-rift-lab-page .rl-tier-badge.tier-c{--t:169,163,215}
body.nx-rift-lab-page .rl-tier-badge.tier-d{--t:170,180,173}
body.nx-rift-lab-page .rl-tier-badge strong{direction:ltr;unicode-bidi:isolate;font-family:var(--nx-font-display,inherit);font-size:clamp(28px,3.2vw,36px);font-weight:800;line-height:1;color:rgb(var(--t))}
body.nx-rift-lab-page .rl-tier-badge small{font-size:10px;letter-spacing:.14em;opacity:.92;color:rgb(var(--t))}
/* champion cards */
body.nx-rift-lab-page .rl-tier-champs{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
body.nx-rift-lab-page .rl-tier-champ{
 min-height:76px;border-color:var(--nx-line,#1f2d25)!important;border-radius:var(--nx-r-control,10px)!important;
 background:var(--nx-s2,#131a16)!important;
}
body.nx-rift-lab-page .rl-tier-champ img{width:48px;height:48px;border-radius:10px;border:1px solid rgba(255,255,255,.1);flex:none}
body.nx-rift-lab-page .rl-tier-champ:hover{border-color:var(--rlx-strong)!important;background:var(--nx-s3,#1a241e)!important}
body.nx-rift-lab-page .rl-tier-champ b{font-size:14px;color:var(--nx-text,#f2f4f6)}
body.nx-rift-lab-page .rl-tier-champ small{font-size:12px;color:var(--nx-text-2,#b2b8bf)}
body.nx-rift-lab-page .rl46-source-chip{
 display:inline-block;margin-top:6px;padding:3px 8px!important;font-size:11px!important;font-style:normal;letter-spacing:.02em;
 color:#b9d6c0!important;border:1px solid var(--nx-line-strong,#2f4337)!important;border-radius:var(--nx-r-badge,6px);background:rgba(69,248,130,.06);
}
body.nx-rift-lab-page .rl-tier-metrics{font-size:11px;color:var(--nx-text-2,#b2b8bf);text-wrap:balance}
@media (hover:hover) and (pointer:fine){
 body.nx-rift-lab-page .rl-tier-champ:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(0,0,0,.8)}
}
@media (max-width:860px){
 /* phones and small tablets: the rank plate becomes a slim header strip above a full-width roster instead of a tall side column */
 body.nx-rift-lab-page .rl-tier-row{grid-template-columns:minmax(0,1fr);gap:10px;padding:10px!important}
 body.nx-rift-lab-page .rl-tier-badge{flex-direction:row;justify-content:flex-start;gap:10px;min-height:0;padding:8px 14px;align-self:auto}
 body.nx-rift-lab-page .rl-tier-badge strong{font-size:24px}
 body.nx-rift-lab-page .rl-tier-badge small{font-size:11px;letter-spacing:.12em}
 body.nx-rift-lab-page .rl-tier-champs{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
 body.nx-rift-lab-page .rl-tier-champ img{width:40px;height:40px}
 body.nx-rift-lab-page .rl-tier-champ b{font-size:13px}
 body.nx-rift-lab-page .rl-tier-champ small{font-size:11px}
 body.nx-rift-lab-page .rl46-source-chip{font-size:10px!important;padding:2px 6px!important}
}
@media (max-width:380px){body.nx-rift-lab-page .rl-tier-champs{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
@media (prefers-reduced-motion:reduce){body.nx-rift-lab-page .rl-tier-champ:hover{transform:none!important}}

/* ---- champion guide hero: the V54 cinematic is absolutely positioned copy over splash art; on a short viewport its
   clamp()ed height was smaller than its own copy, so the champion name was clipped at the top. Never shorter than its copy. */
@media (min-width:768px){
 body.nx-rift-lab-page.nx-rift-champion-detail .rl54-champion-cinematic{min-height:440px}
}