/* Tall sponsor creatives extend to the browser edges, not inside the content column. */
.wall {
    position: fixed;
    inset: 0 auto 0 0;
    width: max(0px, calc((100vw - var(--content))/2 - 10px));
    max-width: 430px;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: radial-gradient(ellipse at 55% 78%, rgba(42, 145, 216, .3), transparent 58%), linear-gradient(160deg, #10212e, #0d161f 45%, #09141e)
}

.wall.right {
    left: auto;
    right: 0;
    background: radial-gradient(ellipse at 45% 76%, rgba(237, 185, 65, .22), transparent 65%), linear-gradient(145deg, #221d16, #151711 50%, #101213)
}

.wall::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .5;
    background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .12) 0 1px, transparent 2px) 0 0/56px 56px, linear-gradient(150deg, transparent 45%, rgba(255, 255, 255, .04) 46%, transparent 47%);
    pointer-events: none
}

.wall::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 82%, #080d11);
    pointer-events: none
}

.wall.right::after {
    background: linear-gradient(270deg, transparent 82%, #080d11)
}

.wall-inner {
    height: 100%;
    max-width: 430px;
    position: relative;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 22px 0
}

.wall-brand {
    font-size: 21px;
    font-weight: 1000;
    line-height: 1;
    letter-spacing: -.8px;
    white-space: nowrap
}

.wall-brand em {
    font-style: normal;
    color: #9fdbff
}

.wall.right .wall-brand em {
    color: #ecd087
}

.wall-brand small {
    display: block;
    margin-top: 7px;
    color: #b6c9d3;
    font-size: 9px;
    letter-spacing: .12em;
    font-weight: 850
}

.wall-sep {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
    width: 100%;
    margin: 22px 0
}

.wall-eyebrow {
    font-size: 11px;
    letter-spacing: .24em;
    font-weight: 900;
    color: #8cd8ff
}

.wall.right .wall-eyebrow {
    color: #eccd83
}

.wall h2 {
    font-size: clamp(25px, 2.05vw, 37px);
    margin: 12px 0 0;
    line-height: .99;
    letter-spacing: -1.5px;
    font-weight: 1000;
    text-transform: uppercase;
    text-shadow: 0 5px 24px #0008
}

.wall h2 strong {
    display: block;
    color: #ade8ff
}

.wall.right h2 strong {
    color: #f1d28a
}

.wall-p {
    font-size: 12px;
    max-width: 270px;
    line-height: 1.5;
    color: #d7e0e9;
    font-weight: 650;
    margin: 15px 0
}

.wall-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 19px;
    border: 0;
    border-radius: 9px;
    background: #a2e8ff;
    color: #061721;
    font-weight: 950;
    font-size: 12px;
    box-shadow: 0 8px 35px #37c8fc35
}

.wall.right .wall-cta {
    background: #f3d487;
    color: #272014;
    box-shadow: 0 8px 35px #f2c9572b
}

.wall-player {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(115%, 475px);
    height: min(57vh, 540px);
    object-fit: cover;
    object-position: center top;
    max-width: none;
    mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 90%);
    z-index: 1;
    filter: contrast(1.08) saturate(1.1)
}

.wall.right .wall-player {
    width: min(119%, 495px)
}

.wall-player-label {
    position: absolute;
    bottom: 26px;
    z-index: 2;
    font-weight: 1000;
    line-height: 1.3;
    color: white;
    font-size: 12px;
    letter-spacing: .1em;
    text-shadow: 0 3px 22px black
}

.wall-player-label b {
    display: block;
    font-size: 20px;
    color: #a5e6ff
}

.wall.right .wall-player-label b {
    color: #f4d28b
}

.wall-flag {
    position: absolute;
    bottom: 7px;
    left: 13px;
    z-index: 2;
    font-size: 9px;
    color: #b7c7d0;
    letter-spacing: .13em
}

.wall-full-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    pointer-events: auto;
    text-decoration: none;
    overflow: hidden
}

.wall-full-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform .3s ease
}

.wall-full-link:hover .wall-full-img {
    transform: scale(1.02)
}

.wall-code-wrap {
    width: 100%;
    height: 100%;
    pointer-events: auto;
    overflow: hidden
}

@media(max-width: 1220px) {
    .wall {
        display: none !important
    }
}

.ad-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.ad-grid.ad-single-col {
    grid-template-columns: 1fr
}

.ad-slot {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    min-width: 0;
    border: 1px solid #ffffff15;
    border-radius: 12px;
    transition: transform .2s, border-color .2s, box-shadow .2s;
    min-height: 77px;
    background: #101a18
}

.ad-slot:hover {
    border-color: #dcff6570;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35)
}

.ad-slot.has-image {
    justify-content: center;
    align-items: center;
    padding: 0;
    background: radial-gradient(ellipse at center, #15212a 0%, #090e12 100%)
}

.ad-slot.has-image .ad-art,
.ad-slot.has-image .ad-copy,
.ad-slot.has-image .ad-badge {
    display: none !important
}

.ad-slot img.custom-banner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: auto;
    z-index: 1;
    image-rendering: -webkit-optimize-contrast;
    transition: transform .25s ease
}

.ad-slot.has-image:hover img.custom-banner {
    transform: scale(1.015)
}

.ad-slot-embed {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #ffffff15;
    background: #101a18;
    min-height: 77px
}

