/* DLE banner slots outside the champion catalog keep their current behavior. */
.wrm2-ad-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--wrm2-line);
  background: var(--wrm2-panel);
  overflow: hidden;
}
.wrm2-ad-label { color: var(--wrm2-subtle); font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.wrm2-ad-slot:empty { display: none; }
.wrm2-ad-slot > * { max-width: 100%; }
.wrm2-home-ad { margin-top: 30px; }
.wrm2-home-ad .wrm2-ad-slot { min-height: 125px; }
.wrm2-mobile-ad { display: none; }

/* One rail width for its grid track, banner frame and OFF ADS button.
   Wide desktop: 300x600 Half Page; normal desktop: 160x600 Wide Skyscraper. */
.wrm2-ad-layout { --wrm2-rail-width: 160px; display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; align-items: start; }
.wrm2-ad-layout:has(> .wrm2-ad-rail) { grid-template-columns: minmax(0,1fr) var(--wrm2-rail-width); }
.wrm2-ad-results { min-width: 0; }
.wrm2-ad-rail { position: sticky; top: calc(var(--wrm2-bar) + 18px); display: grid; gap: 10px; width: var(--wrm2-rail-width); }
/* OFF ADS follows the rail width. The DLE AdSense unit is configured
   separately and is never scaled or resized by this stylesheet. */
.wrm2-ad-off-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: var(--wrm2-rail-width);
  min-height: 42px;
  padding: 8px;
  border: 1px solid color-mix(in srgb,var(--wrm2-mint) 45%,var(--wrm2-line-strong));
  background: var(--wrm2-panel);
  color: var(--wrm2-text);
  font: 900 11px/1 var(--wrm2-font);
  letter-spacing: .08em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease,border-color .15s ease;
}
.wrm2-ad-off-button img { display: block; flex: 0 0 24px; width: 24px; height: 24px; object-fit: contain; }
.wrm2-ad-off-button:hover { border-color: var(--wrm2-mint); background: rgb(28 251 140 / .08); }
.wrm2-ad-off-button:focus-visible { outline: 2px solid var(--wrm2-mint); outline-offset: 2px; }

/* The dashed outline belongs to the placement, not the fallback: it stays
   present if an actual AdSense creative occupies the slot later on. */
.wrm2-ad-frame {
  position: relative;
  isolation: isolate;
  min-width: 0;
  outline: 1px dashed var(--wrm2-line-strong);
  outline-offset: -1px;
  background: linear-gradient(135deg,var(--wrm2-canvas),var(--wrm2-panel2));
}
.wrm2-ad-frame--rail {
  width: var(--wrm2-rail-width);
  height: 600px;
}
.wrm2-ad-frame--anchor { width: 100%; height: 90px; }

/* Compact PRO creative, inspired by the GGLYTICS feature-gate. One real link. */
.wrm2-ad-pro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 17px;
  width: 100%;
  height: 100%;
  padding: 14px 10px;
  color: var(--wrm2-text);
  text-align: center;
  text-decoration: none;
}
.wrm2-ad-pro:hover,
.wrm2-ad-pro:focus-visible { background: rgb(28 251 140 / .06); outline: 1px solid var(--wrm2-mint); outline-offset: -2px; }
.wrm2-ad-pro-mark { display: grid; place-items: center; flex: 0 0 auto; width: 55px; height: 55px; background: rgb(28 251 140 / .06); border: 1px solid rgb(28 251 140 / .25); }
.wrm2-ad-pro-mark img { display: block; width: 42px; height: 42px; object-fit: contain; }
.wrm2-ad-pro-copy { display: grid; justify-items: center; gap: 8px; min-width: 0; }
.wrm2-ad-pro-eyebrow { color: var(--wrm2-muted); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.wrm2-ad-pro-eyebrow b { color: var(--wrm2-mint); }
.wrm2-ad-pro-copy strong { font: 900 16px/1.2 var(--wrm2-display); color: var(--wrm2-text); }
.wrm2-ad-pro-description { color: var(--wrm2-muted); font-size: 11px; line-height: 1.65; }
.wrm2-ad-pro-action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 80%; min-height: 35px; padding: 8px; border: 1px solid var(--wrm2-mint); background: rgb(28 251 140 / .12); color: var(--wrm2-mint); font-size: 10px; font-weight: 900; letter-spacing: .05em; }
.wrm2-ad-pro:hover .wrm2-ad-pro-action,
.wrm2-ad-pro:focus-visible .wrm2-ad-pro-action { background: var(--wrm2-mint); color: var(--wrm2-canvas); }

/* DLE banner output lives inside .wrm2-ad-provider. PRO is the no-fill fallback.
   Do not overlay an active/pending AdSense creative with a clickable promotion. */
