/* 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 is layered ABOVE the house promotion, without hiding
   the AdSense unit while it requests an ad. The existing PRO creative is
   visible from first paint and remains in the background during loading.
   Once Google reports a fill, remove the PRO creative entirely so links,
   pointer events and visuals never cover a live advertisement. */
.wrm2-ad-provider{position:absolute;inset:0;display:none;width:100%;height:100%;overflow:hidden;text-align:center;pointer-events:none}
.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="filled"] .wrm2-ad-provider{pointer-events:auto}
.wrm2-ad-frame[data-ad-state="filled"] .wrm2-ad-pro{display:none}
/* Server-rendered banner markup can be present before deferred ads.js runs.
   Keep the AdSense unit visible for sizing, but do NOT blank the PRO fallback. */
.wrm2-ad-frame:has(.wrm2-ad-provider>:not(script):not(style):not(template)):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; }
}