.ad-slot .tag {
    position: absolute;
    top: 5px;
    right: 7px;
    color: #c6cfc6;
    background: #0007;
    backdrop-filter: blur(3px);
    border: 1px solid #fff2;
    padding: 2px 6px;
    font-size: 7.5px;
    border-radius: 4px;
    font-weight: 850;
    z-index: 3;
    letter-spacing: .08em;
    text-transform: uppercase;
    pointer-events: none
}

.ad-slot.has-image .tag {
    opacity: .72;
    transition: opacity .2s ease
}

.ad-slot.has-image:hover .tag {
    opacity: 1
}

.ad-art {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(112deg, #0d221b 2%, #0a2019 50%, #104a35 100%)
}

.ad-art::before {
    content: "";
    position: absolute;
    right: -25px;
    top: -85px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 25px solid #75eec316;
    box-shadow: 0 0 0 28px #d4ff8412, 0 0 0 55px #9cee5210;
    transform: rotate(35deg)
}

.ad-blue .ad-art {
    background: linear-gradient(105deg, #111a2b, #112e3d 65%, #153d4e)
}

.ad-blue .ad-art:before {
    border-color: #59cdf52c;
    box-shadow: 0 0 0 28px #94eeff0d, 0 0 0 58px #3fd3ff0b
}

.ad-gold .ad-art {
    background: linear-gradient(105deg, #221c12, #35301a, #3a3519)
}

.ad-gold .ad-art:before {
    border-color: #f7d77825;
    box-shadow: 0 0 0 32px #ffcd5210, 0 0 0 60px #ffc62f09
}

.ad-copy {
    padding: 14px 16px;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 15px #0006
}

.ad-kicker {
    display: block;
    font-size: 8px;
    font-weight: 1000;
    letter-spacing: .17em;
    color: #b9ff64;
    margin-bottom: 5px
}

.ad-blue .ad-kicker {
    color: #72d8ff
}

.ad-gold .ad-kicker {
    color: #f4d98b
}

.ad-main {
    display: block;
    font-size: 21px;
    letter-spacing: -.75px;
    font-weight: 1000;
    line-height: 1.05
}

.ad-main em {
    color: var(--lime);
    font-style: normal
}

.ad-blue .ad-main em {
    color: #5cd8ff
}

.ad-gold .ad-main em {
    color: #f1ce79
}

.ad-sub {
    font-size: 9px;
    font-weight: 750;
    display: block;
    color: #c8d7d2;
    margin-top: 5px
}

.ad-badge {
    position: relative;
    z-index: 2;
    flex: none;
    margin: 0 18px 0 0;
    border-radius: 9px;
    border: 1px solid #d4ff6a69;
    background: #d8ff1410;
    color: #e1ff9d;
    padding: 11px 12px;
    font-size: 10px;
    font-weight: 1000;
    white-space: nowrap
}

.ad-blue .ad-badge {
    border-color: #43d9fb55;
    background: #59d6ff12;
    color: #adf1ff
}

.ad-gold .ad-badge {
    border-color: #efc87165;
    color: #ffe0a3;
    background: #efd18713
}

.ad-row-main {
    margin: 0 0 13px
}

.ad-row-main .ad-slot,
.ad-duo .ad-slot {
    min-height: 60px;
    height: 60px;
}

.ad-row-main .ad-copy,
.ad-duo .ad-copy {
    padding: 7px 14px;
}

.ad-row-main .ad-kicker,
.ad-duo .ad-kicker {
    font-size: 7.5px;
    margin-bottom: 2px;
}

.ad-row-main .ad-main,
.ad-duo .ad-main {
    font-size: 16px;
    line-height: 1.1;
}

.ad-row-main .ad-sub,
.ad-duo .ad-sub {
    font-size: 8px;
    margin-top: 2px;
}

.ad-row-main .ad-badge,
.ad-duo .ad-badge {
    margin: 0 12px 0 0;
    padding: 6px 10px;
    font-size: 9px;
}

.ad-strip,
.ad-bottom {
    min-height: 90px;
    height: 90px;
    margin-top: 12px;
}

.ad-top-leaderboard,
.ad-strip {
    margin-top: 0;
    margin-bottom: 14px;
}

.ad-strip .ad-main,
.ad-bottom .ad-main {
    font-size: 26px;
}

.ad-strip .ad-copy,
.ad-bottom .ad-copy {
    padding: 18px;
}

.ad-strip .ad-sub,
.ad-bottom .ad-sub {
    font-size: 10px;
}

.ad-strip .ad-badge,
.ad-bottom .ad-badge {
    font-size: 11px;
}

/* bottom sponsor is dismissible and never replaces content */
.bottom-floating {
    position: fixed;
    z-index: 16;
    left: 50%;
    bottom: 13px;
    transform: translateX(-50%);
    width: min(728px, calc(100% - 30px));
    box-shadow: 0 16px 65px #000c;
    border-radius: 11px
}

.bottom-floating .ad-slot {
    min-height: 69px;
    margin: 0
}

.bottom-floating .ad-main {
    font-size: 21px
}

.bottom-floating .ad-copy {
    padding: 12px 16px
}

.ad-close {
    position: absolute;
    right: -11px;
    top: -11px;
    z-index: 20;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #78909c;
    background: #141c22;
    color: #f0f4f8;
    display: grid;
    place-items: center;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: all .18s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5)
}

.ad-close:hover {
    background: #ff4d4f;
    border-color: #ff4d4f;
    color: #fff;
    transform: scale(1.12)
}