/* =========================================================
   TossSpace Sponsored Overlay V11
   Fixes:
   1) site menu dropdown is attached to the sponsored header
   2) removes the duplicated full-screen ad ambience
   3) restores TossSpace's original route/background atmosphere
   4) keeps ONE sponsor creative on the right
   5) softly fades the sponsor creative edges into the TossSpace background
   6) keeps the V5 practical 440px SEND / ROOM / RECEIVE floating tool
========================================================= */

:root {
    --sponsor-tool-width: 440px;
    --sponsor-tool-left: 28px;

    --sponsor-header-top: 18px;
    --sponsor-header-height: 58px;

    --sponsor-menu-width: 390px;
    --sponsor-menu-gap: 8px;

    --sponsor-art-left-gap: 42px;
    --sponsor-art-right: 26px;
    --sponsor-art-top: 34px;
    --sponsor-art-bottom: 34px;

    --sponsor-mobile-stage: clamp(190px, 29svh, 270px);
    --sponsor-rail-rgb: 247, 245, 239;
}

/* =========================================================
   1. RESTORE THE ORIGINAL TOSSSPACE BACKGROUND
========================================================= */

body.sponsored-background-active {
    min-height: 100svh;
    background: transparent !important;
}

/*
   No more second full-screen copy of the advertisement.
   The original immersive backdrop + route mesh becomes the page background.
*/
body.sponsored-background-active::before {
    content: none !important;
    display: none !important;
}

body.sponsored-background-active .immersive-backdrop {
    background:
        linear-gradient(
            120deg,
            #fbf8ef 0%,
            #f5f8f5 45%,
            #f7f4fc 100%
        ) !important;
}

/*
   Restore TossSpace's own soft SEND / ROOM / RECEIVE colour atmosphere.
   The normal CSS already changes this mesh for each route.
*/
body.sponsored-background-active .immersive-backdrop-mesh {
    z-index: 0 !important;
    opacity: .82 !important;
    filter:
        blur(3px)
        saturate(108%) !important;
}

body.sponsored-background-active .immersive-backdrop-grain {
    z-index: 3 !important;
    opacity: .055 !important;
}

body.sponsored-background-active .immersive-backdrop-vignette {
    z-index: 4 !important;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.10),
            transparent 24%,
            transparent 74%,
            rgba(246,244,238,.24)
        ) !important;
}

/*
   The home decorative shapes are inside the homepage content itself.
   Hide those during sponsored mode so the floating tool remains clean.
   The page-level immersive mesh above already supplies the original feel.
*/
body.sponsored-background-active .home-ambient {
    display: none !important;
}

/* =========================================================
   2. ONE AD ONLY — EDGE-TO-EDGE + LEFT FADE ONLY
========================================================= */

@media (min-width: 1100px) {
    /*
       V8:
       - ad touches TOP
       - ad touches BOTTOM
       - ad touches RIGHT
       - only LEFT edge fades into TossSpace
       - no outer rectangle margin
    */
    body.sponsored-background-active .immersive-backdrop-media {
        position: fixed !important;

        top: 0 !important;
        bottom: 0 !important;
        right: 0 !important;

        left:
            calc(
                var(--sponsor-tool-left)
                + var(--sponsor-tool-width)
                - 34px
            ) !important;

        width: auto !important;
        height: auto !important;

        z-index: 2 !important;

        opacity: 1 !important;
        transform: scale(1) !important;
        transform-origin: center center !important;

        overflow: hidden !important;

        border: 0 !important;
        border-radius: 0 !important;

        background-color: transparent !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;

        /*
           Edge-to-edge sponsor mode intentionally uses cover.
           Real sponsor artwork should keep important logo/copy inside a safe area.
        */
        background-size: cover !important;

        /*
           ONLY LEFT edge fades.
           Top / bottom / right remain fully opaque to the viewport edge.
        */
        -webkit-mask-image:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(0,0,0,.04) 2%,
                rgba(0,0,0,.12) 5%,
                rgba(0,0,0,.28) 8%,
                rgba(0,0,0,.52) 12%,
                rgba(0,0,0,.76) 16%,
                rgba(0,0,0,.92) 20%,
                #000 24%,
                #000 100%
            );

        mask-image:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(0,0,0,.04) 2%,
                rgba(0,0,0,.12) 5%,
                rgba(0,0,0,.28) 8%,
                rgba(0,0,0,.52) 12%,
                rgba(0,0,0,.76) 16%,
                rgba(0,0,0,.92) 20%,
                #000 24%,
                #000 100%
            );

        filter: none !important;

        pointer-events: auto !important;
    }

    /* Remove all older duplicate-creative pseudo layers. */
    body.sponsored-background-active
    .immersive-backdrop-media::before,
    body.sponsored-background-active
    .immersive-backdrop-media::after {
        content: none !important;
        display: none !important;
        background-image: none !important;
    }

    /*
       Controlled entrance/rotation animation.
       Layout itself never changes. After animation it always settles at
       top:0 / bottom:0 / right:0 / scale(1).
    */
    body.sponsored-background-active
    .immersive-backdrop-media.sponsor-ad-preparing {
        opacity: 0 !important;
        transform: scale(1.012) !important;
    }

    body.sponsored-background-active
    .immersive-backdrop-media.sponsor-ad-visible {
        opacity: 1 !important;
        transform: scale(1) !important;

        transition:
            opacity 560ms cubic-bezier(.2,.78,.2,1),
            transform 900ms cubic-bezier(.16,.84,.2,1) !important;
    }

    body.sponsored-background-active
    .immersive-backdrop-media.sponsor-ad-swapping {
        opacity: .04 !important;
        transform: scale(.997) !important;

        transition:
            opacity 260ms ease,
            transform 260ms ease !important;
    }

    body.sponsored-background-active
    .immersive-backdrop-media[data-clickable="true"] {
        cursor: pointer !important;
    }

    body.sponsored-background-active
    .immersive-backdrop-media[data-clickable="true"]:focus-visible {
        outline: 3px solid rgba(248,209,118,.96);
        outline-offset: -6px;
    }

    /*
       If UI is placed on the right, mirror everything.
       The ad then touches TOP/BOTTOM/LEFT and only its RIGHT edge fades.
    */
    body.sponsored-background-active[data-sponsor-side="right"]
    .immersive-backdrop-media {
        left: 0 !important;

        right:
            calc(
                var(--sponsor-tool-left)
                + var(--sponsor-tool-width)
                - 34px
            ) !important;

        transform-origin: center center !important;

        -webkit-mask-image:
            linear-gradient(
                270deg,
                transparent 0%,
                rgba(0,0,0,.04) 2%,
                rgba(0,0,0,.12) 5%,
                rgba(0,0,0,.28) 8%,
                rgba(0,0,0,.52) 12%,
                rgba(0,0,0,.76) 16%,
                rgba(0,0,0,.92) 20%,
                #000 24%,
                #000 100%
            );

        mask-image:
            linear-gradient(
                270deg,
                transparent 0%,
                rgba(0,0,0,.04) 2%,
                rgba(0,0,0,.12) 5%,
                rgba(0,0,0,.28) 8%,
                rgba(0,0,0,.52) 12%,
                rgba(0,0,0,.76) 16%,
                rgba(0,0,0,.92) 20%,
                #000 24%,
                #000 100%
            );
    }
}

