: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: var(--color-surface-dark);
  				color: var(--color-text-inverse);
  				text-align: center;
  				border-radius: var(--radius-2xs);
  				padding: var(--space-4);
  				position: fixed;
  				z-index: 1;
  				left: 50%;
  				bottom: 30px;
  				font-size: var(--font-size-lg-plus);
			}

			#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: var(--font-size-xl); /* Increase font-size */
            padding: var(--space-3) var(--space-5) var(--space-3) var(--space-8); /* Add some padding */
            border: 1px solid var(--color-border); /* 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 var(--color-border); /* Add a border to all links */
                margin-top: -1px; /* Prevent double borders */
                background-color: var(--color-surface-muted); /* Grey background color */
                padding: var(--space-3); /* Add some padding */
                text-decoration: none; /* Remove default text underline */
                font-size: var(--font-size-xl); /* Increase the font-size */
                color: var(--color-ink); /* 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: var(--color-surface-subtle); /* Add a hover effect to all links, except for headers */
            }

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

            .detailPageTable th {
                background-color: var(--color-link);
                color: var(--color-primary-ink);
            }

            .detailPageTable tr:nth-child(even) {
                background-color: var(--color-surface-subtle);
            }

            .detailPageTable tr:nth-child(odd) {
                background-color: var(--color-surface);
            }

            .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: var(--z-popup); /* Above details popup */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: var(--color-surface-inverse); /* Fallback color */
            background-color: var(--overlay-dark-40); /* 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(--color-surface);
            margin: 0; /* Remove margin since flexbox handles centering */
            width: 90%;
            height: auto;
            border-radius: var(--radius-xs);
            position: relative; /* Work with flexbox parent */
            max-width: 800px;
        }
        
        /* Sticky Header Fix */
        #header {
            position: sticky;
            top: 0;
            z-index: var(--z-header);
            background: transparent;
        }
        
        .topnav {
            position: relative;
            z-index: var(--z-header-menu);
        }

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


        .gameNameBtn {
            color: var(--color-text-neutral-7);
            font-size: var(--font-size-2xl);
            font-weight: var(--font-weight-bold);
            background-color: var(--color-link);
            color: var(--color-primary-ink);
            padding: var(--space-1);
            display: inline-block;
            margin: 0 auto;
            border-radius: var(--radius-xs);
            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: var(--color-neutral-mid);
            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: var(--color-text-neutral-7);
            font-size: var(--font-size-2xl);
            font-weight: var(--font-weight-bold);
            background-color: var(--color-link);
            color: var(--color-primary-ink);
            padding: var(--space-1);
            display: inline-block;
            margin: 0 auto;
            border-radius: var(--radius-xs);
        }

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

        .mapBtn:hover,
        .mapBtn:focus {
            background-color: var(--color-neutral-mid);
            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: 108px;
            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;
        }

        /* Game-only buttons stay hidden until setupUI knows we're in a game */
        .trophyBtnBackground,
        .linkBtnBackground,
        .guessesListBtnBackground,
        .statsBtnBackground {
            display: none;
        }

        .in-game .trophyBtnBackground,
        .in-game .linkBtnBackground,
        .in-game .guessesListBtnBackground,
        .in-game .statsBtnBackground {
            display: block;
        }

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

        .guessAnnotation {
            color: var(--color-ink);
            background-color: var(--color-surface);
            border: 1px solid var(--color-border-strong);
            font-family: var(--font-lucida);
            font-size: var(--font-size-xs);
            text-align: center;
            white-space: nowrap;
            padding: var(--space-0-5);
        }

        .missionLabelSvg {
            fill: var(--color-text-strong);
            font-family: var(--font-body);
            font-weight: var(--font-weight-bold);
            font-size: var(--font-size-xs);
            pointer-events: none;
            paint-order: stroke;
            stroke: var(--color-surface-a85);
            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(--color-link);
        margin-bottom: var(--space-4);
        }

        .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(--color-link);
        color: var(--color-primary-ink);
        text-align: center;
        /* padding: 0.5em; */
        font-weight: var(--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: var(--space-0-5) var(--space-1);
            background-color: var(--color-surface);  /* Fully solid white */
            color: var(--color-warning-pure);
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-bold);
            border-radius: var(--radius-xs);
            pointer-events: none;
            z-index: 20;                /* Ensures price stays on top if needed */
        }
        /* 2) "Free Shipping" label + animation */
        .free-shipping {
            display: inline-block;
            color: var(--color-text-inverse);                /* White text for maximum contrast */
            background: var(--color-highlight);           /* Bright yellow background */
            font-weight: var(--font-weight-bold);
            font-size: var(--font-size-lg);               /* Slightly smaller */
            padding: var(--space-1) var(--space-2-5);             /* Adjust padding for balance */
            border-radius: var(--radius-sm);            /* Softer rounded edges */
            text-transform: uppercase;     /* Keeps it eye-catching */
            text-shadow: var(--shadow-text); /* Subtle text shadow */
            box-shadow: var(--shadow-glow);  /* 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: var(--shadow-glow);
            }
            100% {
                transform: scale(1.05); /* Subtle instead of dramatic */
                box-shadow: var(--shadow-glow-strong);
            }
        }

        /* 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(var(--overlay-dark-50), var(--overlay-dark-70));
            z-index: var(--z-header);
            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: var(--z-popup) !important;
        }

        #detailsPopup .modern-popup-header {
            min-height: auto;
            padding: var(--space-4) var(--space-5);
        }

        /* Guess popup should be above details popup */
        #guessPopup {
            z-index: var(--z-popup-2) !important;
        }

        /* The sponsored popup opens over the open mission drawer */
        #sponsoredAdPopup {
            z-index: var(--z-popup-2) !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: var(--space-3-5) 18px var(--space-4);
            margin: 0;
            overflow: visible;
            display: flex;
            flex-direction: column;
            gap: var(--space-3-5);
        }
        #guessPopup .modern-popup-content p {
            margin: 0 0 var(--space-2) 0 !important;
        }
        #guessPopup .modern-popup-content > *:last-child {
            margin-bottom: 0 !important;
        }

        /* Email popup should be above guess popup */
        #emailPopup {
            z-index: var(--z-popup-3) !important;
        }

        /* myGuess popup should be above email popup */
        #myGuessPopup {
            z-index: var(--z-popup-4) !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: var(--space-3-5) 18px var(--space-4);
            margin: 0;
            overflow: visible;
            display: flex;
            flex-direction: column;
            gap: var(--space-3-5);
        }
        #emailPopup .modern-popup-content p {
            margin: 0 0 var(--space-2) 0 !important;
        }

        /* Email Validation Styling for Guess Popup */
        .guess-validation-message {
            padding: var(--space-3) var(--space-4);
            margin: var(--space-2) 0 0 0;
            border-radius: var(--radius-md);
            font-size: var(--font-size-base);
            line-height: 1.4;
            animation: slideDown 0.3s ease-out;
        }
        
        .guess-validation-message.error {
            background: var(--color-danger-soft-a10);
            border: 1px solid var(--color-danger-soft-a30);
            color: var(--color-danger);
        }
        
        .guess-validation-message.warning {
            background: var(--color-warning-soft-a10);
            border: 1px solid var(--color-warning-soft-a30);
            color: var(--color-warning);
        }
        
        .guess-validation-message.suggestion {
            background: var(--color-accent-soft-a10);
            border: 1px solid var(--color-accent-soft-a30);
            color: var(--color-accent);
        }
        
        .guess-validation-buttons {
            margin-top: var(--space-3);
            display: flex;
            gap: var(--space-2-5);
            justify-content: center;
        }
        
        .guess-validation-btn {
            padding: var(--space-2) var(--space-5);
            border: none;
            border-radius: var(--radius-sm);
            font-size: var(--font-size-base);
            cursor: pointer;
            font-weight: var(--font-weight-medium);
            transition: all 0.2s ease;
        }
        
        .guess-validation-btn.primary {
            background: var(--color-accent-soft);
            color: var(--color-text-inverse);
        }
        
        .guess-validation-btn.primary:hover {
            background: var(--color-accent);
        }
        
        .guess-validation-btn.secondary {
            background: var(--color-surface-a90);
            color: var(--color-text-secondary);
            border: 1px solid var(--overlay-dark-20);
        }
        
        .guess-validation-btn.secondary:hover {
            background: var(--color-surface);
            border-color: var(--overlay-dark-30);
        }

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

        /* Info popup */
        #infoPopup {
            z-index: var(--z-popup-2) !important;
        }
        #infoPopup .modern-popup-panel {
            max-width: 780px;
            max-height: calc(var(--popup-viewport-height, 100vh) - 40px);
            /* Safety net: this popup can auto-open before syncPopupViewportVars'
               JS value has settled (see openInfoPopup in worldmap-app.js), so
               also cap against the browser's own dynamic viewport height --
               no JS involved, so it can't go stale. Ignored by browsers that
               don't support dvh, leaving the line above as the only cap. */
            max-height: min(calc(var(--popup-viewport-height, 100vh) - 40px), calc(100dvh - 40px));
            display: flex;
            flex-direction: column;
        }

        #infoPopup .modern-popup-content {
            flex: 1 1 auto;
            max-height: none;
            overflow-y: auto;
            padding-bottom: var(--space-4) !important;
            margin-bottom: 0 !important;
        }
        #infoPopupInstructions .info-popup-heading {
            display: block;
            font-size: var(--font-size-popup-heading);
            font-weight: var(--font-weight-bold);
            color: var(--color-text-secondary);
            margin-bottom: var(--space-1-5);
        }
        #infoPopupInstructions .info-popup-bullets {
            display: block;
            font-weight: var(--font-weight-medium);
        }
        /* One line per bullet; a wrapped line lines up with the text, not the bullet. */
        #infoPopupInstructions .info-popup-bullets > span {
            display: block;
            padding-left: 1em;
            text-indent: -1em;
        }
        #infoPopupInstructions .info-popup-bullets > span::before {
            content: "•";
            display: inline-block;
            width: 1em;
            text-indent: 0;
        }

        /* Game menu popup */
        #gameMenuPopup {
            z-index: var(--z-popup-2) !important;
        }

        /* Stats popup */
        #statsPopup {
            z-index: var(--z-popup-2) !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: var(--z-popup-2) !important;
        }

        /* Guesses list popup */
        #guessesListPopup {
            z-index: var(--z-popup-2) !important;
        }

        /* Confirmation popup should be highest */
        #confirmPopup {
            z-index: var(--z-popup-top) !important;
        }

        /* BOM and Mission Store ads */
        #bomGameAdPopup {
            z-index: var(--z-popup-2) !important;
        }

        #missionCallStorePopup {
            z-index: var(--z-popup-2) !important;
        }

        /* Creator code popup */
        #enterCreatorCodePopup {
            z-index: var(--z-popup-2) !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: var(--space-3) auto var(--space-3) 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: var(--space-3) 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;
            margin: var(--space-3) 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: var(--space-5) 0 !important;
            padding: var(--space-2-5) !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: auto !important;
            max-width: 100% !important;
            height: auto !important;
            /* Must stay below #sponsoredAdInline's 63vh, same as video below:
               the wrapper adds 2px border + 3px padding top and bottom, and the
               container clips overflow, so an image at the full 63vh shears off
               its own top and bottom borders. */
            max-height: 60vh !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 .sponsor-ad-wrapper:has(video) {
            width: fit-content !important;
        }
        #sponsoredAdInline .sponsor-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: var(--radius-xl) !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 .sponsor-ad-wrapper:has(iframe) {
            width: fit-content !important;
        }
        #sponsoredAdInline .sponsor-ad-wrapper:has(iframe) > div {
            width: fit-content !important;
        }
        /* On wide screens an image creative sizes the popup too: the frame
           takes the image's width and its label wraps inside it, so a
           portrait 720x900 doesn't sit at the left of an empty panel. */
        @media (min-width: 900px) {
            #sponsoredAdPopup .modern-popup-panel:has(#sponsoredAdInline img) {
                width: fit-content !important;
                min-width: 280px;
            }
            #sponsoredAdPopup .modern-popup-content:has(#sponsoredAdInline img) {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
            }
            #sponsoredAdInline .sponsor-ad-wrapper:has(img) {
                width: fit-content !important;
            }
            /* The 60vh image plus the label row outgrows this 63vh cap and
               clips the frame's bottom edge; the panel scrolls if needed. */
            #sponsoredAdInline:has(img) {
                max-height: none;
            }
            /* Zero width keeps the label and promo rows out of the frame's size; min-width
               then stretches it across whatever width the image set. */
            #sponsoredAdInline .sponsor-ad-wrapper:has(img) .ad-frame__label,
            #sponsoredAdInline .sponsor-ad-wrapper:has(img) .ad-frame__promo {
                width: 0;
                min-width: 100%;
            }
        }
        /* Sponsored progress UI */
        #sponsoredProgressWrap {
            width: 100%;
            max-width: 320px;
            height: 8px;
            background: var(--color-primary-2-a25); /* soft purple track */
            border-radius: var(--radius-pill);
            margin: var(--space-3) auto var(--space-2);
            overflow: hidden;
        }
        #sponsoredProgressBar {
            width: 0%;
            height: 100%;
            background: linear-gradient(90deg, var(--color-primary), var(--color-primary-2)); /* site purple gradient */
            border-radius: var(--radius-pill);
            transition: width 3s linear;
        }
        #sponsoredContinueBtn {
            margin-top: var(--space-2);
            padding: var(--space-2-5) 18px;
            border: none;
            border-radius: var(--radius-md);
            background: var(--color-primary-bright); /* purple base */
            color: var(--color-text-inverse);
            font-weight: var(--font-weight-semibold);
            cursor: not-allowed;
            opacity: 0.6;
        }
        #sponsoredContinueBtn.enabled {
            cursor: pointer;
            opacity: 1;
            background: linear-gradient(90deg, var(--color-primary), var(--color-primary-2));
        }
        #sponsoredButtons {
            display: flex;
            gap: var(--space-2-5);
            justify-content: center;
            margin-top: var(--space-2-5);
            flex-wrap: wrap;
        }
        #sponsoredVisitBtn {
            padding: var(--space-2-5) 18px;
            border: none;
            border-radius: var(--radius-md);
            background: var(--color-accent-soft);
            color: var(--color-text-inverse);
            font-weight: var(--font-weight-semibold);
            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: var(--color-surface-a95) !important;
            backdrop-filter: blur(8px) !important;
            border-radius: var(--radius-lg) !important;
            box-shadow: var(--shadow-raised) !important;
            border: 1px solid var(--overlay-light-20) !important;
            color: var(--color-text-secondary) !important;
            transition: all 0.2s ease !important;
            font-size: var(--font-size-lg) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 32px !important;
            height: 32px !important;
            padding: var(--space-1-5) !important;
        }

        .mapBtn:hover {
            background: var(--color-surface) !important;
            transform: translateY(-2px) !important;
            box-shadow: var(--shadow-lg) !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: var(--color-text-secondary) !important;
            margin: 0 !important;
            line-height: 1 !important;
            font-weight: var(--font-weight-bold) !important;
        }

        /* Modern Game Title */
        .gameNameBtn {
            background: var(--color-surface-a95) !important;
            backdrop-filter: blur(8px) !important;
            border-radius: var(--radius-xl) !important;
            box-shadow: var(--shadow-raised) !important;
            border: 1px solid var(--overlay-light-20) !important;
            color: var(--color-text) !important;
            font-weight: var(--font-weight-semibold) !important;
            font-size: var(--font-size-lg) !important;
            padding: var(--space-3) var(--space-5) !important;
            transition: all 0.2s ease !important;
        }

        .gameNameBtn:hover {
            background: var(--color-surface) !important;
            transform: translateY(-1px) !important;
            box-shadow: var(--shadow-lg) !important;
        }

        /* Modern Temple Switch */
        .templeSwitchContent {
            background: var(--color-surface-a95) !important;
            backdrop-filter: blur(8px) !important;
            border-radius: var(--radius-xl) !important;
            box-shadow: var(--shadow-raised) !important;
            border: 1px solid var(--overlay-light-20) !important;
            color: var(--color-text-secondary) !important;
            font-weight: var(--font-weight-semibold) !important;
            font-size: var(--font-size-base) !important;
            padding: var(--space-2) var(--space-3) !important;
            transition: all 0.2s ease !important;
        }

        /* Modern Call Me Button */
        .callMeBtnBackground .gameNameBtn {
            background: var(--gradient-primary) !important;
            color: var(--color-text-inverse) !important;
            border: none !important;
            padding: var(--space-2) var(--space-3) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            height: 100%;
        }

        .callMeBtnBackground .gameNameBtn:hover {
            background: var(--gradient-primary-hover) !important;
        }

        .callMeBtnBackground .callMeBtnContent {
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }

        .callMeBtnBackground .callMeBtnIcon {
            font-size: var(--font-size-xl);
            line-height: 1;
        }

        .callMeBtnBackground .callMeBtnText {
            display: flex;
            flex-direction: column;
            text-align: left;
            font-size: var(--font-size-xs);
            line-height: 1.1;
            font-weight: var(--font-weight-semibold);
        }

        /* 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: var(--color-surface-tint);
            transition: 0.3s;
            border-radius: var(--radius-4xl);
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: var(--color-surface);
            transition: 0.3s;
            border-radius: var(--radius-round);
            box-shadow: var(--shadow-sm);
        }

        input:checked + .slider {
            background-color: var(--color-primary);
        }

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

        /* Modern Map Labels/Markers */
        .leaflet-popup-content-wrapper {
            background: var(--color-surface-a95) !important;
            backdrop-filter: blur(8px) !important;
            border-radius: var(--radius-xl) !important;
            box-shadow: var(--shadow-lg) !important;
            border: 1px solid var(--overlay-light-20) !important;
        }

        .leaflet-popup-content {
            margin: var(--space-3) var(--space-4) !important;
            font-weight: var(--font-weight-semibold) !important;
            color: var(--color-text) !important;
        }

        .leaflet-popup-tip {
            background: var(--color-surface-a95) !important;
            box-shadow: none !important;
        }

        /* Modern guess labels on map */
        .guess-label {
            background: var(--color-surface-a95) !important;
            backdrop-filter: blur(8px) !important;
            border-radius: var(--radius-md) !important;
            box-shadow: var(--shadow-raised) !important;
            border: 1px solid var(--overlay-light-20) !important;
            color: var(--color-text) !important;
            font-weight: var(--font-weight-semibold) !important;
            font-size: var(--font-size-xs) !important;
            padding: var(--space-1) var(--space-2) !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: var(--color-surface);
            border-radius: var(--radius-2xl);
            box-shadow: var(--shadow-float);
            width: calc(100vw - 40px);
            max-width: 860px;
            height: auto;
            min-height: 25vh;
            max-height: calc(var(--popup-viewport-height, 100vh) - 40px);
            margin: var(--space-5);
            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: var(--space-3) var(--space-4);
            font-size: var(--font-size-lg);
            color: var(--color-text-secondary);
            text-decoration: none;
            display: block;
            border-bottom: 1px solid var(--color-border-faint);
            transition: all 0.2s ease;
        }

        #searchBar #myUL li a:hover {
            background-color: var(--color-surface-soft);
            color: var(--color-text);
        }

        #searchBar #myUL li:first-child a {
            border-top: 1px solid var(--color-border-faint);
        }

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

        /* Responsive design for mobile */
        @media (max-width: 768px) {
            .modern-popup-panel {
                border-radius: var(--radius-xl);
                width: calc(100vw - 24px);
                height: auto;
                max-height: calc(var(--popup-viewport-height, 100vh) - 24px);
                max-width: none;
                margin: var(--space-3);
                display: flex;
                flex-direction: column;
            }
            
            .modern-popup-header {
                padding: var(--space-3) var(--space-4) var(--space-2-5);
                min-height: 60px;
            }
            
            .modern-popup-title {
                font-size: var(--font-size-2xl);
            }
            
            .modern-popup-content {
                padding: var(--space-4) !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: var(--radius-md);
                width: calc(100vw - 16px);
                height: auto;
                max-height: calc(var(--popup-viewport-height, 100vh) - 16px);
                margin: var(--space-2);
                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: var(--radius-md);
                width: calc(100vw - 16px);
                height: auto;
                max-height: calc(var(--popup-viewport-height, 100vh) - 16px);
                margin: var(--space-2);
                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: var(--space-3) !important;
            }
            
            .modern-popup-header {
                padding: var(--space-2) var(--space-3) var(--space-1-5);
                min-height: 50px;
            }
            
            .modern-popup-title {
                font-size: var(--font-size-lg);
            }
        }

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

        @media (max-width: 480px) {
            .modern-popup-header {
                padding: var(--space-3) var(--space-4) var(--space-2-5);
                min-height: 60px;
            }
            
            .modern-popup-title {
                font-size: var(--font-size-xl);
            }
            
            .modern-popup-content {
                padding: var(--space-3) !important;
            }
            
        }

        .modern-popup-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-3) var(--space-5);
            border-bottom: 1px solid var(--color-border-soft);
            background: var(--gradient-primary);
            color: var(--color-text-inverse);
            min-height: 60px;
            box-sizing: border-box;
        }

        .modern-popup-title {
            font-size: var(--font-size-2xl);
            font-weight: var(--font-weight-semibold);
            margin: 0;
            color: var(--color-text-inverse);
            line-height: 1.2;
        }

        .modern-popup-close {
            background: none;
            border: none;
            color: var(--color-text-inverse);
            font-size: var(--font-size-4xl);
            font-weight: var(--font-weight-light);
            cursor: pointer;
            padding: var(--space-1) var(--space-2);
            line-height: 1;
            transition: opacity 0.2s ease;
            opacity: 0.8;
            margin: -8px -16px -4px 0;
        }

        .modern-popup-close:hover {
            opacity: 1;
            background: var(--overlay-light-10);
            border-radius: var(--radius-xs);
        }

        .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: var(--space-4);
        }

        .mission-overview-card:has([style*="display: flex"]) h3,
        .mission-overview-card:has(.chip-list) h3 {
            margin-bottom: var(--space-2);
        }

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

        .mission-overview-card:has(.single-item) {
            margin-bottom: var(--space-3);
        }

        .mission-overview-card.compact-section {
            margin-bottom: var(--space-3);
        }

        .mission-overview-card.compact-section h3 {
            margin-bottom: var(--space-1-5);
        }

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

        .modern-popup-content:has(.compact-section) .mission-overview-card {
            margin-bottom: var(--space-3-5);
        }

        .mission-store-section {
            margin: var(--space-5) 0;
            padding: var(--space-4);
            border-radius: var(--radius-xl);
            background: var(--color-merch-a05);
            border: 2px solid var(--color-merch-a20);
            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: var(--space-3);
        }

        .mission-store-title {
            color: var(--color-merch);
            font-size: var(--font-size-xl);
            font-weight: var(--font-weight-semibold);
            margin: 0;
        }

        .mission-store-badge {
            background: var(--color-danger-soft);
            color: var(--color-text-inverse);
            padding: var(--space-1) var(--space-3);
            border-radius: var(--radius-xl);
            font-weight: var(--font-weight-semibold);
            font-size: var(--font-size-xs);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .modern-btn {
            border: none;
            border-radius: var(--radius-lg);
            padding: var(--space-4) 48px var(--space-4) 48px;
            font-weight: var(--font-weight-semibold);
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: var(--font-size-xl);
            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: var(--color-accent-soft);
            color: var(--color-text-inverse);
        }

        .modern-btn-primary:hover {
            background: var(--color-accent);
            transform: translateY(-1px);
        }

        .modern-guesses-table {
            background: var(--color-surface);
            border-radius: var(--radius-xl);
            border: 1px solid var(--color-border-soft);
            margin: var(--space-4) 0;
            box-shadow: var(--shadow-xs);
            overflow: hidden;
        }

        .modern-guesses-header {
            background: var(--color-surface-soft);
            padding: var(--space-4);
            font-weight: var(--font-weight-semibold);
            color: var(--color-text);
            font-size: var(--font-size-lg);
            border-bottom: 1px solid var(--color-border-soft);
        }

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

        .modern-guesses-body .modern-guess-row {
            display: flex;
            align-items: center;
            padding: var(--space-4);
            border-bottom: 1px solid var(--color-border-faint);
            gap: var(--space-4);
            min-height: 56px;
            background: var(--color-warning-surface);
            border: 2px solid var(--color-warning-soft);
        }

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

        .guess-rank {
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-muted);
            min-width: 30px;
            font-size: var(--font-size-base);
        }

        .guess-player {
            flex: 1;
            font-weight: var(--font-weight-medium);
            color: var(--color-text);
            font-size: var(--font-size-base);
        }

        .guess-accuracy {
            color: var(--color-success-bright);
            font-weight: var(--font-weight-medium);
            font-size: var(--font-size-base);
        }



        /* Lottery Ticker Popup */
        .lottery-ticker-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--overlay-dark-60);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: var(--z-toast);
            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: var(--gradient-primary);
            border-radius: var(--radius-3xl);
            padding: var(--space-5) var(--space-6);
            text-align: center;
            box-shadow: 0 20px 60px var(--overlay-dark-50),
                        0 0 40px var(--color-primary-2-a40),
                        inset 0 1px 0 var(--overlay-light-20);
            border: 2px solid var(--overlay-light-20);
            width: 250px;
            max-width: 90vw;
        }

        .lottery-ticker-title {
            color: var(--color-surface-a90);
            font-size: var(--font-size-base);
            text-transform: uppercase;
            letter-spacing: 3px;
            margin-bottom: var(--space-4);
            font-weight: var(--font-weight-semibold);
        }

        .lottery-ticker-content {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-5);
            height: 50px;
        }

        .lottery-ticker-flag {
            width: 50px;
            height: 33px;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-dropdown);
            object-fit: cover;
            border: 2px solid var(--overlay-light-20);
            flex-shrink: 0;
        }

        .lottery-ticker-name {
            color: var(--color-text-inverse);
            font-size: var(--font-size-4xl);
            font-weight: var(--font-weight-bold);
            text-shadow: var(--shadow-text-soft);
            width: 160px;
            height: 48px;
            line-height: 1.2;
            text-align: left;
            overflow: hidden;
            word-wrap: break-word;
            flex-shrink: 0;
        }

