: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;
  --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;
}

.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);
  }
}