/* =========================================================
   3. HEADER — FLOATING GLASS, SAME EDGE AS TOOL
========================================================= */

@media (min-width: 1100px) {
    body.sponsored-background-active .modern-header {
        position: fixed !important;
        top: var(--sponsor-header-top) !important;
        left: var(--sponsor-tool-left) !important;
        right: auto !important;

        width: var(--sponsor-tool-width) !important;
        height: var(--sponsor-header-height) !important;

        margin: 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;

        z-index: 90 !important;

        border: 1px solid rgba(255,255,255,.84) !important;
        border-radius: 18px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.92),
                rgba(255,255,255,.74)
            ) !important;

        box-shadow:
            0 16px 42px rgba(34,49,82,.10),
            inset 0 1px 0 rgba(255,255,255,.98) !important;

        backdrop-filter:
            blur(24px)
            saturate(145%) !important;
        -webkit-backdrop-filter:
            blur(24px)
            saturate(145%) !important;
    }

    body.sponsored-background-active[data-sponsor-side="right"]
    .modern-header {
        left: auto !important;
        right: var(--sponsor-tool-left) !important;
    }

    body.sponsored-background-active
    .modern-header .brand-logo {
        width: 36px !important;
        height: 36px !important;
    }

    body.sponsored-background-active
    .modern-header .brand-name {
        font-size: 18px !important;
    }

    body.sponsored-background-active
    .modern-header .header-badge {
        display: none !important;
    }

    body.sponsored-background-active
    .modern-header-actions {
        gap: 6px !important;
    }

    body.sponsored-background-active
    .modern-header .header-account-button,
    body.sponsored-background-active
    .modern-header .account-user-button {
        min-height: 36px !important;
        height: 36px !important;
        padding-inline: 11px !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }

    body.sponsored-background-active
    .modern-header .menu-trigger {
        width: 36px !important;
        height: 36px !important;
    }
}

/* =========================================================
   4. MENU — ATTACH IT TO THE HEADER
========================================================= */

@media (min-width: 1100px) {
    /*
       The normal site menu is anchored to the page's far-right edge.
       That is why it appeared far away from the sponsored header.

       Sponsored mode aligns the menu's RIGHT edge with the header's RIGHT edge.
    */
    body.sponsored-background-active .site-menu-panel {
        position: fixed !important;

        top:
            calc(
                var(--sponsor-header-top)
                + var(--sponsor-header-height)
                + var(--sponsor-menu-gap)
            ) !important;

        left:
            calc(
                var(--sponsor-tool-left)
                + var(--sponsor-tool-width)
                - var(--sponsor-menu-width)
            ) !important;

        right: auto !important;
        bottom: auto !important;

        width: var(--sponsor-menu-width) !important;
        max-width:
            calc(
                100vw
                - (var(--sponsor-tool-left) * 2)
            ) !important;

        max-height:
            calc(
                100dvh
                - var(--sponsor-header-top)
                - var(--sponsor-header-height)
                - var(--sponsor-menu-gap)
                - 18px
            ) !important;

        z-index: 120 !important;

        overflow-y: auto !important;
        overscroll-behavior: contain;

        border-radius: 22px !important;

        background:
            linear-gradient(
                155deg,
                rgba(255,255,255,.94),
                rgba(250,249,246,.82)
            ) !important;

        box-shadow:
            0 28px 78px rgba(28,39,65,.18),
            inset 0 1px 0 rgba(255,255,255,.94) !important;

        backdrop-filter:
            blur(28px)
            saturate(145%) !important;
        -webkit-backdrop-filter:
            blur(28px)
            saturate(145%) !important;
    }

    body.sponsored-background-active[data-sponsor-side="right"]
    .site-menu-panel {
        left: auto !important;

        right:
            calc(
                var(--sponsor-tool-left)
                + var(--sponsor-tool-width)
                - var(--sponsor-menu-width)
            ) !important;
    }

    body.sponsored-background-active .site-menu-backdrop {
        z-index: 80 !important;
        background: rgba(21,30,51,.10) !important;

        backdrop-filter: blur(9px) !important;
        -webkit-backdrop-filter: blur(9px) !important;
    }

    body.sponsored-background-active .modern-header {
        z-index: 100 !important;
    }
}

/* =========================================================
   5. FLOATING TOSSSPACE TOOL
========================================================= */