/* ==== Moved from inline styles in worldmap.html ==== */

/* Shared patterns */

.popup-body {
  padding: var(--space-5);
}

.section-title,
#detailsPopup .mission-overview-card .section-title {
  margin: 0 0 var(--space-2-5) 0;
  color: var(--color-text);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-md);
}

.ad-row {
  justify-content: center;
  text-align: center;
}

.ad-slot-280 {
  height: 280px;
}

.form-field-sm {
  width: 100%;
  max-width: 300px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  box-sizing: border-box;
  background-color: var(--color-surface);
}

.btn-pad {
  padding: var(--space-3) var(--space-6);
}

.btn-icon {
  width: 16px;
  height: 16px;
  margin-right: var(--space-2);
}

.ad-leaderboard {
  min-width: 950px;
  min-height: 66px;
}

.table-th {
  padding: var(--space-4) var(--space-3);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-slate-strong);
  font-size: var(--font-size-lg);
}

.text-strong {
  color: var(--color-text);
}

.popup-body-centered,
#guessPopup .popup-body-centered,
#emailPopup .popup-body-centered {
  padding: var(--space-5);
  text-align: center;
}

.btn-row-item {
  flex: 1;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  white-space: nowrap;
}

.form-label {
  display: block;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
  text-align: center;
}

