* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html,
      body {
        height: 100%;
        margin: 0;
        background: #000;
        font-family: "Verdana, Geneva, sans-serif", sans-serif;
      }

      /* Center the stage and prevent any scrollbars */
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }

      /* The 9:16 stage that everything is absolutely positioned inside of */
      #stage {
        position: relative;
        /* Always 9:16; scale to fit either width or height, whichever is limiting */
        width: min(100vw, calc(100vh * 9 / 16));
        height: min(calc(100vw * 16 / 9), 100vh);
        aspect-ratio: 9 / 16;
        background: #000;
        overflow: hidden;
      }

      /* Any videos/overlays inside should position relative to this box */
      .video-area {
        position: relative;
      }

      .cover-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
      }

      .cover-text {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        /* Ensure cover text always sits above any finger pointer */
        z-index: 30;
        pointer-events: none;
        opacity: 1;
        visibility: visible;
      }

      /* Fallback positioning when no saved coordinates exist */
      .cover-text--fallback {
        align-items: flex-end;
        padding: 20px 20px 120px;
      }

      .cover-text h2 {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        color: white !important;
        text-shadow:
          2px 2px 4px rgba(0, 0, 0, 0.8),
          0 0 10px rgba(0, 0, 0, 0.5);
        font-family: Verdana, Geneva, sans-serif;
        margin: 0;
        white-space: nowrap; /* Match Elements Placement canvas */
        max-width: 300px; /* Match Elements Placement canvas */
        line-height: 1.2;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 999;
        position: relative;
      }

      @media (max-width: 480px) {
        .cover-text h2 {
          font-size: 20px;
        }
        .cover-text {
          padding: 20px 20px 100px;
        }
      }

      .background-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        z-index: 1;
        pointer-events: none;
        display: none;
      }

      .background-video.show {
        display: block;
        opacity: 0.3;
      }

      /* Match InteractivePreview – never crop the frame */
      .gameplay-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        z-index: 2;
        opacity: 0;
        pointer-events: none;
        display: none;
      }

      .gameplay-video.show {
        display: block;
        opacity: 1;
      }

      /* Full-screen mode: video-area must fill the stage */
      .video-area.fullscreen {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      /* Full-screen mode: default video position (can be overridden by JS) */
      .video-area.fullscreen .gameplay-video {
        top: 0;
        bottom: 50%;
        left: 5%;
        width: 90%;
        height: 50%;
      }

      /* Full-screen mode: custom video positioning */
      .video-area.fullscreen .gameplay-video.custom-position {
        top: auto;
        bottom: auto;
        left: auto;
        /* Position will be set by JavaScript */
      }

      /* Centre the CTA exactly like the React preview */
      .cta-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.3);
        z-index: 10;
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      /* Custom CTA Button Image CSS - Wrapper/Inner structure */
      .cta-button.custom-button {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        position: relative;
        z-index: 20;
        /* Wrapper handles positioning only - never animates */
      }

      .cta-button.custom-button .cta-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 132px;
        height: 88px;
        transform-origin: center;
        animation: ctaButtonPulse 2s ease-in-out infinite;
      }

      .cta-button.custom-button img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        pointer-events: none;
      }

      @keyframes ctaButtonPulse {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.05);
        }
      }

      /* Play button overlay */
      .play-button-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 15;
      }

      .play-button {
        width: 48px;
        height: 48px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.3s ease;
      }

      .play-button:hover {
        background: rgba(0, 0, 0, 0.7);
      }

      .play-icon {
        width: 24px;
        height: 24px;
        border-style: solid;
        border-width: 12px 0 12px 20px;
        border-color: transparent transparent transparent white;
        margin-left: 4px;
      }

      @keyframes pulse {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.05);
        }
        100% {
          transform: scale(1);
        }
      }

      .final-cta {
        position: absolute;
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 5;
        opacity: 0;
      }

      /* Make final CTA visible when shown */
      .final-cta.show {
        opacity: 1;
      }

      /* Ensure final CTA button is clickable */
      #finalCtaButton {
        text-decoration: none;
        display: inline-block;
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
      }
      #finalCtaButton.custom-image {
        border: none;
        outline: none;
      }

      .store-badge {
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
      }

      .store-badge.show {
        opacity: 1;
      }

      .outro-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 3;
        opacity: 0;
        transition: opacity 0.5s ease;
      }

      .outro-background.show {
        opacity: 1;
      }

      .outro-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        z-index: 4;
        opacity: 0;
        transition: opacity 0.5s ease;
        pointer-events: none;
      }

      .outro-overlay.show {
        opacity: 1;
      }

      .final-cta-button {
        background: linear-gradient(45deg, #ffd700, #ffe55c);
        color: #000;
        border: none;
        padding: 20px 40px;
        font-size: 20px;
        font-weight: bold;
        border-radius: 30px;
        cursor: pointer;
        animation:
          glow 2s infinite,
          pulse 2s infinite;
        font-family: Verdana, Geneva, sans-serif;
      }

      .final-cta-button.custom-image {
        background: none;
        padding: 0;
        border: none;
        border-radius: 0;
        max-width: none; /* Match canvas: do not cap width to 90% */
        max-height: none;
        width: auto; /* Will be overridden inline for custom size */
        height: auto;
        object-fit: contain;
        animation: pulse 2s infinite;
      }

      .winning-badge {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
        width: 80%;
        max-width: 520px;
        z-index: 999;
        opacity: 0;
        transition:
          opacity 0.25s ease,
          transform 0.25s ease;
        pointer-events: none;
      }
      .winning-badge.show {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.02);
        animation: badgePulse 1.2s ease-in-out infinite;
      }

      @keyframes badgePulse {
        0%,
        100% {
          transform: translate(-50%, -50%) scale(1.02);
          filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.6));
        }
        50% {
          transform: translate(-50%, -50%) scale(1.12);
          filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.9));
        }
      }

      /* Outro-specific animation control */
      .winning-badge.on-outro.show {
        animation: none !important;
      }

      .finger-pointer {
        position: absolute;
        font-size: 64px;
        color: #ffd700;
        line-height: 1;
        pointer-events: none;
        z-index: 25;
        opacity: 0;
        transition: opacity 0.5s ease;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
      }

      .finger-pointer.show {
        opacity: 1;
      }

      /* Split-screen finger positioning - positioned very close to button */
      .finger-pointer.split-screen {
        left: 50%;
        bottom: 35%;
        transform: rotate(-30deg) translate(-50%, 50%);
        animation: fingerPulse 1.5s ease-in-out infinite;
      }

      /* Full-screen finger positioning - positioned very close to button */
      .finger-pointer.full-screen {
        left: 50%;
        top: 65%;
        transform: rotate(-30deg) translate(-50%, -50%);
        animation: fingerPulseFullScreen 1.5s ease-in-out infinite;
      }

      /* Cover-only adjustments: nudge finger closer to CTA on cover screen */
      body.cover-state .finger-pointer.split-screen {
        bottom: 45%;
      }
      body.cover-state .finger-pointer.full-screen {
        top: 60%;
      }

      .spin-countdown {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
        width: auto;
        height: auto;
      }

      .spin-countdown.show {
        opacity: 1 !important;
      }

      .countdown-text {
        background: rgba(0, 0, 0, 0.95);
        color: #ffd700;
        border: 2px solid #ffd700;
        padding: 16px 24px;
        border-radius: 25px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        font-family: Verdana, Geneva, sans-serif;
        margin: 0;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
      }

      @keyframes glow {
        0%,
        100% {
          box-shadow: 0 0 20px #ffd700;
        }
        50% {
          box-shadow:
            0 0 30px #ffd700,
            0 0 40px #dc143c;
        }
      }

      @keyframes fingerPulse {
        0%,
        100% {
          transform: rotate(-45deg) translate(-50%, 50%) scale(1);
          opacity: 0.8;
        }
        50% {
          transform: rotate(-45deg) translate(-50%, 50%) scale(1.2);
          opacity: 1;
        }
      }

      @keyframes fingerPulseFullScreen {
        0%,
        100% {
          transform: rotate(-30deg) translate(-50%, -50%) scale(1);
          opacity: 0.8;
        }
        50% {
          transform: rotate(-30deg) translate(-50%, -50%) scale(1.2);
          opacity: 1;
        }
      }

      /* When a custom finger position is applied, keep the same base translate/rotate
           so animation never overrides the saved coordinates. */
      .finger-pointer.custom-pos {
        animation: fingerPulseCustom 1.5s ease-in-out infinite !important;
      }
      .finger-pointer.full-screen.custom-pos {
        animation: fingerPulseCustom 1.5s ease-in-out infinite !important;
      }
      @keyframes fingerPulseCustom {
        0%,
        100% {
          transform: translate(-50%, -50%) rotate(-30deg) scale(1);
          opacity: 0.8;
        }
        50% {
          transform: translate(-50%, -50%) rotate(-30deg) scale(1.2);
          opacity: 1;
        }
      }

      .hidden {
        display: none;
      }
      .show {
        opacity: 1;
      }

      /* Sound toggle */
      .sound-toggle {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 50;
      }
      .sound-btn {
        width: 38px;
        height: 38px;
        border-radius: 9999px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        display: grid;
        place-items: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .sound-btn:hover {
        background: rgba(0, 0, 0, 0.75);
      }
      .sound-icon {
        font-size: 18px;
        line-height: 1;
      }

      /* Moloco single-file overrides */
      .final-cta.show {
        opacity: 1;
      }
      #finalCtaButton {
        text-decoration: none;
        display: inline-block;
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
      }
      #finalCtaButton.custom-image {
        border: none;
        outline: none;
      }