@font-face {
            font-family: "Minecraft";
            src: url("fonts/Minecraft.woff2") format("woff2"),
            url("fonts/Minecraft.woff") format("woff");
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: "BoldPixels";
            src: url("fonts/BoldPixels.woff2") format("woff2"),
            url("fonts/BoldPixels.woff") format("woff");
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }
        * { box-sizing: border-box; font-family: "BoldPixels", sans-serif;}
        html, body { height: 100%; margin: 0; font-size: 24px;}
        body { background: #40cfe8; overflow-x: hidden; scroll-behavior: smooth; }
        :focus-visible {
            outline: 4px dotted #d00000;
            outline-offset: 5px;
        }
        button:focus-visible,
        a:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible,
        [tabindex]:focus-visible {
            outline: 4px dotted #d00000;
            outline-offset: 5px;
        }

        /* --- HERO --- */
        .hero {
            position: relative;
            min-height: 100vh;
            overflow: hidden;
            display: grid;
            place-items: center;
            padding: 16px;
            isolation: isolate;
            background: #40cfe8;
        }

        .bubble-field {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none; /* field ignores clicks; bubbles are clickable */
        }

        .bubble {
            position: absolute;
            width: 48px;
            height: 48px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            image-rendering: pixelated;
            filter: drop-shadow(0 2px 0 rgba(0,0,0,.15));
            pointer-events: auto;
            transform-origin: center center;
            will-change: transform, opacity;
            opacity: 0.98;
            transition: transform 90ms ease, opacity 140ms ease;
        }

        .logo-wrap {
            position: relative;
            z-index: 2;
            display: grid;
            place-items: center;
            cursor: pointer;
            user-select: none;
            touch-action: manipulation;
            transition: transform .12s ease;
            background: none; border: none;
        }
        .logo-wrap:active { transform: scale(0.98); }

        .logo {
            display: block;
            background: none;
            border: none;
            max-width: min(70vw, 520px);
            width: 100%;
            height: auto;
            image-rendering: pixelated;
            filter: drop-shadow(0 6px 0 rgba(0,0,0,.2));
        }

        .logo-pop { animation: logoPop .22s ease-out; }
        @keyframes logoPop {
            0%   { transform: scale(1); }
            60%  { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        #siteContent { background: white; padding: 9px 32px; }

        .about-section {
            padding-top: 80px; /* increase/decrease */
        }
        .about-toggle {
            margin: 12px auto 0;
            font-size: 18px;
            padding: 8px 12px;
        }
        .about-teaser {
            margin-bottom: 6px;
        }
        .about-details {
            overflow: hidden;
            max-height: 0;
            opacity: 0;
            transform: translateY(-6px);
            transition: max-height 360ms ease, opacity 240ms ease, transform 360ms ease;
            pointer-events: none;
        }
        .about-details.is-open {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        /* ---------- SCORE HUD + FLOATERS ---------- */
        .hud {
            position: absolute; /* confined to hero */
            top: 10px;
            left: 10px;
            z-index: 3;
            pointer-events: none;
            color: #FFC835; /* vibrant green */
            font-weight: 700;
            font-size: clamp(20px, 3.5vw, 40px);
            text-shadow:
                    -2px -2px 0 #000,
                    2px -2px 0 #000,
                    -2px  2px 0 #000,
                    2px  2px 0 #000,
                    0 0 2px #000;
        }

        .floater {
            position: absolute; /* confined to hero */
            z-index: 3;
            transform: translate(-50%, -50%);
            font-weight: 700;
            font-size: 28px;
            image-rendering: pixelated;
            pointer-events: none;
            white-space: nowrap;
            transition: transform 400ms ease, opacity 500ms ease;
            text-shadow:
                    -2px -2px 0 #fff,
                    2px -2px 0 #fff,
                    -2px  2px 0 #fff,
                    2px  2px 0 #fff,
                    0 0 2px #fff;
        }

        .floater.good { color: #78FF4D; }    /* green */
        .floater.bad  { color: #FF4D4D; }    /* red  */

        /* ---------- Highscore box (centered, blue bg, orange border) ---------- */
        .highscore-box {
            background: #40cfe8;             /* same blue as hero */
            border: 4px solid #ff8c00;       /* orange */
            outline: 4px solid #ffffff;      /* white outer stroke */
            border-radius: 0;                 /* square corners */
            padding: 16px 20px;
            max-width: 640px;
            margin: 0 auto 48px auto;        /* centered */
            color: #0b2a33;
            max-height: 500px;                /* scrollable for infinite list */
            overflow-y: auto;
        }
        .highscore-box h2 {
            text-align: center;
            margin-bottom: 12px;
        }
        .highscore-box ol {
            margin: 0;
            padding-left: 24px;
            font-weight: 700;
        }
        .highscore-box::-webkit-scrollbar { width: 8px; }
        .highscore-box::-webkit-scrollbar-thumb {
            background: #ff8c00;
            border-radius: 0;
        }

        /* ---------- MODAL (pixel-ish buttons) ---------- */
        .modal-backdrop-lite {
            position: fixed; inset: 0; background: rgba(0,0,0,0.45);
            display: none; align-items: center; justify-content: center;
            z-index: 10;
        }
        .modal-backdrop-lite.show { display: flex; }
        .modal-card {
            background: #f9f9f9;
            border: 4px solid #fff;
            outline: 4px solid #333;
            padding: 18px 16px;
            width: min(92vw, 480px);
            image-rendering: pixelated;
        }
        .modal-title {
            font-size: 28px;
            margin: 0 0 8px 0;
            text-align: center;
        }
        .modal-row { margin: 10px 0; }

        .px-btn {
            display: inline-block;
            padding: 10px 14px;
            font-weight: 700;
            border: 3px solid #000;
            outline: 3px solid #333;
            cursor: pointer;
            user-select: none;
            image-rendering: pixelated;
            text-decoration: none;
            color: #fff;
            background: #1fbf3a;
        }
        .px-btn.green { background: #0b7a2b; }
        .px-btn.red   { background: #d03434; }
        .px-btn.blue  { background: #4070ff; }
        .px-btn.yellow{
            background: #ffb200;
            color: #1a1a1a;
            outline-color: #fff;
            border-color: #000;
        }
        .px-btn:active { transform: translateY(1px); }

        /* Email row hidden until opt-in */
        #emailRow {
            overflow: hidden;
            max-height: 0;
            opacity: 0;
            transition: max-height 220ms ease, opacity 220ms ease;
            margin-top: 8px;
        }
        #emailRow.show {
            max-height: 220px; /* big enough to fit label, input, and note on mobile */
            opacity: 1;
        }

        /* Reduced motion */
        @media (prefers-reduced-motion: reduce) {
            .logo-pop { animation: none; }
            html, body { scroll-behavior: auto; }
            .about-details { transition: none; }
        }
        button:hover,
        .btn:hover {
            transform: scale(1.05);
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: "Press Start 2P", "Pixelify Sans", sans-serif;
            letter-spacing: 0.5px;
            line-height: 1.25;
        }
        .site-title {
            font-size: clamp(1.5rem, 6vw, 2.5rem);
            white-space: nowrap;
            overflow-wrap: normal;
            word-break: normal;
        }
        .site-tagline {
            margin-top: 1.5em;
            color: #0b6f86;

            filter: drop-shadow(0 3px 0 rgba(0,0,0,0.28));
        }
        .softPop-color {
            margin-top: 1.5em;
            color: #e767ff;
        }

        /* Bubble Pop header */
        .hs-title {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: clamp(8px, 2vw, 14px);
            margin: 0 0 12px 0;
            font-family: "Press Start 2P", monospace;
            font-size: clamp(32px, 3.2vw, 48px);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .hs-title > span {
            flex: 0 0 auto;
            text-align: center;
        }
        .bubbleImgHS {
            width: clamp(20px, 6vw, 36px);
            height: auto;
            object-fit: contain;
            image-rendering: pixelated;
            display: block;
        }

        .play-popup {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.55);
            z-index: 15;
            animation: fadeIn 0.2s ease-out;
        }
        .play-popup-card {
            background: #40cfe8;
            border: 4px solid #ff8c00;
            outline: 4px solid #ffffff;
            padding: 24px 32px;
            text-align: center;
            font-family: "Press Start 2P", monospace;
            text-transform: uppercase;
            color: #0b2a33;
            image-rendering: pixelated;
            cursor: pointer;
            box-shadow: 0 4px 0 rgba(0,0,0,0.2);
            animation: popupPop 0.25s ease-out;
        }
        .play-popup-card h3 {
            margin: 0 0 12px 0;
            font-size: clamp(18px, 3vw, 24px);
        }
        .play-popup-card p {
            margin: 0;
            font-size: clamp(14px, 2.5vw, 18px);
        }
        @keyframes popupPop {
            0% { transform: scale(0.7); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
        @keyframes fadeIn {
            from { opacity: 0; } to { opacity: 1; }
        }
        /* ---------- Social Icons: retro pulse on hover ---------- */
        .socials-bar a { display: inline-block; }
        .social-icon {
            width: 64px; height: 64px; image-rendering: pixelated;
            transition: transform 120ms ease, filter 120ms ease;
            filter: drop-shadow(0 3px 0 rgba(0,0,0,0.25));
        }
        .social-icon:hover {
            transform: translateY(-2px) scale(1.06);
            animation: retroPulse 0.6s steps(6) infinite;
        }
        @keyframes retroPulse {
            0%, 100% { filter: drop-shadow(0 0 0 Red) drop-shadow(0 3px 0 rgba(0,0,0,0.75)); }
            25%      { filter: drop-shadow(0 0 6px Blue) drop-shadow(0 3px 0 rgba(0,0,0,0.75)); }
            50%      { filter: drop-shadow(0 0 10px Green) drop-shadow(0 3px 0 rgba(0,0,0,0.75)); }
            75%      { filter: drop-shadow(0 0 6px Yellow) drop-shadow(0 3px 0 rgba(0,0,0,0.75)); }
        }

        /* ---------- Popup confetti (tiny pixel squares) ---------- */
        .confetti {
            position: fixed;
            width: 6px; height: 6px;
            image-rendering: pixelated;
            z-index: 20;                /* above overlay card */
            opacity: 0.95;
            pointer-events: none;
            transform: translate(-50%, -50%);
            animation: confettiFall 900ms cubic-bezier(.2,.8,.2,1) forwards;
        }
        @keyframes confettiFall {
            0%   { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
            70%  { transform: translate(-50%, calc(-50% + 120px)) rotate(60deg) scale(1.1); opacity: .95; }
            100% { transform: translate(-50%, calc(-50% + 220px)) rotate(120deg) scale(0.9); opacity: 0; }
        }

        /* Optional: add a subtle “ping” when the popup appears */
        .play-popup-card::after {
            content: "";
            position: absolute;
            inset: -8px;
            border: 4px solid rgba(255,255,255,0.6);
            opacity: 0;
            animation: ringPulse 0.6s ease-out 1;
        }
        @keyframes ringPulse {
            0%   { transform: scale(0.9); opacity: 0; }
            40%  { transform: scale(1.02); opacity: 1; }
            100% { transform: scale(1.1); opacity: 0; }
        }

        .projects-line {
            margin: 0;
            font-size: clamp(16px, 2.2vw, 20px);
        }
        .projects-line .pipe {
            display: inline-block;
            margin: 0 18px;            /* bigger spacing around | */
            opacity: 0.7;
        }
        .project-link {
            font-weight: 700;
            text-decoration: none;
            border-bottom: 2px solid transparent;
        }
        .project-link:hover {
            border-bottom-color: currentColor;
        }

        /* === Pixel Toast Confirmation === */
        /* === Pixel Toast Confirmation === */
        .px-toast {
            position: fixed;
            left: 50%;
            top: 50%;
            left: 50dvw;  /* dynamic viewport width (better on mobile) */
            top: 50dvh;   /* dynamic viewport height (better on mobile) */
            transform: translate(-50%, -50%);
            background: #40cfe8;
            border: 4px solid #ff8c00;
            outline: 4px solid #ffffff;
            color: #0b2a33;
            padding: 10px 16px;
            z-index: 9999;
            image-rendering: pixelated;
            font-weight: 700;
            text-align: center;
            min-width: 260px;
            max-width: 90vw;
            box-shadow: 0 4px 0 rgba(0,0,0,0.25);
            animation: toastIn 200ms ease-out;
        }

        @keyframes toastIn {
            from { transform: translate(-50%, calc(-50% + 8px)); opacity: 0; }
            to   { transform: translate(-50%, -50%); opacity: 1; }
        }


        /* Screen shake (pixel-style) */
        .shake {
            animation: screenShake 750ms steps(2) 1;
        }
        @keyframes screenShake {
            0%   { transform: translate(0, 0); }
            10%  { transform: translate(-18px, 0); }
            20%  { transform: translate(18px, 0); }
            30%  { transform: translate(-15px, 0); }
            40%  { transform: translate(15px, 0); }
            50%  { transform: translate(-12px, 0); }
            60%  { transform: translate(12px, 0); }
            70%  { transform: translate(-9px, 0); }
            80%  { transform: translate(6px, 0); }
            90%  { transform: translate(-3px, 0); }
            100% { transform: translate(0, 0); }
        }

        /* === Special Bubble: rainbow flash on hero background === */
        .rainbow-flash {
            animation: gggRainbow 6s linear 0s;
        }
        @keyframes gggRainbow {
            0%   { background: #40cfe8; }
            7%  { background: #ff004c; }
            14%  { background: #ff8c00; }
            28%  { background: #ffee00; }
            35%  { background: #00d12b; }
            42%  { background: #4070ff; }
            49% { background: #8b00ff; }
            56%   { background: #40cfe8; }
            63%  { background: #ff004c; }
            70%  { background: #ff8c00; }
            77%  { background: #ffee00; }
            84%  { background: #00d12b; }
            91%  { background: #4070ff; }
            100% { background: #8b00ff; }
        }
        /* Visual distinction for the special bubble */
        .bubble.special {
            z-index: 4;
        }
    
        /* ---------------------------------------------------------
           Promo bands (Merch / Steam / Quiz)
           Full-bleed even inside #siteContent padding.
        --------------------------------------------------------- */
        /* Base promo section */
        .promo-section{
            position: relative;
            width: 100vw;
            margin-left: calc(50% - 50vw);
            margin-right: calc(50% - 50vw);
            overflow: hidden;
            display: grid;
            place-items: center;
            isolation: isolate;
        }

        /* Merch = 50% larger than 50vh -> 75vh */
        .promo-section.promo-merch{
            height: 3vh;
            min-height: 512px; /* 360 * 1.5 */
        }

        /* Steam = 25% larger than 50vh -> 62.5vh */
        .promo-section.promo-steam{
            height: 62.5vh;
            min-height: 450px; /* 360 * 1.25 */
        }

        /* SoftPop has more controls than the Steam banner. Let the section grow
           when a short landscape viewport cannot contain all of them. */
        .promo-section.promo-softpop{
            height: auto;
            min-height: max(450px, 62.5vh);
            padding: 24px 0;
        }

        /* Quiz = what KS/Steam used to be (50vh) */
        .promo-section.promo-quiz{
            height: 50vh;
            min-height: 360px;
        }
        
        .promo-bg{
            position:absolute;
            inset:0;
            z-index:0;
        }
        .promo-bg video{
            display:block;
            width:100%;
            height:100%;
            object-fit:cover;
            object-position:center;
            filter: saturate(1.1) contrast(1.05);
        }
        .promo-bg img{
            display:block;
            width:100%;
            height:100%;
            object-fit:cover;       /* this is the “zoom + crop to fit” behavior */
            object-position:center; /* tweak if you want to aim at top etc */
            transform: scale(1.08); /* optional: slight extra zoom so it feels “filled” */
            image-rendering: auto;  /* keep screenshots crisp (not pixelated) */
        }
        .promo-bg.merch-bg{
            background: #0b2a33;
        }
        .promo-bg::after{
            content:"";
            position:absolute;
            inset:0;
            background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.55));
        }
        .promo-content{
            position:relative;
            z-index:1;
            width:min(1100px, 92vw);
            padding: 22px 18px;
            border: 4px solid #ff8c00;
            outline: 4px solid #ffffff;
            background: rgba(64, 207, 232, 0.369);
            color:#ffffff;
            text-align:center;
            image-rendering: pixelated;
        }

        .promo-content :is(p, h1,h2,h3,h4,h5,h6, span, strong, em, li){
            text-shadow:
                    3px 3px 0 #0b2a33,       /* your old promo text color */
                    4px 4px 0 #0b2a33;       /* slightly thicker, still crisp */
        }

        /* don’t affect the pixel buttons */
        .promo-content .px-btn{
            text-shadow: none;
        }

        /* Make the quiz banner content box tighter */
        .promo-section.promo-quiz .promo-content{
            width: min(820px, 90vw);
            padding: 14px 12px;
        }
        .promo-section.promo-quiz .promo-kicker{
            font-size: clamp(12px, 1.6vw, 16px);
            margin-bottom: 8px;
        }
        .promo-section.promo-quiz .promo-title{
            font-size: clamp(18px, 2.4vw, 26px);
            margin-bottom: 10px;
        }
        .promo-section.promo-quiz .promo-sub{
            font-size: clamp(24px, 3vw, 24px);
            margin-bottom: 12px;
        }

        .promo-kicker{
            font-family: "Press Start 2P", monospace;
            text-transform: uppercase;
            font-size: clamp(16px, 2.1vw, 22px);
            margin: 0 0 10px 0;
        }
        .promo-title{
            font-family: "Press Start 2P", monospace;
            font-size: clamp(36px, 4vw, 42px);
            margin: 0 0 14px 0;
        }
        .promo-sub{
            margin: 0 0 16px 0;
            font-size: clamp(28px, 3vw, 28px);
            font-weight: 900;
        }
        .promo-row{
            display:flex;
            gap: 18px;
            align-items:center;
            justify-content:center;
            flex-wrap:wrap;
        }
        .promo-logo{
            width: min(320px, 72vw);
            height: auto;
            image-rendering: pixelated;
            filter: drop-shadow(0 6px 0 rgba(0,0,0,0.28));
        }
        .promo-logo-centered{
            display: block;
            width: min(320px, 72vw);
            height: auto;
            margin: 0 auto;
            image-rendering: pixelated;
            filter: drop-shadow(0 6px 0 rgba(0,0,0,0.28));
        }
        .promo-shot{
            width: min(620px, 92vw);
            height: auto;
            border: 4px solid rgba(0,0,0,0.35);
            image-rendering: pixelated;
            background: rgba(0,0,0,0.12);
        }
        .promo-links{
            display:flex;
            gap: 12px;
            justify-content:center;
            flex-wrap:wrap;
        }
        .softpop-testing-links{
            margin-top: 14px;
        }
        .softpop-testing-links .px-btn.disabled{
            background: #777;
            color: #ddd;
            cursor: not-allowed;
            opacity: 0.78;
            pointer-events: none;
        }
        .softpop-signup{
            display: flex;
            justify-content: center;
            align-items: stretch;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 14px;
        }
        .softpop-signup input{
            width: min(330px, 100%);
            min-height: 45px;
            border: 3px solid #000;
            outline: 3px solid #fff;
            padding: 8px 10px;
            font-family: "Pixelify Sans", sans-serif;
            font-size: 20px;
            font-weight: 700;
            color: #082031;
            background: rgba(255,255,255,0.94);
        }
        .softpop-signup .px-btn{
            white-space: nowrap;
        }
        .softpop-signup-status{
            display: none;
            margin-top: 12px;
            font-family: "Press Start 2P", monospace;
            font-size: clamp(10px, 1.5vw, 13px);
            line-height: 1.5;
            overflow-wrap: anywhere;
        }
        .softpop-promise {
            display: inline-flex;
            align-items: center;
            background: #ffb300;
            color: #3a2400;
            border: 3px solid #0b2a33;
            outline: 3px solid #fff;
            padding: 6px 12px;
            font-size: clamp(13px, 1.6vw, 17px);
            line-height: 1.15;
            white-space: nowrap;
            image-rendering: pixelated;
            text-shadow: none;   /* .promo-content :is(p,...) adds a heavy double shadow; cancel it here */
        }

        .promo-content .softpop-promise,
        .promo-content :is(span).softpop-promise {
            text-shadow: none;
        }

        .softpop-signup-status.show{
            display: block;
        }

        .promo-section.promo-quiz .px-btn{
            padding: 6px 10px;
            font-size: 32px;
            border-width: 2px;
            outline-width: 2px;
            line-height: 1.1;
        }

        .quiz-stats{
            margin-top: 10px;
            display: none;
            border: 3px solid rgba(0,0,0,0.35);
            outline: 3px solid rgba(255,255,255,0.7);
            padding: 10px 12px;
            background: rgba(0,0,0,0.2);
            font-family: "Press Start 2P", monospace;
            font-size: clamp(12px, 1.7vw, 16px);
            text-transform: uppercase;
            line-height: 1.4;
            overflow-wrap: anywhere;
            word-break: break-word;
        }
        .contact-email {
            overflow-wrap: anywhere;
            word-break: break-word;
            line-height: 1.5;
        }
        /* --- BIG SHOP CTA (under About Me) --- */
        .shop-cta-wrap{
            display: flex;
            justify-content: center;
            margin: 26px 0 34px;
        }

        .px-btn.shop-cta{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            width: min(820px, 94vw);
            padding: 18px 22px;
            font-size: clamp(22px, 3.2vw, 36px);
            text-transform: uppercase;
            letter-spacing: 1px;

            /* On-theme colors */
            background: #ff8c00;          /* your orange */
            color: #fff;

            /* extra “big button” feel */
            box-shadow: 0 8px 0 rgba(0,0,0,0.25);
            transition: linear 0.2s;
            animation: retroPulse 0.9s steps(4) infinite;
        }

        .px-btn.shop-cta:active{
            transform: translateY(2px);
            box-shadow: 0 6px 0 rgba(0,0,0,0.25);
        }

        .px-btn.shop-cta:hover:hover{
            scale: 1.2;
            animation: retroPulse 0.3s steps(12) infinite;
        }

        .shop-cta-bubble{
            width: 34px;
            height: 34px;
            image-rendering: pixelated;
            filter: drop-shadow(0 3px 0 rgba(0,0,0,0.25));
        }

        .ksVideo{}

        @media (max-width: 420px){
            .shop-cta-bubble{ width: 26px; height: 26px; }
        }

        /* -----------------------------
   Mobile promo fixes
----------------------------- */
        /* -----------------------------
   Mobile promo fixes (CLEAN)
----------------------------- */
        @media (max-width: 768px){
            #siteContent{
                padding-left: 16px;
                padding-right: 16px;
            }

            .highscore-box{
                width: 80%;
            }

            #emailRow.show{
                max-height: 280px;
            }

            .site-title{
                font-size: clamp(0.95rem, 6.2vw, 1.75rem);
                letter-spacing: 0;
            }

            /* STEAM: let it grow so content never gets clipped */
            .promo-section.promo-steam{
                height: auto;
                min-height: 0;
                padding: 16px 0;
            }

            .promo-section.promo-steam .promo-content{
                width: min(760px, 94vw);
                padding: 12px 10px;
            }

            /* IMPORTANT: stack the logo + screenshot (prevents sideways bleed) */
            .promo-section.promo-steam .promo-row{
                width: 100%;
                flex-direction: column;
                align-items: center;
                gap: 10px;
                flex-wrap: nowrap; /* prevent weird wrapping */
            }

            /* Logo scales down nicely */
            .promo-section.promo-steam .promo-logo{
                width: clamp(160px, 60vw, 260px);
                max-width: 100%;
                height: auto;
                max-height: 110px;
                object-fit: contain;
            }

            /* Screenshot never bleeds outside the card */
            .promo-section.promo-steam .promo-shot{
                display: block;
                width: 100%;
                max-width: 100%;
                height: auto;
                box-sizing: border-box;
                object-fit: contain; /* keep whole screenshot visible */
            }

            .promo-section.promo-steam .promo-links{
                margin-top: 10px !important;
            }
            .promo-section.promo-steam .px-btn{
                padding: 8px 10px;
                font-size: 16px;
            }

            .softpop-signup input,
            .softpop-signup .px-btn{
                width: min(330px, 100%);
            }

            /* QUIZ: "cover" but less cropped on mobile by making the band less tall */
            .promo-section.promo-quiz{
                height: auto;
                min-height: 300px;
                padding: 16px 0;
            }

            .promo-section.promo-quiz .promo-content{
                width: min(760px, 94vw);
                padding: 12px 10px;
            }

            .promo-section.promo-quiz .promo-bg img{
                transform: none;          /* override your global scale(1.08) */
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: 50% 50%;
            }

            /* Quiz overlay lighter so bg shows through more */
            .promo-section.promo-quiz .promo-bg::after{
                background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.26));
            }

            /* Your quiz button is HUGE on mobile right now (28px).
               This keeps it from crowding/overflowing. */
            .promo-section.promo-quiz .px-btn{
                font-size: 16px;
                padding: 8px 10px;
            }

            .quiz-stats{
                font-size: clamp(10px, 3vw, 13px);
                padding: 8px 10px;
                line-height: 1.5;
            }

            .contact-email{
                font-size: clamp(0.8rem, 3.5vw, 1rem);
            }
        }

        @media (max-width: 420px){
            .promo-section.promo-steam .px-btn{ font-size: 14px; }
            .promo-section.promo-quiz{ min-height: 280px; }
        }