.form-field {
  width: 100%;
  max-width: 400px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  box-sizing: border-box;
  background-color: var(--color-surface);
}

.popup-hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-2);
}

.result-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.menu-btn {
  width: 100%;
  margin-bottom: var(--space-4);
}

.icon-gap {
  margin-right: var(--space-2);
}

.app-badge {
  width: 35vw;
  max-width: 140px;
  height: auto;
  object-fit: contain;
}

.icon-20 {
  width: 20px;
  height: 20px;
}

/* page */

.wm-page-div {
  position: relative;
  z-index: 1;
}

#loader {
  display: block;
  pointer-events: auto;
}


#centeredDiv {
  display: flex;
  justify-content: center;
  text-align: center;
}

.wm-page-p {
  font-size: var(--font-size-2xl);
  margin: 0;
  line-height: 1;
  font-weight: var(--font-weight-bold);
}

.wm-page-p-2 {
  font-size: var(--font-size-3xl);
  margin: 0;
  line-height: 1;
  font-weight: var(--font-weight-bold);
}

.wm-page-h {
  font-size: small;
  display: flex;
}

.wm-share-modal-backdrop {
  z-index: var(--z-popup);
}

/* page-content */

#worldMap {
  z-index: -1;
  pointer-events: auto;
}

/* details-popup */