@media (min-width: 1100px) {
    body.sponsored-background-active
    #homeChoiceView:not(.hidden),
    body.sponsored-background-active
    #sendView:not(.hidden),
    body.sponsored-background-active
    #roomCreateView:not(.hidden),
    body.sponsored-background-active
    #roomLiveView:not(.hidden),
    body.sponsored-background-active
    #receiveCreateView:not(.hidden),
    body.sponsored-background-active
    #receiveLiveView:not(.hidden),
    body.sponsored-background-active
    #receiverView:not(.hidden) {
        position: fixed !important;

        top: 50% !important;
        left: var(--sponsor-tool-left) !important;
        right: auto !important;
        bottom: auto !important;

        width: var(--sponsor-tool-width) !important;
        max-width: var(--sponsor-tool-width) !important;
        min-width: 0 !important;

        max-height:
            calc(
                100svh
                - 160px
            ) !important;

        min-height: 0 !important;

        margin: 0 !important;
        padding: 18px !important;
        box-sizing: border-box !important;

        display: block !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        align-items: stretch !important;
        justify-items: stretch !important;
        gap: 0 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        scrollbar-width: none;

        z-index: 20 !important;

        transform: translateY(-50%) !important;

        border: 1px solid rgba(255,255,255,.84) !important;
        border-radius: 24px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.93),
                rgba(255,255,255,.76)
            ) !important;

        box-shadow:
            0 22px 60px rgba(34,49,82,.14),
            inset 0 1px 0 rgba(255,255,255,.98) !important;

        backdrop-filter:
            blur(28px)
            saturate(145%) !important;
        -webkit-backdrop-filter:
            blur(28px)
            saturate(145%) !important;
    }

    body.sponsored-background-active[data-sponsor-side="right"]
    #homeChoiceView:not(.hidden),
    body.sponsored-background-active[data-sponsor-side="right"]
    #sendView:not(.hidden),
    body.sponsored-background-active[data-sponsor-side="right"]
    #roomCreateView:not(.hidden),
    body.sponsored-background-active[data-sponsor-side="right"]
    #roomLiveView:not(.hidden),
    body.sponsored-background-active[data-sponsor-side="right"]
    #receiveCreateView:not(.hidden),
    body.sponsored-background-active[data-sponsor-side="right"]
    #receiveLiveView:not(.hidden),
    body.sponsored-background-active[data-sponsor-side="right"]
    #receiverView:not(.hidden) {
        left: auto !important;
        right: var(--sponsor-tool-left) !important;
    }

    body.sponsored-background-active
    #homeChoiceView::-webkit-scrollbar,
    body.sponsored-background-active
    #sendView::-webkit-scrollbar,
    body.sponsored-background-active
    #roomCreateView::-webkit-scrollbar,
    body.sponsored-background-active
    #roomLiveView::-webkit-scrollbar,
    body.sponsored-background-active
    #receiveCreateView::-webkit-scrollbar,
    body.sponsored-background-active
    #receiveLiveView::-webkit-scrollbar,
    body.sponsored-background-active
    #receiverView::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
    }

    body.sponsored-background-active #homeChoiceView.hidden,
    body.sponsored-background-active #sendView.hidden,
    body.sponsored-background-active #roomCreateView.hidden,
    body.sponsored-background-active #roomLiveView.hidden,
    body.sponsored-background-active #receiveCreateView.hidden,
    body.sponsored-background-active #receiveLiveView.hidden,
    body.sponsored-background-active #receiverView.hidden {
        display: none !important;
    }

    body.sponsored-background-active .site-footer {
        display: none !important;
    }
}

/* =========================================================
   6. HOME CHOOSER
========================================================= */

@media (min-width: 1100px) {
    body.sponsored-background-active
    #homeChoiceView .home-choice-inner {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.sponsored-background-active
    #homeChoiceView .home-choice-copy {
        margin: 0 0 16px !important;
        text-align: left !important;
    }

    body.sponsored-background-active
    #homeChoiceView .home-status-pill {
        width: fit-content !important;
        margin: 0 !important;
        padding: 6px 9px !important;
        font-size: 10px !important;
        line-height: 1 !important;
    }

    body.sponsored-background-active
    #homeChoiceView .home-choice-copy h1 {
        margin: 14px 0 8px !important;
        font-size: 40px !important;
        line-height: .94 !important;
        letter-spacing: -.055em !important;
    }

    body.sponsored-background-active
    #homeChoiceView .home-choice-copy p {
        margin: 0 !important;
        max-width: none !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    body.sponsored-background-active
    #homeChoiceView .product-choice-grid {
        width: 100% !important;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    body.sponsored-background-active
    #homeChoiceView .product-choice-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 88px !important;
        height: auto !important;

        margin: 0 !important;
        padding: 12px 13px !important;
        box-sizing: border-box !important;

        display: grid !important;
        grid-template-columns:
            48px
            minmax(0,1fr)
            34px !important;

        align-items: center !important;
        gap: 12px !important;

        border: 1px solid rgba(34,49,82,.07) !important;
        border-radius: 18px !important;

        transform: none !important;

        box-shadow:
            0 8px 22px rgba(34,49,82,.045),
            inset 0 1px 0 rgba(255,255,255,.94) !important;
    }

    body.sponsored-background-active
    #homeChoiceView .product-choice-card:hover {
        transform: translateX(3px) !important;
    }

    body.sponsored-background-active
    #homeChoiceView .choice-number {
        display: none !important;
    }

    body.sponsored-background-active
    #homeChoiceView .choice-icon {
        position: static !important;
        width: 48px !important;
        height: 48px !important;
        margin: 0 !important;
        border-radius: 15px !important;
        transform: none !important;
    }

    body.sponsored-background-active
    #homeChoiceView .choice-icon i {
        font-size: 19px !important;
    }

    body.sponsored-background-active
    #homeChoiceView .choice-content {
        margin: 0 !important;
        min-width: 0 !important;
        transform: none !important;
    }

    body.sponsored-background-active
    #homeChoiceView .choice-content strong {
        font-size: 10px !important;
        letter-spacing: .08em !important;
    }

    body.sponsored-background-active
    #homeChoiceView .choice-content > span {
        margin-top: 3px !important;
        font-size: 20px !important;
        line-height: 1.08 !important;
    }

    body.sponsored-background-active
    #homeChoiceView .choice-content small {
        margin-top: 4px !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    body.sponsored-background-active
    #homeChoiceView .choice-arrow {
        position: static !important;
        width: 34px !important;
        height: 34px !important;
        transform: none !important;
    }

    body.sponsored-background-active
    #homeChoiceView .choice-glow {
        opacity: .12 !important;
    }

    body.sponsored-background-active
    #homeChoiceView .home-choice-foot {
        margin-top: 12px !important;
        padding: 9px 10px !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 7px 11px !important;
        border-radius: 13px !important;
        font-size: 10px !important;
        background: rgba(255,255,255,.44) !important;
    }
}

