:root {
            --popup-viewport-height: 100vh;
            --popup-viewport-offset-top: 0px;
            --popup-viewport-offset-bottom: 0px;
        }

        @supports (height: 100dvh) {
            :root {
                --popup-viewport-height: 100dvh;
            }
        }

        body {
            position: fixed;
            height: 100%;
            width: 100%;
            padding-bottom:500px; /* height of the footer */
            overflow: hidden;
            pointer-events: none; /* Make body transparent to clicks */
        }

        #snackbar {
 				visibility: hidden;
				min-width: 250px;
  				margin-left: -125px;
  				background-color: #333;
  				color: #fff;
  				text-align: center;
  				border-radius: 2px;
  				padding: 16px;
  				position: fixed;
  				z-index: 1;
  				left: 50%;
  				bottom: 30px;
  				font-size: 17px;
			}

			#snackbar.show {
 				visibility: visible;
  				-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  				animation: fadein 0.5s, fadeout 0.5s 2.5s;
			}

        #myInput {
            background-image: url('/images/searchIcon.png'); /* Add a search icon to input */
            background-position: 5px 50%; /* Position the search icon */
            background-repeat: no-repeat; /* Do not repeat the icon image */
            width: 70%;
            font-size: 18px; /* Increase font-size */
            padding: 12px 20px 12px 40px; /* Add some padding */
            border: 1px solid #ddd; /* Add a grey border */
            margin: 0 auto;
        }

        #myUL {
            /* Remove default list styling */
            list-style-type: none;
            padding: 0;
            margin: 0 auto;
        }

            #myUL li a {
                border: 1px solid #ddd; /* Add a border to all links */
                margin-top: -1px; /* Prevent double borders */
                background-color: #f6f6f6; /* Grey background color */
                padding: 12px; /* Add some padding */
                text-decoration: none; /* Remove default text underline */
                font-size: 18px; /* Increase the font-size */
                color: black; /* Add a black text color */
                display: block; /* Make it into a block element to fill the whole list */
            }

            #myUL li a:hover:not(.header) {
                background-color: #eee; /* Add a hover effect to all links, except for headers */
            }

        .detailPageTable {
            display: none !important;
            width: 100%;
            border: 1px solid var(--secondaryColor);
            border-collapse: collapse;
        }

            .detailPageTable th {
                background-color: var(--secondaryColor);
                color: var(--titleColor);
            }

            .detailPageTable tr:nth-child(even) {
                background-color: #eee;
            }

            .detailPageTable tr:nth-child(odd) {
                background-color: #fff;
            }

            .detailPageTable td {
                text-align: center;
            }

        .popupBackground {
            display: none; /* Hidden by default - will be overridden to flex when shown */
            position: fixed; /* Stay in place */
            z-index: 1100; /* Above details popup */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
            flex-direction: column;
            justify-content: flex-start; /* Align to top */
            align-items: center;
            padding-top: 70px; /* Space for header */
        }
        
        .popupBackground[style*="block"] {
            display: flex !important; /* Override display: block with flexbox when shown */
        }


        /* Modal Content */
        .popupContent {
            background-color: var(--backgroundColor);
            margin: 0; /* Remove margin since flexbox handles centering */
            width: 90%;
            height: auto;
            border-radius: 5px;
            position: relative; /* Work with flexbox parent */
            max-width: 800px;
        }
        
        /* Sticky Header Fix */
        #header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: transparent;
        }
        
        .topnav {
            position: relative;
            z-index: 1001;
        }

        #worldMap {
            position: absolute;
            top: 47px;
            bottom: 500px;
            right: 0px;
            left: 0px;
            /* border-style: solid;
            border-width: 5px;
            border-color: red; */
        }

        #detailMap {
            height: 400px;
            /* The height is 400 pixels */
            width: 100%;
            /* The width is the width of the web page */
            border: 1px solid rgba(156, 163, 175, 0.3);
            border-radius: 12px;
            overflow: hidden;
        }

        .gameNameBtn {
            color: #aaaaaa;
            font-size: 20px;
            font-weight: bold;
            background-color: var(--secondaryColor);
            color: var(--titleColor);
            padding: 5px;
            display: inline-block;
            margin: 0 auto;
            border-radius: 5px;
            pointer-events: auto; /* Re-enable clicks on the actual button */
        }

        /* Re-enable pointer events for all interactive elements */
        .modern-popup-backdrop,
        .infoBtnBackground,
        .searchBtnBackground,
        .guessesListBtnBackground,
        .linkBtnBackground,
        .trophyBtnBackground,
        .statsBtnBackground,
        .callMeBtnBackground,
        .templeSwitchBackground,
        #worldMap,
        button,
        input,
        select,
        textarea {
            pointer-events: auto !important;
        }

        /* Content should remain transparent to clicks */
        .content {
            pointer-events: none !important;
        }

        /* Header container should be transparent but allow navigation links to work */
        #header {
            pointer-events: none !important;
        }
        
        #header a, #header button, #header .topnav {
            pointer-events: auto !important;
        }

        /* gameNameBtnBackground should remain transparent to clicks */
        .gameNameBtnBackground {
            pointer-events: none !important;
        }

        .gameNameBtn:hover,
        .gameNameBtn:focus {
            background-color: gray;
            text-decoration: none;
            cursor: pointer;
        }

        .gameNameBtnBackground {
            display: none;
            position: fixed;
            top: 55px;
            left: 50%;
            transform: translateX(-50%); /* Center horizontally */
            width: auto; /* Only take up space needed for the button */
            text-align: center;
            z-index: 1.2;
            touch-action: none;
        }

        .templeSwitchContent {
            color: #aaaaaa;
            font-size: 20px;
            font-weight: bold;
            background-color: var(--secondaryColor);
            color: var(--titleColor);
            padding: 5px;
            display: inline-block;
            margin: 0 auto;
            border-radius: 5px;
        }

        .mapBtn {
            font-size: 20px;
            font-weight: bold;
            display: block;
            position: absolute;
            top: 10%;
            right: 10%;
            background-color: var(--secondaryColor);
            margin: auto;
            padding: 8px;
            width: 32px;
            height: 32px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mapBtn:hover,
        .mapBtn:focus {
            background-color: var(--highlightColor);
            text-decoration: none;
            cursor: pointer;
        }


        .infoBtnBackground {
            position: fixed; /* Stay in place */
            bottom: 20px;
            left: 8px;
            width: 60px;
            height: 48px;
            touch-action: none;
        }

        .searchBtnBackground {
            position: fixed; /* Stay in place */
            bottom: 80px;
            left: 8px;
            width: 60px;
            height: 48px;
            z-index: 1.1;
            touch-action: none;
        }

        .guessesListBtnBackground {
            position: fixed; /* Stay in place */
            bottom: 140px;
            left: 8px;
            width: 60px;
            height: 48px;
            z-index: 1.2;
            touch-action: none;
        }

        .linkBtnBackground {
            position: fixed; /* Stay in place */
            bottom: 200px;
            left: 8px;
            width: 60px;
            height: 48px;
            z-index: 1.2;
            touch-action: none;
        }

        .trophyBtnBackground {
            position: fixed; /* Stay in place */
            bottom: 260px;
            left: 8px;
            width: 60px;
            height: 48px;
            z-index: 1.2;
            touch-action: none;
        }

        .callMeBtnBackground {
            position: fixed; /* Stay in place */
            bottom: 95px;
            right: 15px;
            width: 120px;
            height: 60px;
            z-index: 1.1;
            touch-action: none;
        }
        .statsBtnBackground {
            position: fixed; /* Stay in place */
            bottom: 320px;
            left: 8px;
            width: 60px;
            height: 48px;
            z-index: 1.2;
            touch-action: none;
        }

        .templeSwitchBackground {
            position: fixed; /* Stay in place */
            bottom: 20px;
            right: 15px;
            width: 120px;
            height: 60px;
            z-index: 1.1;
            touch-action: none;
            display: flex;
            align-items: center;
        }

        .guessAnnotation {
            color: #000;
            background-color: white;
            border: 1px solid #000;
            font-family: "Lucida Grande", "Arial", sans-serif;
            font-size: 12px;
            text-align: center;
            white-space: nowrap;
            padding: 2px;
        }

        .missionLabelSvg {
            fill: #111827;
            font-family: "Montserrat", "Arial", sans-serif;
            font-weight: 700;
            font-size: 12px;
            pointer-events: none;
            paint-order: stroke;
            stroke: rgba(255, 255, 255, 0.85);
            stroke-width: 3px;
            stroke-linejoin: round;
        }

        /* Carousel Base Styles */
        .carousel {
        position: relative;
        /* height: 200px; */
        overflow: hidden;
        }

        .carousel-inner {
        position: relative;
        width: 100%;

        /* Remove the "display: flex; flex-wrap: nowrap;" at this level
            because we’ll now use absolute positioning on .carousel-item */
        }

        /* Instead of display: none, use absolute + transform to position slides offscreen */
        .carousel-item {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;

        /* Remove: display: none; */
        /* They start off-screen to the RIGHT (like .carousel-item-next) */
        transform: translateX(100%);
        
        flex-wrap: wrap; /* Keep your multi-column layout if needed */
        transition: transform 0.6s ease-in-out;
        backface-visibility: hidden;
         z-index: 1; /* So it's behind any active slide */
        }

        /* The "active" slide is on-screen */
        .carousel-item.active {
        display: flex;           /* preserve your row/column layout */
        transform: translateX(0); 
        z-index: 2;             /* bring the active slide on top */
        position: relative;
        }

        /* Slide In/Out Animations */
        .carousel-item-next {
        transform: translateX(100%); /* Start off-screen to the right */
        }

        .carousel-item-prev {
        transform: translateX(-100%); /* Start off-screen to the left */
        }

        .carousel-item.start-next {
        transform: translateX(0); /* Slide in from the right */
        }

        .carousel-item.start-prev {
        transform: translateX(0); /* Slide in from the left */
        }

        .carousel-item .row {
        display: flex;
        flex-wrap: wrap;
        margin: 0; 
        }

        .carousel-item .col-4 {
        flex: 0 0 33.33%;
        max-width: 33.33%;
        box-sizing: border-box;
        }

        .carousel-item img {
        width: 100%;
        height: auto;
        object-fit: cover;
        }

        /* Carousel Controls */
        .carousel-control-prev,
        .carousel-control-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3; /* Above slides */
        width: auto;
        height: auto;
        background: none;
        border: none;
        opacity: 0.7;
        transition: opacity 0.3s;
        }

        .carousel-control-prev {
        left: 10px;
        }

        .carousel-control-next {
        right: 10px;
        }

        .carousel-control-prev:hover,
        .carousel-control-next:hover {
        opacity: 1;
        }

        .carousel-control-prev-icon,
        .carousel-control-next-icon {
        display: inline-block;
        width: 30px;
        height: 30px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        }

        .carousel-control-prev-icon {
        background-image: url('images/right-chevron.svg');
        transform: scaleX(-1);
        }

        .carousel-control-next-icon {
        background-image: url('images/right-chevron.svg');
        }

        /* Container and Header */
        .carouselContainer {
        width: 100%;
        border: 1px solid var(--secondaryColor);
        margin-bottom: 1rem;
        }

        .carousel-link {
            text-decoration: none; /* Removes underline */
            color: inherit; /* Keeps the default text color */
            display: block; /* Ensures the whole div is clickable */
        }

        .carouselHeader {
        background-color: var(--secondaryColor);
        color: var(--titleColor);
        text-align: center;
        /* padding: 0.5em; */
        font-weight: bold;
        }

        .carouselHeader h3 {
        margin: 0; /* kill the heading's default margin */
        line-height: 1.75; /* optional: tighten the line spacing if needed */
        }

        /* Adjust carousel height */
        #multiItemCarousel {
        max-height: 180px; /* Reasonable carousel height */
        overflow: hidden;
        }

        /* Accessibility: Hide text for screen readers only */
        .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
        }

        /* 1) Price Overlay at bottom-right of each image */
        .image-wrapper {
        position: relative; /* anchor for absolutely positioned overlay */
        display: inline-block;
        }

        /* The actual "$19.99" overlay */
        .price-overlay {
            position: absolute;
            bottom: 5px;
            right: 5px;
            padding: 2px 5px;
            background-color: #ffffff;  /* Fully solid white */
            color: orange;
            font-size: 0.9rem;
            font-weight: bold;
            border-radius: 3px;
            pointer-events: none;
            z-index: 20;                /* Ensures price stays on top if needed */
        }
        /* 2) "Free Shipping" label + animation */
        .free-shipping {
            display: inline-block;
            color: #ffffff;                /* White text for maximum contrast */
            background: #ffcc00;           /* Bright yellow background */
            font-weight: bold;
            font-size: 1rem;               /* Slightly smaller */
            padding: 4px 10px;             /* Adjust padding for balance */
            border-radius: 6px;            /* Softer rounded edges */
            text-transform: uppercase;     /* Keeps it eye-catching */
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); /* Subtle text shadow */
            box-shadow: 0 0 5px rgba(255, 204, 0, 0.5);  /* Softer glow */
            margin-top: -3px;               /* Creates space from label above */
            animation: shippingPulse 1.5s ease-in-out infinite alternate;
        }

        /* Softened animation */
        @keyframes shippingPulse {
            0% {
                transform: scale(1);
                box-shadow: 0 0 5px rgba(255, 204, 0, 0.5);
            }
            100% {
                transform: scale(1.05); /* Subtle instead of dramatic */
                box-shadow: 0 0 10px rgba(255, 204, 0, 0.7);
            }
        }

        /* Modern popup styles */
        .modern-popup-backdrop {
            position: fixed;
            top: var(--popup-viewport-offset-top, 0px);
            left: 0;
            right: 0;
            bottom: var(--popup-viewport-offset-bottom, 0px);
            width: 100vw;
            height: var(--popup-viewport-height, 100vh);
            padding-top: env(safe-area-inset-top, 0px);
            padding-bottom: env(safe-area-inset-bottom, 0px);
            padding-left: env(safe-area-inset-left, 0px);
            padding-right: env(safe-area-inset-right, 0px);
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            box-sizing: border-box;
        }


        /* Base z-index hierarchy for popups */
        #detailsPopup {
            z-index: 1100 !important;
        }

        #detailsPopup .modern-popup-header {
            min-height: auto;
            padding: 16px 20px;
        }

        /* Guess popup should be above details popup */
        #guessPopup {
            z-index: 1200 !important;
        }
        #guessPopup .modern-popup-panel.size-sm {
            max-width: 420px;
            min-height: auto;
            height: auto;
            max-height: calc(var(--popup-viewport-height, 100vh) - 40px);
            overflow: visible;
        }
        #guessPopup .modern-popup-content {
            padding: 14px 18px 16px;
            margin: 0;
            overflow: visible;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        #guessPopup .modern-popup-content p {
            margin: 0 0 8px 0 !important;
        }
        #guessPopup .modern-popup-content > *:last-child {
            margin-bottom: 0 !important;
        }

        /* Email popup should be above guess popup */
        #emailPopup {
            z-index: 1300 !important;
        }

        /* myGuess popup should be above email popup */
        #myGuessPopup {
            z-index: 1400 !important;
        }
        /* Email popup sizing tweaks */
        #emailPopup .modern-popup-panel.size-sm {
            max-width: 420px;
            min-height: auto;
            height: auto;
            max-height: calc(var(--popup-viewport-height, 100vh) - 40px);
        }
        #emailPopup .modern-popup-content {
            padding: 14px 18px 16px;
            margin: 0;
            overflow: visible;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        #emailPopup .modern-popup-content p {
            margin: 0 0 8px 0 !important;
        }

        /* Email Validation Styling for Guess Popup */
        .guess-validation-message {
            padding: 12px 16px;
            margin: 8px 0 0 0;
            border-radius: 8px;
            font-size: 0.9rem;
            line-height: 1.4;
            animation: slideDown 0.3s ease-out;
        }
        
        .guess-validation-message.error {
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: #dc2626;
        }
        
        .guess-validation-message.warning {
            background: rgba(245, 158, 11, 0.1);
            border: 1px solid rgba(245, 158, 11, 0.3);
            color: #d97706;
        }
        
        .guess-validation-message.suggestion {
            background: rgba(59, 130, 246, 0.1);
            border: 1px solid rgba(59, 130, 246, 0.3);
            color: #2563eb;
        }
        
        .guess-validation-buttons {
            margin-top: 12px;
            display: flex;
            gap: 10px;
            justify-content: center;
        }
        
        .guess-validation-btn {
            padding: 8px 20px;
            border: none;
            border-radius: 6px;
            font-size: 0.9rem;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        
        .guess-validation-btn.primary {
            background: #3b82f6;
            color: white;
        }
        
        .guess-validation-btn.primary:hover {
            background: #2563eb;
        }
        
        .guess-validation-btn.secondary {
            background: rgba(255, 255, 255, 0.9);
            color: #374151;
            border: 1px solid rgba(0, 0, 0, 0.2);
        }
        
        .guess-validation-btn.secondary:hover {
            background: rgba(255, 255, 255, 1);
            border-color: rgba(0, 0, 0, 0.3);
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Info popup */
        #infoPopup {
            z-index: 1200 !important;
        }
        #infoPopupContinueBtn {
            background: linear-gradient(135deg, #667eea, #764ba2);
            border: none;
            color: #ffffff;
            border-radius: 10px;
            padding: 12px 22px;
            font-weight: 700;
            font-size: 1rem;
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.35);
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        #infoPopupContinueBtn:hover {
            transform: translateY(-1px);
            box-shadow: 0 12px 26px rgba(102, 126, 234, 0.45);
        }
        #infoPopup .modern-popup-panel {
            max-width: 780px;
            max-height: calc(var(--popup-viewport-height, 100vh) - 40px);
            display: flex;
            flex-direction: column;
        }

        #infoPopup .modern-popup-content {
            flex: 1 1 auto;
            max-height: none;
            overflow-y: auto;
            padding-bottom: 15px !important;
            margin-bottom: 0 !important;
        }
        #infoPopupInstructions .info-popup-heading {
            display: block;
            font-size: 1.2rem;
            font-weight: 700;
            color: #374151;
            margin-bottom: 6px;
        }
        #infoPopupInstructions .info-popup-bullets {
            display: block;
            font-weight: 500;
        }

        /* Game menu popup */
        #gameMenuPopup {
            z-index: 1200 !important;
        }

        /* Stats popup */
        #statsPopup {
            z-index: 1200 !important;
        }
        #statsPopup .modern-popup-panel {
            max-width: 1000px !important;
            width: 95% !important;
            max-height: calc(var(--popup-viewport-height, 100vh) - 40px) !important;
            overflow: auto;
        }
        #statsPopup .modern-popup-content {
            max-height: none;
            overflow-y: auto;
        }
        
        /* Search bar */
        #searchBar {
            z-index: 1200 !important;
        }

        /* Guesses list popup */
        #guessesListPopup {
            z-index: 1200 !important;
        }

        /* Confirmation popup should be highest */
        #confirmPopup {
            z-index: 1500 !important;
        }

        /* BOM and Mission Store ads */
        #bomGameAdPopup {
            z-index: 1200 !important;
        }

        #missionCallStorePopup {
            z-index: 1200 !important;
        }

        /* Creator code popup */
        #enterCreatorCodePopup {
            z-index: 1200 !important;
        }

        /* Ensure guesses list container can scroll properly */
        #guessListContainer {
            outline: none !important;
        }

        #guessListContainer:focus {
            outline: none !important;
        }

        /* Ensure ad containers don't escape their popups */
        #infoPopupAdSpot,
        #myGuessAdSpot,
        #guessesListAdSpot,
        #mainMenuAdSpot,
        #detailsPopupAdSpot {
            position: relative !important;
            overflow: hidden !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }

        /* Allow the Info popup ad to fully render */
        #infoPopupAdSpot {
            overflow: visible !important;
            width: 100% !important;
            max-width: 728px !important;
            min-height: 0 !important;
            margin: 12px auto 12px auto !important;
            display: block !important;
            visibility: visible !important;
        }

        #infoPopupAdSpot .popupContent {
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            margin: 0 auto !important;
            overflow: visible !important;
        }

        #infoPopupAdSpot .adsbygoogle {
            display: block !important;
            width: 100% !important;
            height: 280px !important;
        }

        /* Allow the My Guess popup ad to fully render */
        #myGuessAdSpot {
            overflow: visible !important;
            width: 100% !important;
            max-width: 728px !important;
            min-height: 280px !important;
            margin: 12px auto 0 auto !important;
            display: block !important;
            visibility: visible !important;
        }

        #myGuessAdSpot .adsbygoogle {
            display: block !important;
            width: 100% !important;
            min-height: 280px !important;
            height: auto !important;
        }

        /* Allow the Main Menu ad to fully render */
        #mainMenuAdSpot {
            overflow: visible !important;
            width: 100% !important;
            max-width: 728px !important;
            min-height: 280px !important;
            margin: 12px auto 0 auto !important;
            display: block !important;
            visibility: visible !important;
        }

        #mainMenuAdSpot .popupContent {
            width: 100% !important;
            max-width: 100% !important;
            height: 280px !important;
            margin: 0 auto !important;
            overflow: visible !important;
        }

        #mainMenuAdSpot .adsbygoogle {
            display: block !important;
            width: 100% !important;
            height: 280px !important;
        }

        /* Force detailsPopupAdSpot to always be visible */
        #detailsPopupAdSpot,
        #sponsoredAdSpot,
        #infoPopupAdSpot,
        #myGuessAdSpot,
        #mainMenuAdSpot,
        #guessesListAdSpot {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            height: auto !important;
            min-height: 50px !important;
            margin: 20px 0 !important;
            padding: 10px !important;
            clear: both !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }
        /* Loosen sponsored ad wrapper to fit creative naturally */
        #sponsoredAdSpot {
            min-height: 0 !important;
            padding: 0 !important;
        }

        /* Keep embedded video ads contained inside the popup */
        #sponsoredAdSpot video {
            width: 100% !important;
            height: auto !important;
            max-height: min(320px, 65vh) !important;
            object-fit: contain !important;
        }
        /* Let the sponsored container size to the creative instead of forcing a 315x320 box */
        #sponsoredAdSpot .popupContent {
            height: auto !important;
            max-height: 80vh !important;
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 auto !important;
            padding: 0 !important;
            background: transparent !important;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* Inline sponsored ad sizing to avoid scroll */
        #sponsoredAdInline {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            max-height: 63vh;
            overflow: hidden;
            padding: 0;
            margin: 0 auto;
        }
        #sponsoredAdInline img {
            width: 100% !important;
            height: auto !important;
            max-height: 63vh !important;
            object-fit: contain !important;
        }
        #sponsoredAdInline video {
            width: auto !important;
            max-width: 100% !important;
            height: auto !important;
            max-height: 60vh !important; /* reduced to ensure wrapper border is visible */
        }
        /* Shrink-wrap entire popup hierarchy when showing video */
        #sponsoredAdPopup .modern-popup-panel:has(video) {
            width: fit-content !important;
            min-width: 280px; /* ensure buttons/text don't get too cramped */
        }
        #sponsoredAdPopup .modern-popup-content:has(video) {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
        }
        #sponsoredAdInline:has(video) {
            width: fit-content !important;
            margin: 0 auto !important;
        }
        #sponsoredAdInline .andcollar-ad-wrapper:has(video) {
            width: fit-content !important;
        }
        #sponsoredAdInline .andcollar-ad-wrapper:has(video) > div {
            width: fit-content !important;
        }
        /* Reduce video height when promo banner is present */
        #sponsoredAdInline .serve-ad-wrapper video,
        #sponsoredAdInline .serve-ad-wrapper img {
            max-height: 53vh !important;
        }
        /* Cloudflare Stream iframe styling */
        #sponsoredAdInline iframe {
            border-radius: 12px !important;
        }
        #sponsoredAdPopup .modern-popup-panel:has(iframe) {
            width: fit-content !important;
            min-width: 280px;
        }
        #sponsoredAdPopup .modern-popup-content:has(iframe) {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
        }
        #sponsoredAdInline:has(iframe) {
            width: fit-content !important;
            margin: 0 auto !important;
        }
        #sponsoredAdInline .andcollar-ad-wrapper:has(iframe) {
            width: fit-content !important;
        }
        #sponsoredAdInline .andcollar-ad-wrapper:has(iframe) > div {
            width: fit-content !important;
        }
        /* Sponsored progress UI */
        #sponsoredProgressWrap {
            width: 100%;
            max-width: 320px;
            height: 8px;
            background: rgba(118, 75, 162, 0.25); /* soft purple track */
            border-radius: 999px;
            margin: 12px auto 8px;
            overflow: hidden;
        }
        #sponsoredProgressBar {
            width: 0%;
            height: 100%;
            background: linear-gradient(90deg, #667eea, #764ba2); /* site purple gradient */
            border-radius: 999px;
            transition: width 3s linear;
        }
        #sponsoredContinueBtn {
            margin-top: 8px;
            padding: 10px 18px;
            border: none;
            border-radius: 8px;
            background: #6f66ff; /* purple base */
            color: #ffffff;
            font-weight: 600;
            cursor: not-allowed;
            opacity: 0.6;
        }
        #sponsoredContinueBtn.enabled {
            cursor: pointer;
            opacity: 1;
            background: linear-gradient(90deg, #667eea, #764ba2);
        }
        #sponsoredButtons {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-top: 10px;
            flex-wrap: wrap;
        }
        #sponsoredVisitBtn {
            padding: 10px 18px;
            border: none;
            border-radius: 8px;
            background: #3b82f6;
            color: #ffffff;
            font-weight: 600;
            text-decoration: none;
            display: inline-block;
            line-height: 22px;
        }
        /* Normalize link wrapper created by renderAdPlacement */
        #sponsoredAdSpot a {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            padding: 0 !important;
            margin: 0 !important;
        }


        /* Ensure ad content stays within its container */
        #infoPopupAdContent,
        #myGuessAdContent,
        #guessesListAdContent,
        #mainMenuAdContent,
        #detailsPopupAdContent {
            position: relative !important;
            max-width: 100% !important;
            overflow: hidden !important;
        }

        /* Force ad iframes to stay within bounds and prevent map blocking */
        .adsbygoogle,
        iframe[id*="aswift"] {
            max-width: 100% !important;
            position: relative !important;
        }

        /* Hide any problematic ad iframes that escape containers */
        iframe[id*="aswift"]:not(.show) {
            display: none !important;
        }

        /* Ensure ads only show when their parent popup is visible */
        .modern-popup-backdrop:not(.show) iframe[id*="aswift"],
        .modern-popup-backdrop:not(.show) .adsbygoogle {
            display: none !important;
            visibility: hidden !important;
        }

        /* Automatically hide carousel containers when popup is not shown */
        .modern-popup-backdrop:not(.show) .carousel-container,
        .modern-popup-backdrop:not(.show) image-carousel {
            display: none !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }

        /* Exception: Always show detailsPopupAdSpot when popup is shown */
        .modern-popup-backdrop.show #detailsPopupAdSpot,
        .modern-popup-backdrop.show #detailsPopupAdSpot *,
        .modern-popup-backdrop.show #sponsoredAdSpot,
        .modern-popup-backdrop.show #sponsoredAdSpot *,
        .modern-popup-backdrop.show #infoPopupAdSpot,
        .modern-popup-backdrop.show #infoPopupAdSpot *,
        .modern-popup-backdrop.show #myGuessAdSpot,
        .modern-popup-backdrop.show #myGuessAdSpot *,
        .modern-popup-backdrop.show #mainMenuAdSpot,
        .modern-popup-backdrop.show #mainMenuAdSpot *,
        .modern-popup-backdrop.show #guessesListAdSpot,
        .modern-popup-backdrop.show #guessesListAdSpot * {
            display: block !important;
            visibility: visible !important;
        }

        /* But hide detailsPopupAdSpot when popup is not shown to prevent blocking */
        .modern-popup-backdrop:not(.show) #detailsPopupAdSpot,
        .modern-popup-backdrop:not(.show) #sponsoredAdSpot,
        .modern-popup-backdrop:not(.show) #infoPopupAdSpot,
        .modern-popup-backdrop:not(.show) #myGuessAdSpot,
        .modern-popup-backdrop:not(.show) #mainMenuAdSpot,
        .modern-popup-backdrop:not(.show) #guessesListAdSpot {
            display: none !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }

        /* Force all ad containers to be hidden when not in a shown popup */
        body > iframe[id*="aswift"],
        body > .adsbygoogle {
            display: none !important;
        }

        /* Modern UI System - Side Navigation Buttons */
        .mapBtn {
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(8px) !important;
            border-radius: 10px !important;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            color: #374151 !important;
            transition: all 0.2s ease !important;
            font-size: 16px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 32px !important;
            height: 32px !important;
            padding: 6px !important;
        }

        .mapBtn:hover {
            background: rgba(255, 255, 255, 1) !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
        }

        /* Icon styling for side navigation buttons */
        .mapBtn img {
            filter: brightness(0.3) contrast(1.5) !important;
            transition: filter 0.2s ease !important;
            display: block;
        }

        .icon-white {
            filter: brightness(0) invert(1) !important;
        }

        .mapBtn:hover img {
            filter: brightness(0.2) contrast(1.8) !important;
        }

        .mapBtn p {
            color: #374151 !important;
            margin: 0 !important;
            line-height: 1 !important;
            font-weight: bold !important;
        }

        /* Modern Game Title */
        .gameNameBtn {
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(8px) !important;
            border-radius: 12px !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            color: #1f2937 !important;
            font-weight: 600 !important;
            font-size: 16px !important;
            padding: 12px 20px !important;
            transition: all 0.2s ease !important;
        }

        .gameNameBtn:hover {
            background: rgba(255, 255, 255, 1) !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
        }

        /* Modern Temple Switch */
        .templeSwitchContent {
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(8px) !important;
            border-radius: 12px !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            color: #374151 !important;
            font-weight: 600 !important;
            font-size: 14px !important;
            padding: 8px 12px !important;
            transition: all 0.2s ease !important;
        }

        /* Modern Call Me Button */
        .callMeBtnBackground .gameNameBtn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
            color: white !important;
            border: none !important;
            padding: 8px 12px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            height: 100%;
        }

        .callMeBtnBackground .gameNameBtn:hover {
            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
        }

        .callMeBtnBackground .callMeBtnContent {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .callMeBtnBackground .callMeBtnIcon {
            font-size: 18px;
            line-height: 1;
        }

        .callMeBtnBackground .callMeBtnText {
            display: flex;
            flex-direction: column;
            text-align: left;
            font-size: 12px;
            line-height: 1.1;
            font-weight: 600;
        }

        /* Modern Switch Styling */
        .switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #e2e8f0;
            transition: 0.3s;
            border-radius: 24px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.3s;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        input:checked + .slider {
            background-color: #667eea;
        }

        input:checked + .slider:before {
            transform: translateX(20px);
        }

        /* Modern Map Labels/Markers */
        .leaflet-popup-content-wrapper {
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(8px) !important;
            border-radius: 12px !important;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
        }

        .leaflet-popup-content {
            margin: 12px 16px !important;
            font-weight: 600 !important;
            color: #1f2937 !important;
        }

        .leaflet-popup-tip {
            background: rgba(255, 255, 255, 0.95) !important;
            box-shadow: none !important;
        }

        /* Modern guess labels on map */
        .guess-label {
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(8px) !important;
            border-radius: 8px !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            color: #1f2937 !important;
            font-weight: 600 !important;
            font-size: 12px !important;
            padding: 4px 8px !important;
            white-space: nowrap !important;
        }

        /* Specific styling for myGuessPopup to remove bottom whitespace and ensure full coverage */
        #myGuessPopup {
            height: auto !important;
            min-height: 0 !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
        }

        /* Ensure myGuessPopup is properly hidden when not shown */
        #myGuessPopup:not(.show) {
            display: none !important;
        }

        #myGuessPopup .modern-popup-panel {
            height: auto !important;
            max-height: calc(var(--popup-viewport-height, 100vh) - 40px) !important;
        }

        /* Align sponsored popup sizing/positioning with myGuessPopup */
        #sponsoredAdPopup {
            height: auto !important;
            min-height: 0 !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
        }

        #sponsoredAdPopup .modern-popup-panel {
            height: auto !important;
            max-height: calc(var(--popup-viewport-height, 100vh) - 40px) !important;
        }


        .modern-popup-backdrop.show {
            opacity: 1;
            visibility: visible;
        }

        .modern-popup-panel {
            background: white;
            border-radius: 16px;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            width: calc(100vw - 40px);
            max-width: 860px;
            height: auto;
            min-height: 25vh;
            max-height: calc(var(--popup-viewport-height, 100vh) - 40px);
            margin: 20px;
            overflow-y: auto;
            overflow-x: hidden;
            transform: scale(0.9) translateY(20px);
            transition: transform 0.3s ease;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
        }

        .modern-popup-backdrop.show .modern-popup-panel {
            transform: scale(1) translateY(0);
        }

        /* Modern popup size variants */
        .modern-popup-panel.size-sm {
            max-width: 400px;
            width: calc(100vw - 40px);
            height: auto;
            max-height: calc(var(--popup-viewport-height, 100vh) - 40px);
        }

        .modern-popup-panel.size-md {
            max-width: 860px;
        }

        /* Modern search list styling */
        #searchBar #myUL li a {
            border: none;
            margin: 0;
            background-color: transparent;
            padding: 12px 16px;
            font-size: 16px;
            color: #374151;
            text-decoration: none;
            display: block;
            border-bottom: 1px solid #f3f4f6;
            transition: all 0.2s ease;
        }

        #searchBar #myUL li a:hover {
            background-color: #f8fafc;
            color: #1f2937;
        }

        #searchBar #myUL li:first-child a {
            border-top: 1px solid #f3f4f6;
        }

        #searchBar #myUL li:last-child a {
            border-bottom: none;
        }

        /* Responsive design for mobile */
        @media (max-width: 768px) {
            .modern-popup-panel {
                border-radius: 12px;
                width: calc(100vw - 24px);
                height: auto;
                max-height: calc(var(--popup-viewport-height, 100vh) - 24px);
                max-width: none;
                margin: 12px;
                display: flex;
                flex-direction: column;
            }
            
            .modern-popup-header {
                padding: 12px 16px 10px;
                min-height: 60px;
            }
            
            .modern-popup-title {
                font-size: 20px;
            }
            
            .modern-popup-content {
                padding: 16px !important;
                display: block !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch;
                flex: 1;
                min-height: 0;
            }
        }

        @media (max-width: 480px) {
            .modern-popup-panel {
                border-radius: 8px;
                width: calc(100vw - 16px);
                height: auto;
                max-height: calc(var(--popup-viewport-height, 100vh) - 16px);
                margin: 8px;
                display: flex;
                flex-direction: column;
            }
            
            .modern-popup-content {
                display: block !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch;
                flex: 1;
                min-height: 0;
            }
        }

        /* Landscape orientation support for mobile devices */
        @media (max-height: 500px) and (orientation: landscape) {
            .modern-popup-panel {
                border-radius: 8px;
                width: calc(100vw - 16px);
                height: auto;
                max-height: calc(var(--popup-viewport-height, 100vh) - 16px);
                margin: 8px;
                display: flex;
                flex-direction: column;
            }
            
            .modern-popup-content {
                display: block !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch;
                flex: 1;
                min-height: 0;
                padding: 12px !important;
            }
            
            .modern-popup-header {
                padding: 8px 12px 6px;
                min-height: 50px;
            }
            
            .modern-popup-title {
                font-size: 16px;
            }
        }

        /* Safari mobile safe-area handled via env() padding on backdrop */

        @media (max-width: 480px) {
            .modern-popup-header {
                padding: 12px 16px 10px;
                min-height: 60px;
            }
            
            .modern-popup-title {
                font-size: 18px;
            }
            
            .modern-popup-content {
                padding: 12px !important;
            }
            
            #flagCell img {
                height: 28px !important;
                width: 42px !important;
            }
        }

        .modern-popup-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 20px;
            border-bottom: 1px solid #e5e7eb;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            min-height: 60px;
            box-sizing: border-box;
        }

        .modern-popup-title {
            font-size: 20px;
            font-weight: 600;
            margin: 0;
            color: white;
            line-height: 1.2;
        }

        .modern-popup-close {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            font-weight: 300;
            cursor: pointer;
            padding: 4px 8px;
            line-height: 1;
            transition: opacity 0.2s ease;
            opacity: 0.8;
            margin: -8px -16px -4px 0;
        }

        .modern-popup-close:hover {
            opacity: 1;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
        }

        .modern-popup-content {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            display: block;
            -webkit-overflow-scrolling: touch;
            min-height: 0;
            height: auto;
            max-height: none;
        }

        .mission-overview-card {
            margin-bottom: 16px;
        }

        .mission-overview-card:has([style*="display: flex"]) h3 {
            margin-bottom: 8px;
        }

        .mission-overview-card [style*="display: flex"] {
            min-height: auto;
        }

        .mission-overview-card:has(.single-item) {
            margin-bottom: 12px;
        }

        .mission-overview-card.compact-section {
            margin-bottom: 12px;
        }

        .mission-overview-card.compact-section h3 {
            margin-bottom: 6px;
        }

        .compact-bubbles {
            justify-content: flex-start !important;
        }

        .modern-popup-content:has(.compact-section) .mission-overview-card {
            margin-bottom: 14px;
        }

        .mission-store-section {
            margin: 20px 0;
            padding: 16px;
            border-radius: 12px;
            background: rgba(139, 69, 19, 0.05);
            border: 2px solid rgba(139, 69, 19, 0.2);
            min-height: 133px; /* Increased by 3px more */
            max-height: 133px; /* Increased by 3px more */
            overflow: hidden; /* Hide any overflow */
        }


        .mission-store-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }

        .mission-store-title {
            color: #8b4513;
            font-size: 18px;
            font-weight: 600;
            margin: 0;
        }

        .mission-store-badge {
            background: #ef4444;
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .modern-btn {
            border: none;
            border-radius: 10px;
            padding: 15px 48px 15px 48px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 1.1rem;
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            text-align: center;
        }

        .modern-btn img,
        .modern-btn svg {
            width: 16px;
            height: 16px;
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            flex-shrink: 0;
        }

        .modern-btn-primary {
            background: #3b82f6;
            color: white;
        }

        .modern-btn-primary:hover {
            background: #2563eb;
            transform: translateY(-1px);
        }

        .modern-guesses-table {
            background: white;
            border-radius: 12px;
            border: 1px solid #e5e7eb;
            margin: 16px 0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .modern-guesses-header {
            background: #f9fafb;
            padding: 16px;
            font-weight: 600;
            color: #1f2937;
            font-size: 16px;
            border-bottom: 1px solid #e5e7eb;
        }

        .modern-guesses-body {
            padding: 0;
            min-height: 50px;
        }

        .modern-guesses-body .modern-guess-row {
            display: flex;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid #f3f4f6;
            gap: 16px;
            min-height: 56px;
            background: #fef3c7;
            border: 2px solid #f59e0b;
        }

        .modern-guesses-body .modern-guess-row:last-child {
            border-bottom: none;
        }

        .guess-rank {
            font-weight: 600;
            color: #6b7280;
            min-width: 30px;
            font-size: 14px;
        }

        .guess-player {
            flex: 1;
            font-weight: 500;
            color: #1f2937;
            font-size: 14px;
        }

        .guess-accuracy {
            color: #10b981;
            font-weight: 500;
            font-size: 14px;
        }

        /* Flag styling for modern popup */
        #flagCell img {
            border-radius: 6px !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            transition: transform 0.2s ease, box-shadow 0.2s ease !important;
            padding: 0 !important;
        }

        #flagCell img:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        }

        /* Lottery Ticker Popup */
        .lottery-ticker-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .lottery-ticker-overlay.show {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .lottery-ticker-box {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 20px;
            padding: 20px 25px;
            text-align: center;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                        0 0 40px rgba(118, 75, 162, 0.4),
                        inset 0 1px 0 rgba(255, 255, 255, 0.2);
            border: 2px solid rgba(255, 255, 255, 0.2);
            width: 250px;
            max-width: 90vw;
        }

        .lottery-ticker-title {
            color: rgba(255, 255, 255, 0.9);
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 3px;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .lottery-ticker-content {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            height: 50px;
        }

        .lottery-ticker-flag {
            width: 50px;
            height: 33px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            object-fit: cover;
            border: 2px solid rgba(255, 255, 255, 0.2);
            flex-shrink: 0;
        }

        .lottery-ticker-name {
            color: #ffffff;
            font-size: 24px;
            font-weight: 700;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            width: 160px;
            height: 48px;
            line-height: 1.2;
            text-align: left;
            overflow: hidden;
            word-wrap: break-word;
            flex-shrink: 0;
        }