#guessButtonArea {
  margin: var(--space-4) 0;
  text-align: center;
}





.wm-details-popup-ad-spot-div {
  margin: var(--space-5) 0;
  text-align: center;
}

/* leadership-history-wrapper */


#leadershipHistory {
  margin-top: var(--space-2-5);
}

/* guess-button-area */

#guessBtn {
  display: block;
  margin: 0 auto;
}

/* details-content-wrapper */

#detailsContent {
  line-height: 1.6;
}

#detailsContent .mission-description.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* centered-div */

.wm-centered-div-button {
  display: inline-block;
  margin: auto;
}

/* byu-ad */

.wm-byu-ad-h {
  font-size: var(--font-size-5xl);
}

/* ad-a */

#adAButton {
  all: unset;
  display: inline-block;
  margin: auto;
  width: 100%;
  max-width: 800px;
  height: 0;
  padding-bottom: 37.5%;
  position: relative;
}

/* ad-abutton */

#adImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* details-popup-ad-content */

#div-gpt-ad-1750317069028-0 {
  min-width: 750px;
  min-height: 66px;
}

/* guess-popup */

#guessPopup .modern-popup-content.wm-guess-popup-content {
  padding: var(--space-5);
  text-align: center;
  margin: 0;
}

.wm-guess-popup-p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