/* =========================================================
   7. SEND / ROOM / RECEIVE CREATE
========================================================= */

@media (min-width: 1100px) {
    body.sponsored-background-active
    #sendView .product-hero,
    body.sponsored-background-active
    #roomCreateView .product-hero,
    body.sponsored-background-active
    #receiveCreateView .product-hero {
        position: static !important;
        top: auto !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        text-align: left !important;
    }

    body.sponsored-background-active
    #sendView .product-hero > .eyebrow,
    body.sponsored-background-active
    #sendView .product-hero > h1,
    body.sponsored-background-active
    #sendView .product-hero > p,
    body.sponsored-background-active
    #roomCreateView .product-hero > .eyebrow,
    body.sponsored-background-active
    #roomCreateView .product-hero > h1,
    body.sponsored-background-active
    #roomCreateView .product-hero > p,
    body.sponsored-background-active
    #receiveCreateView .product-hero > .eyebrow,
    body.sponsored-background-active
    #receiveCreateView .product-hero > h1,
    body.sponsored-background-active
    #receiveCreateView .product-hero > p {
        display: none !important;
    }

    body.sponsored-background-active
    .product-hero::after,
    body.sponsored-background-active
    .room-create-hero.product-hero::after,
    body.sponsored-background-active
    .receive-create-hero.product-hero::after {
        display: none !important;
    }

    body.sponsored-background-active .back-to-choices {
        width: fit-content !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 11px !important;

        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;

        border: 1px solid rgba(34,49,82,.08) !important;
        border-radius: 999px !important;

        color: #536078 !important;
        background: rgba(255,255,255,.62) !important;

        font-size: 11px !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }

    body.sponsored-background-active
    #sendView > .send-card,
    body.sponsored-background-active
    #roomCreateView > .room-create-card,
    body.sponsored-background-active
    #receiveCreateView > .receive-create-card {
        position: static !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;

        display: block !important;
        overflow: visible !important;

        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.sponsored-background-active
    #sendView > .send-card::before,
    body.sponsored-background-active
    #roomCreateView > .room-create-card::before,
    body.sponsored-background-active
    #receiveCreateView > .receive-create-card::before {
        display: none !important;
    }

    body.sponsored-background-active .card-heading {
        width: 100% !important;
        margin: 0 0 16px !important;

        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    body.sponsored-background-active .section-kicker,
    body.sponsored-background-active .field-label {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    body.sponsored-background-active .card-heading h2 {
        margin-top: 4px !important;
        font-size: 27px !important;
        line-height: 1.05 !important;
        letter-spacing: -.03em !important;
    }

    body.sponsored-background-active .limit-note {
        flex: 0 0 120px !important;
        max-width: 120px !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
        text-align: right !important;
    }

    body.sponsored-background-active input,
    body.sponsored-background-active select,
    body.sponsored-background-active textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;

        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    body.sponsored-background-active input,
    body.sponsored-background-active select {
        min-height: 46px !important;
    }

    body.sponsored-background-active textarea {
        min-height: 110px !important;
        resize: vertical !important;
    }

    body.sponsored-background-active
    .primary-button,
    body.sponsored-background-active
    .secondary-button,
    body.sponsored-background-active
    .danger-button {
        min-height: 46px !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

    /* SEND */
    body.sponsored-background-active
    #sendView .drop-zone {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 190px !important;

        padding: 24px !important;
        box-sizing: border-box !important;

        border-radius: 18px !important;
    }

    body.sponsored-background-active
    #sendView .drop-icon {
        width: 54px !important;
        height: 54px !important;
    }

    body.sponsored-background-active
    #sendView .drop-title {
        margin-top: 13px !important;
        font-size: 16px !important;
        line-height: 1.25 !important;
    }

    body.sponsored-background-active
    #sendView .drop-subtitle {
        margin-top: 5px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    body.sponsored-background-active
    #sendView .send-options {
        width: 100% !important;
        margin-top: 16px !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        gap: 9px !important;
    }

    body.sponsored-background-active
    #sendView .field-group {
        width: 100% !important;
    }

    body.sponsored-background-active
    #sendView .privacy-note,
    body.sponsored-background-active
    #sendView .account-policy-note {
        width: 100% !important;
        box-sizing: border-box !important;

        font-size: 11px !important;
        line-height: 1.45 !important;
    }

    body.sponsored-background-active
    #sendView .account-policy-note {
        margin-top: 10px !important;
        padding: 10px 12px !important;
    }

    /* ROOM / RECEIVE */
    body.sponsored-background-active
    #roomCreateView .room-field-wide,
    body.sponsored-background-active
    #receiveCreateView .room-field-wide {
        width: 100% !important;
        margin-top: 16px !important;
    }

    body.sponsored-background-active
    #roomCreateView .room-create-options,
    body.sponsored-background-active
    #receiveCreateView .room-create-options {
        width: 100% !important;
        margin-top: 14px !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        gap: 9px !important;
    }

    body.sponsored-background-active
    #roomCreateView .room-policy-note,
    body.sponsored-background-active
    #receiveCreateView .room-policy-note,
    body.sponsored-background-active
    #receiveCreateView .receive-auth-note {
        width: 100% !important;
        min-height: 0 !important;
        box-sizing: border-box !important;

        font-size: 11px !important;
        line-height: 1.45 !important;
    }

    body.sponsored-background-active
    #receiveCreateView .receive-auth-note {
        margin: 0 0 12px !important;
        padding: 10px 12px !important;
    }

    body.sponsored-background-active
    #roomCreateView #createRoomButton,
    body.sponsored-background-active
    #receiveCreateView #createReceiveButton {
        width: 100% !important;
        margin-top: 14px !important;
    }
}

