/* =========================================================
   Jekpoti — ads (filled from the admin panel)
   ========================================================= */
/* ---------- ads ----------
   Side banners hang outside main, in the page's empty margins: they span main's height (so they never
   reach the footer) and the inner box sticks below the top bar while scrolling. Below 1520px there's no
   room beside the 1100px page, so they simply don't exist; those screens get the opening splash instead. */
.ad-rail {
  display: none;
}
@media (min-width: 1520px) {
  .ad-rail:not([hidden]) {
    display: block;
    position: absolute;
    top: 20px;
    bottom: 40px;
    width: min(300px, calc((100vw - 1100px) / 2 - 48px));
  }
  .ad-rail.left {
    right: calc(100% + 16px);
  }
  .ad-rail.right {
    left: calc(100% + 16px);
  }
}
.ad-box {
  position: sticky;
  top: 84px;
}
.ad-tag {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--muted);
  opacity: .7;
  margin: 0 0 4px 2px;
}
.ad-box a,
.ad-box > img {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.ad-box img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 120px);
  object-fit: contain;
}
/* opening splash: covers the page from the first paint, shows the ad, then fades into the site */
html.ad-lock,
html.ad-lock body {
  overflow: hidden;
}
.ad-splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(900px 600px at 50% 0%, #3b1a6e 0%, transparent 60%), var(--bg);
  transition: opacity .5s ease;
}
.ad-splash.out {
  opacity: 0;
  pointer-events: none;
}
.ad-splash.gone {
  display: none;
}
.ad-splash:not(.show)::before {
  content: '🤡';
  font-size: 44px;
  animation: adwait 1s ease-in-out infinite alternate;
} /* while the ad loads (≤2.5 s) */
@keyframes adwait {
  from {
    opacity: .35;
    transform: scale(.92);
  }
}
.ad-sp {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
} /* appears at full strength at once; only the exit fades */
.ad-splash.show .ad-sp {
  display: flex;
}
.ad-sp .ad-tag {
  margin: 0;
  align-self: flex-start;
}
.ad-sp a,
.ad-sp img {
  display: block;
  border-radius: 14px;
}
.ad-sp img {
  max-width: min(92vw, 520px);
  max-height: calc(100svh - 150px);
  width: auto;
  height: auto;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.ad-sp-bar {
  width: min(60vw, 240px);
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}
.ad-sp-bar::after {
  content: '';
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
}
.ad-splash.in .ad-sp-bar::after {
  width: 100%;
  transition: width var(--dur, 2.5s) linear;
}
.ad-skip {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: 12px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 800;
  font-size: 14px;
}
.ad-splash:not(.show) .ad-skip {
  display: none;
}