#name {
  width: 100%;
  max-width: 300px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  box-sizing: border-box;
}

/* info-popup */

.wm-info-popup-div {
  text-align: center;
  margin-bottom: var(--space-5);
}

#infoPopupDescription {
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-4);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

#infoPopupShareSection {
  background: var(--color-surface-soft);
  border: 2px solid var(--color-primary-bright);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  text-align: center;
}

.wm-info-popup-div-2 {
  text-align: center;
  margin-bottom: var(--space-2-5);
}

#infoPopupInstructions {
  color: var(--color-text-muted);
  line-height: 1.5;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}

.wm-info-popup-ad-spot-div {
  text-align: center;
}

.wm-info-popup-ad-spot-div:not(:empty) {
  margin-bottom: var(--space-5);
}

/* info-popup-share-section */

.wm-info-popup-share-section-h3 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.wm-info-popup-share-section-p {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--font-size-base);
  line-height: 1.4;
  color: var(--color-text-muted);
}

.wm-info-popup-share-section-btn {
  display: inline-flex;
}

/* guesses-list-popup */

.wm-guesses-list-popup-panel {
  width: 90%;
  max-width: 500px;
  height: calc(var(--popup-viewport-height, 100vh) - 40px);
  max-height: calc(var(--popup-viewport-height, 100vh) - 40px);
  display: flex;
  flex-direction: column;
  margin: var(--space-5) auto;
}