.wrm2-ad-provider{display:none;width:100%;height:100%;overflow:hidden;text-align:center}
.wrm2-ad-provider>.adsbygoogle,
.wrm2-ad-provider .adsbygoogle{display:block;max-width:100%;margin-inline:auto}
.wrm2-ad-frame[data-ad-state="pending"] .wrm2-ad-provider,
.wrm2-ad-frame[data-ad-state="filled"] .wrm2-ad-provider{display:block}
.wrm2-ad-frame[data-ad-state="pending"] .wrm2-ad-pro,
.wrm2-ad-frame[data-ad-state="filled"] .wrm2-ad-pro{display:none}
/* Before JS starts, prefer real banners over the fallback if markup is present. */
.wrm2-ad-frame:has(.wrm2-ad-provider>:not(script):not(style)):not([data-ad-state]) .wrm2-ad-pro{display:none}
.wrm2-ad-frame:has(.wrm2-ad-provider>:not(script):not(style)):not([data-ad-state]) .wrm2-ad-provider{display:block}

/* The category-only bottom placement shares the very same PRO creative. */
.wrm2-champions-anchor { position: fixed; z-index: 24; right: 0; bottom: 16px; left: var(--wrm2-sidebar); display: flex; justify-content: center; padding: 0 18px; pointer-events: none; }
@media (min-width: 751px) { .wrm2-app.is-compact .wrm2-champions-anchor { left: var(--wrm2-side-small); } }
.wrm2-champions-anchor-inner { position: relative; width: min(728px,calc(100% - 24px)); height: 90px; pointer-events: auto; box-shadow: 0 14px 36px rgb(0 0 0 / .45); }
.wrm2-ad-frame--anchor .wrm2-ad-pro { flex-direction: row; justify-content: space-between; gap: 14px; padding: 10px 18px; text-align: left; }
.wrm2-ad-frame--anchor .wrm2-ad-pro-mark { width: 52px; height: 52px; }
.wrm2-ad-frame--anchor .wrm2-ad-pro-copy { flex: 1 1 auto; justify-items: start; gap: 3px; }
.wrm2-ad-frame--anchor .wrm2-ad-pro-copy strong { font-size: 15px; }
.wrm2-ad-frame--anchor .wrm2-ad-pro-description { font-size: 10px; }
.wrm2-ad-frame--anchor .wrm2-ad-pro-action { width: auto; min-width: 124px; flex: 0 0 auto; }
.wrm2-champions-anchor-hide { position: absolute; z-index: 1; top: -27px; left: 0; display: inline-flex; align-items: center; gap: 7px; min-height: 27px; padding: 0 9px; border: 1px solid var(--wrm2-line-strong); border-bottom: 0; background: var(--wrm2-mint); color: #07100b; font-weight: 900; font-size: 10px; letter-spacing: .08em; }
.wrm2-champions-anchor-hide img { width: 14px; height: 14px; filter: brightness(0); }
.wrm2-champions-anchor-hide:hover { background: #46ffa3; }
.wrm2-champions-anchor[hidden] { display: none; }


@media (min-width: 1600px) {
  .wrm2-ad-layout { --wrm2-rail-width: 300px; }
}
@media (max-width: 1419px) {
  .wrm2-ad-layout:has(> .wrm2-ad-rail) { grid-template-columns: minmax(0,1fr); }
  .wrm2-ad-rail { display: none; }
}
@media (max-width: 1090px) { .wrm2-champions-anchor { left: 72px; } }
@media (max-width: 750px) {
  .wrm2-home-ad { display: none; }
  .wrm2-mobile-ad { display: block; margin: 12px 0; }
  .wrm2-mobile-ad .wrm2-ad-slot { min-height: 90px; }
  .wrm2-champions-anchor { left: 0; right: 0; bottom: 12px; display: flex; padding: 0 10px; }
  .wrm2-champions-anchor-inner { width: 100%; height: 250px; min-width: 0; }
  .wrm2-ad-frame--anchor { height: 250px; }
  .wrm2-ad-frame--anchor .wrm2-ad-pro { flex-direction: column; justify-content: center; gap: 10px; padding: 14px; text-align: center; }
  .wrm2-ad-frame--anchor .wrm2-ad-pro-mark { width: 55px; height: 55px; }
  .wrm2-ad-frame--anchor .wrm2-ad-pro-mark img { width: 42px; height: 42px; }
  .wrm2-ad-frame--anchor .wrm2-ad-pro-copy { flex: 0 0 auto; justify-items: center; gap: 7px; }
  .wrm2-ad-frame--anchor .wrm2-ad-pro-copy strong { font-size: 16px; }
  .wrm2-ad-frame--anchor .wrm2-ad-pro-description,
  .wrm2-ad-frame--anchor .wrm2-ad-pro-eyebrow { display: initial; }
  .wrm2-ad-frame--anchor .wrm2-ad-pro-action { width: 100%; min-width: 0; min-height: 35px; padding: 8px; font-size: 10px; }
}