/* Reference site (play01.arimu.site) ad container rules + layout integration */

.detail-page .detail-info {
  width: 100%;
  max-width: 100%;
}

/* Carousel first, full width of stack (do not set width here — it overrides mobile full-bleed in style.app.css) */
.detail-info > .top-carousel.detail-top-carousel {
  align-self: stretch;
}

/* Reference */
.ads {
  margin: 20px 0;
}

.ads-tips {
  color: #999;
  font-size: 12px;
}

.banner-ad {
}

.box-ad {
  /* Fluid width only — a fixed min-width (e.g. 336px) was wider than the content
     area on many phones once wrapper + detail-page padding were applied. */
  min-width: 0;
  min-height: 350px;
  width: 100%;
  max-width: 100%;
  /* height:100% made the slot match a tall parent and overflow when the ad iframe
     is taller than the box — combined with overflow-x:auto on .ad-banner that
     produced both scrollbars. */
  height: auto;
  overflow: visible;
  box-sizing: border-box;
}

.ad-300x250 {
  max-width: 100%;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 310px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: visible;
}

/* Game + download: section wrapper — do NOT use overflow:auto here; AdSense
   injects iframes slightly larger than min dimensions and scrollbars appeared. */
.ad-banner {
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: visible;
}

.ad-banner.ads {
  padding: 0;
}

.ad-banner__label.ads-tips {
  text-align: center;
  margin: 0 0 8px 0;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Default slot (landing footer only — no .box-ad) */
.ad-banner--landing-footer .ad-banner__slot {
  width: 100%;
  max-width: 100%;
  min-height: 310px;
  display: block;
  box-sizing: border-box;
  min-width: 0;
}

.banner-ad {
  width: 100%;
  max-width: 1220px;
  min-height: 310px;
  margin: 0 auto;
  box-sizing: border-box;
}

.banner-ad--inline {
  max-width: 100%;
  min-height: 310px;
}

#topAds,
#middleAds {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

#topAds .ad-300x250,
#middleAds .ad-300x250 {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

#topAds .adsbygoogle,
#middleAds .adsbygoogle {
  flex: 0 1 auto;
  width: 100%;
  max-width: 100%;
  min-height: 310px;
  /* min-width 320px caused slots wider than narrow phones — responsive ads size to container */
  min-width: 0;
  box-sizing: border-box;
}

.ad-banner__ins {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 310px;
  min-width: 0;
  box-sizing: border-box;
}

/* AdSense sometimes sets iframe width larger than the slot; keep within viewport */
.ad-banner iframe,
.box-ad iframe,
.ad-300x250 iframe {
  max-width: 100% !important;
}

.ad-banner--landing-footer {
  max-width: 1220px;
  min-height: 310px;
  padding: 16px 12px 8px;
}

.page-left .ad-banner {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  max-width: 100%;
  flex-shrink: 0;
}

.ad-banner--game-above-download,
.ad-banner--download-above-download {
  
}

.ad-banner--game-top,
.ad-banner--download-top {
  
}

.detail-info > .ad-banner--game-top,
.detail-info > .ad-banner--download-top {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-self: stretch;
}

@media (min-width: 1024px) {
  .detail-info > .ad-banner--game-top,
  .detail-info > .ad-banner--download-top {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    padding: 18px;
    margin-bottom: 0;
    box-sizing: border-box;
  }

  /* Top banner slot: 1220 × 310 */
  .detail-info > .ad-banner--game-top .banner-ad,
  .detail-info > .ad-banner--download-top .banner-ad {
    max-width: 1220px;
    width: 100%;
  }

  .detail-info > .ad-banner--game-top #topAds,
  .detail-info > .ad-banner--download-top #topAds {
    width: min(1220px, 100%);
    max-width: 1220px;
    min-height: 310px;
    height: 310px;
  }

  .detail-info > .ad-banner--game-top #topAds .ad-300x250,
  .detail-info > .ad-banner--download-top #topAds .ad-300x250 {
    width: 100%;
    height: 100%;
    min-height: 310px;
    max-height: 310px;
  }

  .detail-info > .ad-banner--game-top #topAds .adsbygoogle,
  .detail-info > .ad-banner--download-top #topAds .adsbygoogle {
    min-height: 310px;
    height: 310px;
    max-height: 310px;
  }

  /* Middle slot (page column): 840 × 330 */
  .page-left .ad-banner--game-above-download .banner-ad,
  .page-left .ad-banner--download-above-download .banner-ad {
    max-width: 840px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .page-left #middleAds {
    width: min(840px, 100%);
    max-width: 840px;
    min-height: 330px;
    height: 330px;
  }

  .page-left #middleAds .ad-300x250 {
    width: 100%;
    height: 100%;
    min-height: 330px;
    max-height: 330px;
  }

  .page-left #middleAds .adsbygoogle {
    min-height: 330px;
    height: 330px;
    max-height: 330px;
  }
}