.wm-guesses-list-popup-content {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#guessListContainer {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* guess-list-container */

#guessesTable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-lg);
}

#noGuessesLabel {
  text-align: center;
  color: var(--color-text-slate);
  margin: 60px var(--space-7);
  font-size: var(--font-size-lg);
  line-height: 1.6;
}

/* guesses-table */

.wm-guesses-table-tr {
  background: var(--color-surface-soft);
  border-bottom: 1px solid var(--color-border-soft);
  position: sticky;
  top: 0;
}

.wm-guesses-table-th {
  padding: var(--space-4) var(--space-3);
  text-align: center;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-slate-strong);
  width: 50px;
  font-size: var(--font-size-lg);
}

/* no-guesses-label */

.wm-no-guesses-label-div {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-3);
  color: var(--color-text-slate-strong);
}

.wm-no-guesses-label-div-2 {
  color: var(--color-text-slate);
  margin-bottom: var(--space-6);
}

.wm-no-guesses-label-btn {
  display: inline-flex;
}

/* my-guess-popup */

.wm-my-guess-popup-content {
  padding: var(--space-4) var(--space-4) 0px var(--space-4);
  text-align: center;
}

#guessInfoDisplay {
  background: var(--color-sky-surface);
  border: 1px solid var(--color-sky);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  text-align: left;
}

