:root {
  --desktop-ad-height: min(72vh, 520px);
  --desktop-ad-width: min(126px, calc(var(--desktop-ad-height) * 126 / 520));
  --desktop-ad-gap: clamp(10px, 1.8vw, 24px);
  --mobile-ad-height: 58px;
  --mobile-landscape-ad-width: 96px;
  --nested-ad-z-index: 40;
  --nested-ad-mobile-background: #0f1624;
}

.ad-slot {
  z-index: var(--nested-ad-z-index);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.ad-slot[hidden] {
  display: none !important;
}

.nested-ads-disabled .ad-slot {
  display: none !important;
}

.ad-slot-desktop {
  align-self: center;
  width: var(--desktop-ad-width);
  height: var(--desktop-ad-height);
}

.nested-ads-fixed .ad-slot-desktop {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}

.nested-ads-fixed .ad-slot-left {
  left: clamp(10px, 1.8vw, 20px);
}

.nested-ads-fixed .ad-slot-right {
  right: clamp(10px, 1.8vw, 20px);
}

.ad-slot-mobile {
  display: none;
}

.experience-shell > .game-shell {
  grid-column: 2;
}

.ad-image {
  display: block;
  width: 100%;
  height: auto;
}

.ad-image-vertical {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 36px);
  aspect-ratio: 126 / 520;
  object-fit: contain;
}

.ad-image-horizontal {
  width: 100%;
  height: 100%;
  aspect-ratio: 32 / 5;
  object-fit: fill;
}

@media (pointer: coarse), (max-width: 900px) {
  .ad-slot-desktop {
    display: none !important;
  }

  .ad-slot-mobile {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--nested-ad-z-index);
    display: flex;
    justify-content: stretch;
    width: 100vw;
    height: calc(var(--mobile-ad-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--nested-ad-mobile-background);
  }

  html[data-nested-ad-mobile-portrait="hidden"] .ad-slot-mobile {
    display: none !important;
  }

  html[data-nested-ad-mobile-portrait="top"] .ad-slot-mobile {
    top: 0;
    bottom: auto;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: 0;
  }
}

@media (pointer: coarse) and (orientation: landscape), (max-width: 900px) and (orientation: landscape) {
  html[data-nested-ad-mobile-landscape="hidden"] .ad-slot-mobile {
    display: none !important;
  }

  html[data-nested-ad-mobile-landscape="top"] .ad-slot-mobile {
    top: 0;
    bottom: auto;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: 0;
  }

  html[data-nested-ad-mobile-landscape="left-rail"] .ad-slot-mobile,
  html[data-nested-ad-mobile-landscape="right-rail"] .ad-slot-mobile {
    top: 0;
    bottom: 0;
    width: calc(var(--mobile-landscape-ad-width) + env(safe-area-inset-left, 0px));
    height: 100dvh;
    padding: 0;
  }

  html[data-nested-ad-mobile-landscape="left-rail"] .ad-slot-mobile {
    left: 0;
    right: auto;
    padding-left: env(safe-area-inset-left, 0px);
  }

  html[data-nested-ad-mobile-landscape="right-rail"] .ad-slot-mobile {
    left: auto;
    right: 0;
    padding-right: env(safe-area-inset-right, 0px);
  }

  html[data-nested-ad-mobile-landscape="left-rail"] .ad-image-horizontal,
  html[data-nested-ad-mobile-landscape="right-rail"] .ad-image-horizontal {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
}