/* =========================================================
   8. LIVE / RECEIVER
========================================================= */

@media (min-width: 1100px) {
    body.sponsored-background-active
    #roomLiveView > .room-live-card,
    body.sponsored-background-active
    #receiveLiveView > .receive-live-card,
    body.sponsored-background-active
    #receiverView > .receiver-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;

        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.sponsored-background-active
    #roomLiveView h1,
    body.sponsored-background-active
    #receiveLiveView h1,
    body.sponsored-background-active
    #receiverView h1 {
        font-size: 26px !important;
        line-height: 1.06 !important;
    }

    body.sponsored-background-active
    #roomLiveView p,
    body.sponsored-background-active
    #receiveLiveView p,
    body.sponsored-background-active
    #receiverView p {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
}

/* =========================================================
   9. SPONSOR CREDIT
========================================================= */

body.sponsored-background-active
.immersive-backdrop-credit {
    border-color: rgba(255,255,255,.72);
    background: rgba(18,28,48,.60);
    box-shadow:
        0 14px 36px rgba(13,20,35,.20);
}

@media (min-width: 1100px) {
    body.sponsored-background-active
    .immersive-backdrop-credit {
        left: auto !important;
        right: 18px !important;
        top: auto !important;
        bottom: 18px !important;
        transform: none !important;
    }

    body.sponsored-background-active[data-sponsor-side="right"]
    .immersive-backdrop-credit {
        left: 18px !important;
        right: auto !important;
    }
}

.immersive-backdrop-credit[data-clickable="true"] {
    cursor: pointer;
    transition:
        transform 180ms cubic-bezier(.18,.82,.22,1),
        background 180ms ease,
        box-shadow 180ms ease;
}

.immersive-backdrop-credit[data-clickable="true"]:hover {
    transform: translateY(-2px);
    background: rgba(18,28,48,.74);
    box-shadow:
        0 18px 44px rgba(13,20,35,.25);
}

/* =========================================================
   10. PHONE / TABLET
========================================================= */

@media (max-width: 1099px) {
    /*
       Keep the already-successful mobile strategy:
       normal TossSpace background + one dedicated sponsor stage.
       No repeated ad background.
    */
    body.sponsored-background-active .immersive-backdrop-media {
        position: absolute !important;

        top: 76px !important;
        left: 12px !important;
        right: 12px !important;
        bottom: auto !important;

        width: auto !important;
        height: var(--sponsor-mobile-stage) !important;

        z-index: 2 !important;

        opacity: 1 !important;
        transform: none !important;

        border-radius: 26px !important;

        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: contain !important;
        background-color: transparent !important;

        -webkit-mask-image:
            radial-gradient(
                ellipse at center,
                #000 0%,
                #000 62%,
                rgba(0,0,0,.84) 74%,
                rgba(0,0,0,.52) 84%,
                rgba(0,0,0,.22) 92%,
                transparent 100%
            );
        mask-image:
            radial-gradient(
                ellipse at center,
                #000 0%,
                #000 62%,
                rgba(0,0,0,.84) 74%,
                rgba(0,0,0,.52) 84%,
                rgba(0,0,0,.22) 92%,
                transparent 100%
            );

        filter:
            drop-shadow(
                0 14px 32px
                rgba(34,49,82,.055)
            ) !important;

        pointer-events: auto !important;
    }

    body.sponsored-background-active
    .immersive-backdrop-media[data-clickable="true"] {
        cursor: pointer !important;
    }

    body.sponsored-background-active
    .immersive-backdrop-media::before,
    body.sponsored-background-active
    .immersive-backdrop-media::after {
        content: none !important;
        display: none !important;
    }

    body.sponsored-background-active
    .immersive-backdrop-mesh {
        opacity: .72 !important;
    }

    body.sponsored-background-active
    #homeChoiceView,
    body.sponsored-background-active
    #sendView,
    body.sponsored-background-active
    #roomCreateView,
    body.sponsored-background-active
    #roomLiveView,
    body.sponsored-background-active
    #receiveCreateView,
    body.sponsored-background-active
    #receiveLiveView,
    body.sponsored-background-active
    #receiverView {
        margin-top:
            calc(
                var(--sponsor-mobile-stage)
                + 16px
            ) !important;
    }

    body.sponsored-background-active
    .immersive-backdrop-credit {
        top:
            calc(
                76px
                + var(--sponsor-mobile-stage)
                - 42px
            ) !important;

        left: 22px !important;
        right: auto !important;
        bottom: auto !important;

        transform: none !important;
    }
}
/* =========================================================
   11. ADAPTIVE COMPACT DESKTOP / SMALL LAPTOP
   ---------------------------------------------------------
   Large widescreens:
   - keep the immersive V8/V9 edge-to-edge sponsor layout
   - TOP/BOTTOM/RIGHT touch the viewport
   - only LEFT edge fades

   Smaller / taller desktop screens:
   - stop forcing full-bleed cover
   - show the COMPLETE sponsor creative with contain
   - center the creative in the available sponsor region
   - softly fade ALL edges into TossSpace
   - preserve the same click area and rotation animation
========================================================= */