.wm-my-guess-popup-p {
  margin: 0 0 var(--space-2) 0;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}

.wm-my-guess-popup-p-2 {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}

.wm-my-guess-popup-div {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.wm-share-btn-btn {
  max-width: 250px;
  width: 100%;
}

.wm-my-guess-ad-spot-div {
  margin: var(--space-4) 0 0 0;
}

/* guess-info-display */

.wm-guess-info-display-div {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-3);
}

.wm-guess-info-display-svg {
  margin-right: var(--space-2);
  flex-shrink: 0;
  fill: var(--color-success-bright);
}

.wm-guess-info-display-span {
  font-weight: var(--font-weight-semibold);
  color: var(--color-sky-ink);
  font-size: var(--font-size-lg);
}

#guessCountBadge {
  margin-left: auto;
  background: var(--color-sky);
  color: var(--color-text-inverse);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

#guessMissionTypeDiv {
  margin-bottom: 0;
}

/* email-popup */

.wm-email-popup-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-5);
}

#emailInput {
  width: 100%;
  max-width: 250px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  box-sizing: border-box;
}

#guessEmailValidation {
  max-width: 250px;
  width: 100%;
}

.wm-email-popup-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: 250px;
  width: 100%;
  margin-top: var(--space-2-5);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: var(--color-text-slate);
  text-align: left;
  cursor: pointer;
}

#guessMarketingOptIn {
  margin-top: var(--space-0-5);
  flex-shrink: 0;
}

.wm-email-popup-div-2 {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  margin: 0 auto;
}

/* call-popup */

#callPopupDescription {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

#customLanguageDiv {
  margin-top: var(--space-3);
}

/* game-finished-popup */

.wm-game-finished-popup-content {
  padding: var(--space-7);
  text-align: center;
}

.wm-game-finished-popup-div {
  margin-bottom: var(--space-7);
}

#gameFinishedNameLabel {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.wm-game-finished-popup-div-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

#actuallyCalledMissionLabel {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
}

.wm-game-finished-popup-button {
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
  padding: var(--space-1);
}

.wm-game-finished-popup-button:hover {
  opacity: 1;
}

.wm-game-finished-popup-button svg {
  stroke: var(--color-text-muted);
}

#actuallyCalledMissionTypeSection {
  margin-bottom: var(--space-4);
}

#actuallyCalledStartDateLabel {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-7);
}

.wm-game-finished-popup-div-3 {
  background: var(--color-surface-muted);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-7);
}

.wm-game-finished-popup-div-4 {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  justify-content: center;
}

.wm-game-finished-popup-h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3) 0;
}

#gameWinnersLabel {
  font-size: var(--font-size-lg);
  color: var(--color-text);
  margin: 0;
}

.wm-game-finished-popup-div-5 {
  flex-shrink: 0;
}

.wm-game-finished-popup-button-2 {
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: 2px solid var(--color-border-soft);
  width: 60px;
  height: 60px;
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-2xs);
}

.wm-game-finished-popup-button-2:hover {
  transform: scale(1.05);
  border-color: var(--color-link);
  color: var(--color-link);
}

/* search-bar */

.wm-search-bar-panel {
  height: calc(var(--popup-viewport-height, 100vh) - 40px);
  max-height: calc(var(--popup-viewport-height, 100vh) - 40px);
  display: flex;
  flex-direction: column;
}

.wm-search-bar-content {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.wm-search-bar-div {
  margin-bottom: var(--space-5);
  flex-shrink: 0;
}

#searchBar input#myInput {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-lg);
  box-sizing: border-box;
  background-image: none;
}

.wm-search-bar-div-2 {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  margin: 0 -20px;
  padding: 0 var(--space-5);
}

.wm-my-ul-ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* game-menu-popup */

#gameMenuDescription {
  margin-bottom: var(--space-5);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.wm-game-menu-popup-div {
  max-width: 300px;
  margin: 0 auto;
}

#finishGameButton {
  width: 100%;
}

/* main-menu-ad-content */

#div-gpt-ad-23305892459-0 {
  min-width: 250px;
  min-height: 30px;
}

/* confirm-popup */

.wm-confirm-popup-div {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  max-width: 300px;
  margin: 0 auto;
}

/* enter-creator-code-popup */

#enterCreatorCodePopupText {
  margin-bottom: var(--space-4);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

#enterCreatorCodePopupText2 {
  margin-bottom: var(--space-4);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

