/* ─────────────────────────────────────────────────────────────────────
   Shared ad system for every non-SPA page (watch pages, type/tag hubs,
   fight-of-the-week, static pages): side rails that scroll with the page
   and keep repopulating (driven by /js/ads.js), plus the pinned bottom
   bar. Mirrors the homepage's ad styles — pages that load this do NOT
   load the SPA's style.css.
   ───────────────────────────────────────────────────────────────────── */

/* Molten-red WebGL background — mirrors the SPA's structure (these pages
   load ads.css INSTEAD of style.css): fixed #bg host at z-index:0, a
   transparent body, a solid #060606 html fallback, and a reduced-motion
   hide. The shader (owner's molten-oil-spill /js/molten-metal.js, the same
   one live clipraider.com uses, run on every device) shows through the
   gutters. */
html {
  background: #060606;
}
body {
  /* Transparent so the WebGL molten background (#bg) shows through. */
  background: transparent;
}
#bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
#bg canvas {
  display: block;
}
main,
header,
footer {
  position: relative;
  z-index: 1;
}
/* Reduced motion: collapse the shader to the solid html fallback. */
@media (prefers-reduced-motion: reduce) {
  #bg {
    display: none;
  }
}
/* Shell that flanks the page content with the two side rails. Lifted
   (position:relative + z-index:1) so it stays above the fixed molten
   background. */
.ad-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.ad-shell main {
  flex: 1 1 auto;
  min-width: 0;
}

/* Side rails — a strict alternating ladder (10 01 10 01): the left rail
   starts with the first box; the right rail's first box sits exactly one
   band BELOW it, and each later box lands one band below the previous
   one on its own rail. Going down the page you pass a left ad, then a
   right ad, then a left ad, and so on — never two boxes on the same side
   in a row, never side-by-side at the same height. ads.js appends the
   next box (strictly alternating sides) as the previous one scrolls
   past. Rail boxes are a FIXED 300px tall so the band math holds. */
.ad-rail {
  flex: 0 0 160px;
  width: 160px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 28px;
}
/* One band lower than the left rail (28px + 300px box + 24px gap). */
.ad-rail-right {
  margin-top: 352px;
}
/* Fixed box height = the ladder's band height. box-sizing: border-box is
   scoped here because these pages load ads.css instead of style.css (no
   global reset), so height: 300px is the RENDERED height. */
.ad-rail .ad-banner {
  height: 300px;
  min-height: 300px;
  box-sizing: border-box;
}
/* Every box after the first on its rail skips one band (300px + 24px
   gap), so consecutive boxes on the SAME side land two bands apart and
   interleave cleanly with the other rail's boxes. */
.ad-rail .ad-banner + .ad-banner {
  margin-top: 324px;
}

/* Shared ad box. */
.ad-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px dashed #232326;
  border-radius: 12px;
  background: #111113;
  text-align: center;
  padding: 22px 14px;
  transition: opacity 0.35s ease, min-height 0.45s ease, border-color 0.2s, box-shadow 0.2s;
}
.ad-banner:hover {
  border-color: #e50914;
  box-shadow: 0 0 34px rgba(229, 9, 20, 0.2);
}

.ad-banner-v .ad-text { font-size: 11px; letter-spacing: 1px; }
.ad-banner-v .ad-contact { font-size: 9px; letter-spacing: 0.2px; }

.ad-banner-h {
  flex-direction: row;
  gap: 22px;
  padding: 20px 32px;
}
.ad-banner-h .ad-text { font-size: 20px; }
.ad-banner-h .ad-contact { font-size: 15px; }

.ad-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #8b8b93;
  border: 1px solid #232326;
  border-radius: 4px;
  padding: 2px 7px;
}
.ad-text {
  font-family: "Archivo Black", "Arial Black", Impact, sans-serif;
  letter-spacing: 2px;
  color: #fff;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}
.ad-contact {
  font-weight: 700;
  color: #fff;
  font-size: 12px;
  word-break: break-all;
}

/* Sponsor image banner (AD_IMG / per-slot img) — fills the box's frame. */
.ad-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}
.ad-banner-v .ad-img { width: 100%; height: auto; }
.ad-banner-h .ad-img { max-height: 120px; }

/* Fade phase while a rotating ad swaps its creative. */
.ad-fading { opacity: 0; }

/* Rotating creative size variants. */
.ad-size-v1 { min-height: 300px; }
.ad-size-v2 { min-height: 380px; }
.ad-size-v3 { min-height: 460px; }
.ad-size-h1 { min-height: 64px; }
.ad-size-h2 { min-height: 96px; }
.ad-size-h3 { min-height: 128px; }

/* Rotating creative color themes. */
.ad-theme-classic { background: #111113; }
.ad-theme-sponsored {
  border-color: #b0060f;
  background: linear-gradient(180deg, #1a0d0e, #111113);
}
.ad-theme-sponsored .ad-tag { border-color: #e50914; color: #fff; }
.ad-theme-promoted {
  border-color: #8a6d00;
  background: linear-gradient(180deg, #171503, #111113);
}
.ad-theme-promoted .ad-tag { border-color: #ffd400; color: #ffd400; }
.ad-theme-gradient {
  border-color: #7a1f2a;
  background: linear-gradient(135deg, #1c0d10, #141419 55%, #1d0f06);
}
.ad-theme-gradient .ad-tag { border-color: #c2303e; color: #ff5a66; }

/* Once the viewport is too narrow for 160px rails + a usable column,
   drop the rails. */
@media (min-width: 561px) and (max-width: 1199px) {
  .ad-rail { display: none; }
  .ad-shell { display: block; padding: 0; }
}
/* Phones: rails stay hidden (3 boxes × 84px each eat 43% of a 390px
   screen and forced the video grid to a single column — see style.css).
   The in-between section ads carry the load instead, with smaller text
   so they don't shout over the feed. */
@media (max-width: 560px) {
  .ad-rail { display: none; }
  .ad-shell { display: block; padding: 0; }
  .ad-banner-h { flex-direction: column; gap: 8px; text-align: center; padding: 14px 16px; }
  .ad-banner-h .ad-text { font-size: 13px; letter-spacing: 0.5px; }
  .ad-banner-h .ad-contact { font-size: 10.5px; }
  .ad-in-grid .ad-text { font-size: 13px; letter-spacing: 0.5px; }
  .ad-in-grid .ad-contact { font-size: 10.5px; }
}