@media
    (min-width: 1100px) and (max-width: 1499px),
    (min-width: 1100px) and (max-height: 760px),
    (min-width: 1100px) and (max-aspect-ratio: 8/5) {

    :root {
        /*
           Give compact screens a little more sponsor room without making the
           TossSpace tool feel cramped.
        */
        --sponsor-tool-width:
            clamp(
                380px,
                34vw,
                420px
            );

        --sponsor-tool-left:
            clamp(
                14px,
                1.6vw,
                24px
            );
    }

    body.sponsored-background-active
    .immersive-backdrop-media {
        /*
           We no longer force all four sides of the creative to the viewport.
           The stage fits inside the remaining sponsor area instead.
        */
        top: 50% !important;
        bottom: auto !important;

        left: auto !important;
        right:
            clamp(
                0px,
                1vw,
                12px
            ) !important;

        /*
           Fit a complete landscape creative in the available width AND height.
           5/3 matches the current TossSpace demo creative family while
           background-size: contain still keeps other advertiser ratios intact.
        */
        width:
            min(
                calc(
                    100vw
                    - var(--sponsor-tool-left)
                    - var(--sponsor-tool-width)
                    + 76px
                ),
                calc(
                    (100svh - 92px)
                    * 1.666667
                )
            ) !important;

        height: auto !important;
        aspect-ratio: 5 / 3 !important;

        background-size: contain !important;
        background-position: center center !important;

        /*
           The element itself now hugs the creative much more closely.
           A large elliptical mask then makes the sponsor image dissolve into
           TossSpace on all four sides rather than looking like a hard banner.
        */
        -webkit-mask-image:
            radial-gradient(
                ellipse 82% 80% at center,
                #000 0%,
                #000 48%,
                rgba(0,0,0,.96) 56%,
                rgba(0,0,0,.84) 64%,
                rgba(0,0,0,.66) 72%,
                rgba(0,0,0,.46) 80%,
                rgba(0,0,0,.27) 87%,
                rgba(0,0,0,.13) 93%,
                rgba(0,0,0,.05) 97%,
                transparent 100%
            ) !important;

        mask-image:
            radial-gradient(
                ellipse 82% 80% at center,
                #000 0%,
                #000 48%,
                rgba(0,0,0,.96) 56%,
                rgba(0,0,0,.84) 64%,
                rgba(0,0,0,.66) 72%,
                rgba(0,0,0,.46) 80%,
                rgba(0,0,0,.27) 87%,
                rgba(0,0,0,.13) 93%,
                rgba(0,0,0,.05) 97%,
                transparent 100%
            ) !important;

        /*
           Stable final position.
           The scale part is deliberately small so the entrance still feels
           alive without causing the creative to visually "jump" sideways.
        */
        transform:
            translateY(-50%)
            scale(1) !important;

        transform-origin:
            center center !important;

        filter:
            saturate(.985)
            contrast(.995)
            drop-shadow(
                0 18px 42px
                rgba(34,49,82,.045)
            ) !important;
    }

    body.sponsored-background-active
    .immersive-backdrop-media.sponsor-ad-preparing {
        opacity: 0 !important;

        transform:
            translateY(-50%)
            scale(1.012) !important;
    }

    body.sponsored-background-active
    .immersive-backdrop-media.sponsor-ad-visible {
        opacity: 1 !important;

        transform:
            translateY(-50%)
            scale(1) !important;

        transition:
            opacity 560ms cubic-bezier(.2,.78,.2,1),
            transform 900ms cubic-bezier(.16,.84,.2,1) !important;
    }

    body.sponsored-background-active
    .immersive-backdrop-media.sponsor-ad-swapping {
        opacity: .05 !important;

        transform:
            translateY(-50%)
            scale(.997) !important;

        transition:
            opacity 260ms ease,
            transform 260ms ease !important;
    }

    /*
       If the TossSpace control rail is intentionally moved to the RIGHT,
       mirror the compact sponsor stage to the LEFT.
    */
    body.sponsored-background-active[data-sponsor-side="right"]
    .immersive-backdrop-media {
        left:
            clamp(
                0px,
                1vw,
                12px
            ) !important;

        right: auto !important;

        background-size: contain !important;

        -webkit-mask-image:
            radial-gradient(
                ellipse 82% 80% at center,
                #000 0%,
                #000 48%,
                rgba(0,0,0,.96) 56%,
                rgba(0,0,0,.84) 64%,
                rgba(0,0,0,.66) 72%,
                rgba(0,0,0,.46) 80%,
                rgba(0,0,0,.27) 87%,
                rgba(0,0,0,.13) 93%,
                rgba(0,0,0,.05) 97%,
                transparent 100%
            ) !important;

        mask-image:
            radial-gradient(
                ellipse 82% 80% at center,
                #000 0%,
                #000 48%,
                rgba(0,0,0,.96) 56%,
                rgba(0,0,0,.84) 64%,
                rgba(0,0,0,.66) 72%,
                rgba(0,0,0,.46) 80%,
                rgba(0,0,0,.27) 87%,
                rgba(0,0,0,.13) 93%,
                rgba(0,0,0,.05) 97%,
                transparent 100%
            ) !important;
    }

    /*
       Sponsor credit stays at the lower corner and does not influence the
       responsive creative sizing.
    */
    body.sponsored-background-active
    .immersive-backdrop-credit {
        right: 14px !important;
        bottom: 14px !important;
    }

    body.sponsored-background-active[data-sponsor-side="right"]
    .immersive-backdrop-credit {
        left: 14px !important;
        right: auto !important;
    }
}

/* =========================================================
   12. VERY NARROW DESKTOP HANDOFF
   ---------------------------------------------------------
   Just above the phone/tablet breakpoint, reduce the tool slightly more.
   This avoids the 1100–1200px range feeling like two columns fighting for
   space while still keeping TossSpace controls readable.
========================================================= */

@media (min-width: 1100px) and (max-width: 1240px) {
    :root {
        --sponsor-tool-width:
            clamp(
                370px,
                35vw,
                404px
            );

        --sponsor-tool-left: 14px;
    }

    body.sponsored-background-active
    .immersive-backdrop-media {
        right: 0 !important;

        width:
            min(
                calc(
                    100vw
                    - var(--sponsor-tool-left)
                    - var(--sponsor-tool-width)
                    + 68px
                ),
                calc(
                    (100svh - 108px)
                    * 1.666667
                )
            ) !important;
    }
}