#CreatorCodeInput {
  padding: var(--space-3);
  font-size: var(--font-size-lg);
  text-align: center;
  width: 280px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-sizing: border-box;
}

#enterCreatorCodePopupBtn {
  margin-bottom: var(--space-4);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#lostCreatorCodeText {
  font-size: 0.9em;
  color: var(--color-text-muted);
  margin: 0;
}

/* lost-creator-code-text */

#lostCreatorCodeLink {
  color: var(--color-accent-soft);
  text-decoration: none;
}

/* bom-game-ad-popup */

.wm-bom-game-ad-popup-content {
  padding: var(--space-4);
  text-align: center;
}

.wm-bom-game-ad-popup-app {
  padding: var(--space-1);
  margin-bottom: var(--space-2-5);
}

.wm-bom-game-ad-popup-p {
  margin-bottom: var(--space-2-5);
  font-size: var(--font-size-base);
}

.wm-bom-game-ad-popup-responsive-img {
  max-width: 100%;
  border-radius: var(--radius-md);
}

.wm-bom-game-ad-popup-div {
  display: flex;
  justify-content: center;
  gap: var(--space-2-5);
  margin: 0;
  flex-wrap: wrap;
}

/* mission-call-store-popup */

.wm-mission-call-store-popup-app {
  padding: var(--space-2-5);
}

.wm-mission-call-store-popup-responsive-img {
  max-width: 100%;
  border-radius: var(--radius-lg);
}

.wm-mission-call-store-popup-div {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
}

.wm-mission-call-store-popup-button {
  background: var(--color-store-cta);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow-sm);
  width: 180px;
}

/* sponsored-ad-popup */

#sponsoredAdInline {
  margin: var(--space-2-5) auto;
  text-align: center;
}

#sponsoredCountdownText {
  margin-top: var(--space-1-5);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-base);
}

/* Guesses list rows, built by addGuessRow() in index.js */
#guessesTable .guesses-row {
  border-bottom: 1px solid var(--color-border-soft);
  transition: background-color 0.1s;
  background-color: transparent;
}

#guessesTable .guesses-row:hover {
  background-color: var(--color-surface-soft);
}

#guessesTable .guesses-cell {
  padding: var(--space-4) var(--space-3);
  font-size: var(--font-size-lg);
  color: var(--color-text);
}

#guessesTable .guesses-cell--name {
  font-weight: var(--font-weight-medium);
}

#guessesTable .guesses-cell--language {
  color: var(--color-text-slate);
}

#guessesTable .guesses-cell--action {
  text-align: center;
  width: 50px;
  cursor: pointer;
  font-size: var(--font-size-xl);
  color: inherit;
}

#guessesTable .guesses-cell__link {
  color: var(--color-accent-soft);
  text-decoration: underline;
}

#guessesTable .guesses-cell__type {
  font-size: var(--font-size-base);
  color: var(--color-text-faint);
  font-style: italic;
}

/* 'Merch coming soon' over the empty carousel (worldmap-carousel.js) */
.has-coming-soon {
  position: relative;
}

.coming-soon-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 30px);
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-4);
  padding: var(--space-5);
  text-align: center;
  color: var(--color-text-neutral-3);
  font-style: italic;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  background: var(--overlay-light-15);
  border: 1px solid var(--overlay-light-20);
  border-radius: var(--radius-xl);
}

/* Weekly email list: sign-up in the post-guess email popup */
#guessMailingListOptIn {
  margin-top: var(--space-0-5);
  flex-shrink: 0;
}

.wm-email-popup-label.wm-mailing-list-label {
  font-weight: 600;
  color: var(--color-text);
}

.wm-guess-advice {
  width: 100%;
  max-width: 250px;
  margin-top: var(--space-2);
  padding: var(--space-2-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--font-size-sm);
  box-sizing: border-box;
  resize: vertical;
}

/* Weekly email list: the game-menu popup */
.wm-mailing-list-count {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--color-text);
}

.wm-mailing-list-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.wm-mailing-list-status {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-slate);
}

/* Before the call is in, the send button carries a lock and a second line.
   The id outranks the fixed-height popup button rule in map-sheets.css. */
.wm-mailing-list-send {
  flex-direction: column;
  gap: 2px;
}

.wm-mailing-list-send-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.wm-mailing-list-lock,
.wm-mailing-list-send-hint {
  display: none;
}

#mailingListSendButton.is-locked {
  height: auto !important;
  max-height: none !important;
  padding-block: var(--space-2) !important;
}

#mailingListSendButton.is-locked .wm-mailing-list-lock {
  display: block;
}

/* While "email the list" is waiting on the server. */
.wm-mailing-list-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  border-radius: var(--radius-round);
  animation: spin 0.8s linear infinite;
}

#mailingListSendButton.is-sending .wm-mailing-list-spinner {
  display: block;
}

#mailingListSendButton.is-sending .wm-mailing-list-lock,
#mailingListSendButton.is-sending .wm-mailing-list-send-hint {
  display: none;
}

#mailingListSendButton:disabled {
  opacity: 1;
  cursor: progress;
}

#mailingListSendButton.is-locked .wm-mailing-list-send-hint {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-slate);
}

.wm-mailing-list-callout {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-primary-a10);
  border: 1px solid var(--color-primary-a35);
  text-align: left;
}

.wm-mailing-list-callout p {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}

.wm-mailing-list-callout strong {
  color: var(--color-primary);
}

.wm-support-lead {
  color: var(--color-primary);
}