/* =====================================================
   RevIQ Anchor Ad Layout
   =====================================================

   RevIQ injects into [data-ad="anchor"] and sets its
   dimensions via CSS custom properties (--ad-width,
   --ad-height). Their injected CSS forces both [data-ad] 
   and its immediate child div to those exact dimensions 
   (e.g., 1000x100). The actual ad content (iframe) is 
   smaller (e.g., 300x50) and floats to the top-left 
   inside the oversized child div.

   Two-level centering strategy:

   Level 1 — #reviq-anchor-wrap (our fixed wrapper)
   Uses flex to horizontally center RevIQ's container
   (up to ~1000px wide) in the viewport, bottom-aligned.

   Level 2 — [data-ad="anchor"] & child divs
   Using flex on both [data-ad] and its inner child div 
   ensures the smaller iframe is pushed to the bottom-center
   of the otherwise oversized reserved space.
*/

/* Level 1: Our fixed wrapper */
#reviq-anchor-wrap {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 2147483647 !important;
    pointer-events: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    /* Safe Pinning: Isolate ad rendering from the rest of the game */
    contain: layout paint;
    contain-intrinsic-size: auto 100px;
}

/* Level 2: Center actual ad content inside RevIQ's container */
#reviq-anchor-wrap [data-ad="anchor"] {
    pointer-events: auto !important;
}

#reviq-anchor-wrap [data-ad="anchor"],
#reviq-anchor-wrap [data-ad="anchor"] > div {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
}

#reviq-anchor-wrap [data-ad="anchor"] iframe {
    display: block !important;
    margin: 0 !important;
}

/* =====================================================
   Billboard Ad Centering
   =====================================================

   RevIQ injects into [data-ad="billboard-1"] and sets
   dimensions via CSS custom properties. The actual ad
   iframe can be smaller than the reserved container,
   causing it to float to the top-left (appearing as a
   displaced corner). Same two-level centering strategy
   as the anchor ad.

   Level 1 — Wrapper (our container)
   Uses flex to center RevIQ's container horizontally
   and vertically within the reserved 90px strip.

   Level 2 — [data-ad="billboard-1"] & child divs
   Using flex on both ensures the smaller iframe is
   centered inside the otherwise oversized container.
*/

.pond-top-ad-wrapper,
.gallery-top-ad-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
    /* Safe Pinning: Isolate ad rendering from the rest of the game */
    contain: layout paint;
    contain-intrinsic-size: auto 90px;
}

[data-ad="billboard-1"],
[data-ad="billboard-1"] > div {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

[data-ad="billboard-1"] iframe,
[data-ad="right-rail-1"] iframe,
[data-ad="video"] iframe {
    display: block !important;
    margin: 0 !important;
}

[data-ad="right-rail-1"],
[data-ad="right-rail-1"] > div,
[data-ad="video"],
[data-ad="video"] > div {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

[data-ad="video"],
[data-ad="video"] > div {
    margin: 0 auto 10px auto;
}

[data-ad="right-rail-1"],
[data-ad="right-rail-1"] > div {
    margin: 0 auto;
}

/* Ensure no ad containers show grey backgrounds if ads fail */
[data-ad] {
    background-color: transparent !important;
    position: relative !important;
}

[data-ad]>div:not(.anchor-ad-close-hitbox):not(.anchor-ad-close-btn),
[data-ad] iframe {
    background-color: transparent !important;
}

/* =====================================================
   Popup Side Ads
   ===================================================== */

.popup-side-ad-container {
    position: fixed;
    top: 50%;
    transform: translateY(-50%) scale(var(--popup-side-ads-scale, 1));
    transform-origin: left center;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    z-index: 3001;
}

.popup-side-ad-container--stack {
    width: 424px;
}

.popup-side-ad-panel {
    --popup-side-panel-bg: #383838;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--popup-side-panel-bg);
    padding: 6px;
    border: 4px double #FFF;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

.popup-side-ad-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.popup-side-ad-section + .popup-side-ad-section {
    margin-top: 4px;
}

.popup-ad-support-text {
    font-size: 9px;
    color: #FFF;
    line-height: 1.45;
    margin: 0 0 6px 0;
    text-transform: uppercase;
    text-shadow: 1px 1px #000;
}

.popup-side-ad-section--rail {
    width: 324px;
    margin-left: auto;
    margin-right: auto;
}

.popup-side-ad-section--video {
    width: 100%;
}

.popup-side-ad-container [data-ad="right-rail-1"],
.popup-side-ad-container [data-ad="video"] {
    width: 100%;
}

.popup-side-ad-container--shop-theme .popup-side-ad-panel {
    --popup-side-panel-bg: #393939;
}

.popup-side-ad-container--bounty-theme .popup-side-ad-panel {
    --popup-side-panel-bg: #32211c;
    border: 5px ridge #8d6e63;
    border-radius: 10px;
}

/* =====================================================
   Ad Stealth Hiding / Close Logic
   ===================================================== */
/* Shift completely off-screen to legitimately hit 0% viewability 
   and pause ad requests without destroying the iframe state. */
#reviq-anchor-wrap.ad-closed {
    bottom: -500px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* The close button lives on #reviq-anchor-wrap (the wrapper), outside
   RevIQ's injected [data-ad="anchor"] DOM. */

/* Hitbox - top-left of the footer box, outside the ad container. */
.anchor-ad-close-hitbox {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 24px !important;
    height: 24px !important;
    cursor: pointer !important;
    z-index: 2147483647 !important;
    pointer-events: auto !important;
}

/* Visual Button */
.anchor-ad-close-btn {
    position: relative !important;
    width: 20px !important;
    height: 20px !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 50% !important;
    margin: 2px !important;
}

/* Custom CSS Diagonal Lines X (Pixel-Perfect) */
.anchor-ad-close-btn::before,
.anchor-ad-close-btn::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 10px !important;
    height: 1px !important;
    background-color: #ffffff !important;
    border-radius: 1px !important;
}

.anchor-ad-close-btn::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

.anchor-ad-close-btn::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}