/* =========================================================
   13. PHONE / TABLET POLISH
   ---------------------------------------------------------
   Existing mobile behavior already uses contain. V10 only makes the sponsor
   stage slightly more flexible and fades all edges more gently.
========================================================= */

@media (max-width: 1099px) {
    :root {
        --sponsor-mobile-stage:
            clamp(
                205px,
                31svh,
                300px
            );
    }

    body.sponsored-background-active
    .immersive-backdrop-media {
        background-size: contain !important;

        -webkit-mask-image:
            radial-gradient(
                ellipse 88% 84% at center,
                #000 0%,
                #000 52%,
                rgba(0,0,0,.94) 61%,
                rgba(0,0,0,.78) 70%,
                rgba(0,0,0,.56) 79%,
                rgba(0,0,0,.34) 87%,
                rgba(0,0,0,.16) 94%,
                transparent 100%
            ) !important;

        mask-image:
            radial-gradient(
                ellipse 88% 84% at center,
                #000 0%,
                #000 52%,
                rgba(0,0,0,.94) 61%,
                rgba(0,0,0,.78) 70%,
                rgba(0,0,0,.56) 79%,
                rgba(0,0,0,.34) 87%,
                rgba(0,0,0,.16) 94%,
                transparent 100%
            ) !important;
    }
}
/* V11: soft ambient blend under contained sponsor creatives */
@media
    (min-width: 1100px) and (max-width: 1499px),
    (min-width: 1100px) and (max-height: 760px),
    (min-width: 1100px) and (max-aspect-ratio: 8/5) {

    body.sponsored-background-active::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1;
        pointer-events: none;

        background:
            radial-gradient(
                ellipse 54% 60% at 74% 50%,
                rgba(255,255,255,.06) 0%,
                rgba(255,255,255,.035) 42%,
                transparent 78%
            );

        mix-blend-mode: soft-light;
        opacity: .72;
    }
}

/* =========================================================
/* =========================================================
   V13 — DESKTOP RIGHT-ALIGNED SPONSOR CREATIVE
   ---------------------------------------------------------
   Product rule:
   - Desktop (>= 1100px): keep the sponsor creative fully visible and centered
     vertically; DO NOT force it to touch the top or bottom viewport edges.
   - The creative/stage is anchored to the OUTER screen edge only (right side
     when the TossSpace tool floats on the left).
   - Size is limited by BOTH the horizontal space beside the floating tool and
     the viewport height, so smaller laptops shrink the ad instead of cropping.
   - A soft fade on the edge facing the TossSpace tool allows a small visual
     overlap without hiding the floating functional panel.
   - Phone/tablet behavior below 1100px stays exactly as before.
========================================================= */

@media (min-width: 1100px) {
    body.sponsored-background-active .immersive-backdrop-media {
        position: fixed !important;

        /* Vertically centered — no top/bottom full-bleed. */
        top: 50% !important;
        bottom: auto !important;

        /* The only hard viewport edge is the OUTER RIGHT edge. */
        right: 0 !important;
        left: auto !important;

        /*
           Use all safe horizontal room beside the floating tool, but also cap
           by viewport height. This is what prevents small laptop screens from
           "eating" the sponsor artwork.
        */
        width:
            min(
                calc(
                    100vw
                    - var(--sponsor-tool-left)
                    - var(--sponsor-tool-width)
                    + 72px
                ),
                calc(
                    (100svh - 104px)
                    * 1.666667
                )
            ) !important;

        height: auto !important;
        aspect-ratio: 5 / 3 !important;

        z-index: 2 !important;
        overflow: hidden !important;

        border: 0 !important;
        border-radius: 0 !important;

        background-color: transparent !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        background-position: right center !important;

        opacity: 1 !important;
        transform: translateY(-50%) scale(1) !important;
        transform-origin: center center !important;

        /* Only the edge facing the TossSpace floating panel fades. */
        -webkit-mask-image:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(0,0,0,.05) 4%,
                rgba(0,0,0,.16) 8%,
                rgba(0,0,0,.38) 13%,
                rgba(0,0,0,.66) 18%,
                rgba(0,0,0,.88) 23%,
                #000 28%,
                #000 100%
            ) !important;

        mask-image:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(0,0,0,.05) 4%,
                rgba(0,0,0,.16) 8%,
                rgba(0,0,0,.38) 13%,
                rgba(0,0,0,.66) 18%,
                rgba(0,0,0,.88) 23%,
                #000 28%,
                #000 100%
            ) !important;

        filter: none !important;
        pointer-events: auto !important;
    }

    /* No duplicate ambient/full-height pseudo artwork. */
    body.sponsored-background-active
    .immersive-backdrop-media::before,
    body.sponsored-background-active
    .immersive-backdrop-media::after {
        content: none !important;
        display: none !important;
        background-image: none !important;
    }

    /* Keep ad rotation animation while preserving the fixed right alignment. */
    body.sponsored-background-active
    .immersive-backdrop-media.sponsor-ad-preparing {
        opacity: 0 !important;
        transform: translateY(-50%) scale(1.012) !important;
    }

    body.sponsored-background-active
    .immersive-backdrop-media.sponsor-ad-visible {
        opacity: 1 !important;
        transform: translateY(-50%) scale(1) !important;
        transition:
            opacity 560ms cubic-bezier(.2,.78,.2,1),
            transform 900ms cubic-bezier(.16,.84,.2,1) !important;
    }

    body.sponsored-background-active
    .immersive-backdrop-media.sponsor-ad-swapping {
        opacity: .05 !important;
        transform: translateY(-50%) scale(.997) !important;
        transition:
            opacity 260ms ease,
            transform 260ms ease !important;
    }

    /*
       If the TossSpace functional rail is intentionally placed on the RIGHT,
       mirror the same rule: only the OUTER LEFT edge touches the viewport.
    */
    body.sponsored-background-active[data-sponsor-side="right"]
    .immersive-backdrop-media {
        left: 0 !important;
        right: auto !important;

        background-position: left center !important;

        -webkit-mask-image:
            linear-gradient(
                270deg,
                transparent 0%,
                rgba(0,0,0,.05) 4%,
                rgba(0,0,0,.16) 8%,
                rgba(0,0,0,.38) 13%,
                rgba(0,0,0,.66) 18%,
                rgba(0,0,0,.88) 23%,
                #000 28%,
                #000 100%
            ) !important;

        mask-image:
            linear-gradient(
                270deg,
                transparent 0%,
                rgba(0,0,0,.05) 4%,
                rgba(0,0,0,.16) 8%,
                rgba(0,0,0,.38) 13%,
                rgba(0,0,0,.66) 18%,
                rgba(0,0,0,.88) 23%,
                #000 28%,
                #000 100%
            ) !important;
    }

    body.sponsored-background-active .immersive-backdrop-credit {
        right: 14px !important;
        bottom: 14px !important;
    }

    body.sponsored-background-active[data-sponsor-side="right"]
    .immersive-backdrop-credit {
        left: 14px !important;
        right: auto !important;
    }
}

/* =========================================================
   V14 — SOFTER 3-SIDE FADE + WORKING UI TINT
   ---------------------------------------------------------
   Desktop product rule:
   - RIGHT edge stays hard-aligned to the viewport.
   - LEFT, TOP and BOTTOM edges visibly dissolve into TossSpace.
   - Keep the complete creative visible; do not force top/bottom full bleed.
   - ui_tint now colours the ambient blend behind the sponsor stage.
========================================================= */

body.sponsored-background-active .immersive-backdrop {
    background:
        radial-gradient(
            ellipse 74% 82% at 84% 50%,
            rgba(var(--sponsor-rail-rgb), .22) 0%,
            rgba(var(--sponsor-rail-rgb), .13) 38%,
            rgba(var(--sponsor-rail-rgb), .055) 62%,
            transparent 82%
        ),
        linear-gradient(
            120deg,
            #fbf8ef 0%,
            #f5f8f5 45%,
            #f7f4fc 100%
        ) !important;
}

@media (min-width: 1100px) {
    body.sponsored-background-active .immersive-backdrop-media {
        /*
           Intersect a horizontal LEFT fade with a vertical TOP/BOTTOM fade.
           The RIGHT edge remains fully opaque so it still visually meets the
           edge of the viewport exactly as requested.
        */
        -webkit-mask-image:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(0,0,0,.08) 5%,
                rgba(0,0,0,.24) 10%,
                rgba(0,0,0,.50) 17%,
                rgba(0,0,0,.76) 24%,
                rgba(0,0,0,.93) 30%,
                #000 35%,
                #000 100%
            ),
            linear-gradient(
                180deg,
                transparent 0%,
                rgba(0,0,0,.22) 4%,
                rgba(0,0,0,.58) 8%,
                rgba(0,0,0,.86) 12%,
                #000 16%,
                #000 84%,
                rgba(0,0,0,.86) 88%,
                rgba(0,0,0,.58) 92%,
                rgba(0,0,0,.22) 96%,
                transparent 100%
            ) !important;

        -webkit-mask-composite:
            source-in !important;

        mask-image:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(0,0,0,.08) 5%,
                rgba(0,0,0,.24) 10%,
                rgba(0,0,0,.50) 17%,
                rgba(0,0,0,.76) 24%,
                rgba(0,0,0,.93) 30%,
                #000 35%,
                #000 100%
            ),
            linear-gradient(
                180deg,
                transparent 0%,
                rgba(0,0,0,.22) 4%,
                rgba(0,0,0,.58) 8%,
                rgba(0,0,0,.86) 12%,
                #000 16%,
                #000 84%,
                rgba(0,0,0,.86) 88%,
                rgba(0,0,0,.58) 92%,
                rgba(0,0,0,.22) 96%,
                transparent 100%
            ) !important;

        mask-composite:
            intersect !important;
    }

    /* Mirror only the horizontal fade when the functional rail is on right. */
    body.sponsored-background-active[data-sponsor-side="right"]
    .immersive-backdrop-media {
        -webkit-mask-image:
            linear-gradient(
                270deg,
                transparent 0%,
                rgba(0,0,0,.08) 5%,
                rgba(0,0,0,.24) 10%,
                rgba(0,0,0,.50) 17%,
                rgba(0,0,0,.76) 24%,
                rgba(0,0,0,.93) 30%,
                #000 35%,
                #000 100%
            ),
            linear-gradient(
                180deg,
                transparent 0%,
                rgba(0,0,0,.22) 4%,
                rgba(0,0,0,.58) 8%,
                rgba(0,0,0,.86) 12%,
                #000 16%,
                #000 84%,
                rgba(0,0,0,.86) 88%,
                rgba(0,0,0,.58) 92%,
                rgba(0,0,0,.22) 96%,
                transparent 100%
            ) !important;

        -webkit-mask-composite:
            source-in !important;

        mask-image:
            linear-gradient(
                270deg,
                transparent 0%,
                rgba(0,0,0,.08) 5%,
                rgba(0,0,0,.24) 10%,
                rgba(0,0,0,.50) 17%,
                rgba(0,0,0,.76) 24%,
                rgba(0,0,0,.93) 30%,
                #000 35%,
                #000 100%
            ),
            linear-gradient(
                180deg,
                transparent 0%,
                rgba(0,0,0,.22) 4%,
                rgba(0,0,0,.58) 8%,
                rgba(0,0,0,.86) 12%,
                #000 16%,
                #000 84%,
                rgba(0,0,0,.86) 88%,
                rgba(0,0,0,.58) 92%,
                rgba(0,0,0,.22) 96%,
                transparent 100%
            ) !important;

        mask-composite:
            intersect !important;
    }
}