@font-face {
      font-family: 'Bowlby One SC Local';
      src: url('../fonts/bowlby-one-sc.ttf') format('truetype');
      font-style: normal;
      font-weight: 400;
      font-display: swap;
    }

    html, body {
      line-height: 1;
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      overflow:hidden;
      }

    /* The lander carries the background at its native 1080x2050 ratio.
       js/app.js sets --fit-scale so the full image height fits the viewport. */
    .lander {
      position: relative;
      width: 100%;
      aspect-ratio: 1080 / 2050;
      background: url('../images/bg-en.webp') no-repeat top center / 100% auto;
      transform: scale(var(--fit-scale, 1));
      transform-origin: top center;
    }

    /* Coin placement traced from images/bg-en-full.webp, remapped onto the
       taller bg-en.webp (1080x2050). The layer stops at the baked-in footer
       (y=1929), so coins tuck behind it like the mockup. */
    .coin-layer {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      aspect-ratio: 1080 / 1929;
      overflow: hidden;
      pointer-events: none;
      user-select: none;
    }

    .floating-coin {
      position: absolute;
      height: auto;
      filter: drop-shadow(0 8px 8px rgba(58, 0, 0, 0.42));
      will-change: transform;
      animation: floatCoin var(--float-duration, 5.6s) ease-in-out infinite var(--float-delay, 0s);
    }

    .floating-coin--1 { left: -5.5%; top: 45%;   width: 26%;   --rot-a: -6deg; --rot-b: 6deg;  --dx: 8px;  --dy: -14px; --float-duration: 5.6s; }
    .floating-coin--2 { left: 83.5%; top: 44.8%; width: 27%;   --rot-a: 5deg;  --rot-b: -5deg; --dx: -8px; --dy: -16px; --float-duration: 6.4s; --float-delay: -1.2s; }
    .floating-coin--3 { left: -11%;  top: 84.6%; width: 29%;   --rot-a: 4deg;  --rot-b: -6deg; --dx: 7px;  --dy: -15px; --float-duration: 6s;   --float-delay: -2.4s; }
    .floating-coin--4 { left: 85.2%; top: 83.2%; width: 15.6%; --rot-a: -5deg; --rot-b: 7deg;  --dx: -6px; --dy: -12px; --float-duration: 5.2s; --float-delay: -0.6s; }
    .floating-coin--5 { left: 71.3%; top: 90.5%; width: 19%;   --rot-a: 3deg;  --rot-b: -5deg; --dx: -5px; --dy: -12px; --float-duration: 5.8s; --float-delay: -3.1s; }

    @media (prefers-reduced-motion: reduce) {
      .floating-coin { animation: none; }
    }

    body {
      font-family: 'Gotham', sans-serif;
      font-size: 1em;
      background-color: black;
      position: relative;
      max-height: 760px;  
      width: 100%;    
      }

    .spins-left {
      text-align: center;
      margin-top: 20px;
      color: #FFDF00;
      font-size: 13px;
      font-weight: 600;
      z-index: 999;
      top: 250px;
      position: absolute;   
      left: 50%;   
      transform: translate(-50%, -50%);
      background: url('../images/countbar.webp') no-repeat center;
      background-size: 150px 40px; /* Adjust to desired width and height */
      padding: 15px 13px; /* Adjust padding to fit the text inside the image */
      width: 100%;
      }  

    .wheel-frame {
      position: absolute;
      top: 453px; /* Center vertically */
      left: 50%; /* Center horizontally */
      transform: translate(-50%, -50%); /* Offset by half of its size to truly center */
      width: 320px; /* Adjust width according to the frame size */
      height: 320px; /* Adjust height according to the frame size */
      pointer-events: none; /* Allow clicks to pass through */
      z-index: 2; /* Ensure it's above the wheel but below the button */
      }


    .wheel-container {
      position: absolute;
      z-index: 2;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      left:10%;
      margin-top:240px;
      }

    .wheel {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      transform-origin: center;
    }

    .pie-img {
      position: absolute;
      width: 50%;
      height: 100%;
      top: 0;
      left: 50%;
      transform-origin: 0 50%;
      opacity: 1; /* Fully visible */
      transition: opacity 0.2s ease-in-out;
    }

    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 80px;
      height: 80px;
      background-color: white;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
    }

.spin-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 112, 75, 0.75) 0%, rgba(255, 112, 75, 0) 26%),
    linear-gradient(145deg, #de1111 0%, #a00000 48%, #650000 100%);
  border: 2px solid #f9bd27;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15), /* General shadow */
              inset 0px 2px 5px rgba(255, 255, 255, 0.8), /* Inner highlight */
              inset 0px -2px 5px rgba(0, 0, 0, 0.2); /* Inner shadow for depth */
  text-align: center;
  transition: background 0.2s ease, box-shadow 0.2s ease; /* Transition for background and shadow */
  transform: translate(-50%, -50%); /* Center the button */
  animation: spinButtonPulse 0.6s ease-in-out infinite;
}

#spin-copy {
  display: flex;
  width: 126%;
  height: auto;
  padding: 0 0.03em 0.1em 0;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Bowlby One SC Local', Impact, Haettenschweiler, 'Arial Black', sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 0.71;
  text-transform: uppercase;
  transform: translate(-3px, -4px);
}

.spin-copy-line {
  display: block;
  position: relative;
  color: #ff8a00;
  -webkit-text-fill-color: #ff8a00;
  -webkit-text-stroke: 0.8px #e16f00;
  text-shadow:
    1px 1px 0 #ed5134,
    2px 2px 0 #df3b3d,
    3px 3px 0 #ce304b,
    4px 4px 0 #c52b68,
    5px 5px 0 #8d205f,
    6px 6px 0 #5b185b,
    7px 7px 0 #351451,
    9px 11px 5px rgba(10, 0, 35, 0.65);
}

.spin-copy-line::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #fff56a;
  background: linear-gradient(180deg, #c88405 0%, #eebd24 10%, #ffe86a 24%, #fff3a0 38%, #ffd348 62%, #f2a300 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.55px #a7192b;
  paint-order: stroke fill;
  text-shadow: none;
  pointer-events: none;
}

.spin-copy-line--top {
  font-size: clamp(24px, 7.2vw, 29px);
  letter-spacing: 0.035em;
}

.spin-copy-line--bottom {
  margin-top: 7px;
  font-size: clamp(31px, 9.2vw, 38px);
  letter-spacing: 0.015em;
}

.spin-btn:active {
background: linear-gradient(145deg, #f6e58d, #f9ca24, #f39c12); /* Lighter gold gradient with 3D effect */
color: #000;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2), /* Slightly less pronounced shadow */
              inset 0px 2px 5px rgba(255, 255, 255, 0.6), /* Reduced inner highlight */
              inset 0px -2px 5px rgba(0, 0, 0, 0.3); /* Darker inner shadow */
  transform: translate(-50%, -50%) scale(0.95); /* Slight shrink effect on press */
  animation-play-state: paused;
}

@keyframes spinButtonPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
}

@keyframes floatCoin {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--rot-a, 0deg)); }
  50% { transform: translate3d(var(--dx, 0), var(--dy, -14px), 0) rotate(var(--rot-b, 0deg)); }
}

/* Optional hover effect */
.spin-btn:hover {
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2),
              inset 0px 2px 5px rgba(255, 255, 255, 0.9), /* Enhanced inner highlight */
              inset 0px -2px 5px rgba(0, 0, 0, 0.3); /* Enhanced inner shadow */
}


    @keyframes colorBlink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }

    .blink {
      animation: colorBlink 0.5s ease-in-out 5 alternate; /* Blink 5 times */
    }

    .trust-footer {
      position: fixed;
      left: 50%;
      top: 625px;
      z-index: 50;
      display: grid;
      grid-template-columns: 37% 63%;
      width: min(100vw, 400px);
      height: 48px;
      box-sizing: border-box;
      overflow: hidden;
      transform: translateX(-50%);
      border-top: 2px solid #e4a32d;
      background: #050505;
      box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.45);
    }

    .trust-brand-row,
    .trust-strip-row {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .trust-brand-row {
      position: relative;
      z-index: 2;
      align-items: center;
      justify-content: center;
      padding: 2px 11% 2px 3%;
      box-sizing: border-box;
      background:
        radial-gradient(circle at 34% 18%, rgba(190, 20, 17, 0.92) 0%, rgba(115, 0, 7, 0.9) 46%, rgba(38, 0, 4, 0.98) 100%),
        linear-gradient(135deg, #310003 0%, #92000b 58%, #3c0004 100%);
      box-shadow: inset 0 1px 0 rgba(255, 117, 81, 0.22), inset -12px 0 18px rgba(24, 0, 4, 0.35);
      clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
    }

    .trust-brand-row img {
      display: block;
      width: min(118px, 100%);
      max-height: 41px;
      object-fit: contain;
      height: auto;
      transform: scale(0.9);
      transform-origin: center;
    }

    .trust-strips {
      display: grid;
      grid-template-rows: repeat(2, minmax(0, 1fr));
      align-self: center;
      justify-self: center;
      gap: 1px;
      width: 100%;
      height: 100%;
      min-width: 0;
      padding: 2px 4px 2px 0;
      box-sizing: border-box;
      background: #050505;
      transform: scale(0.85);
      transform-origin: center;
    }

    .trust-strip-row {
      gap: 1px;
      background: #050505;
    }

    .trust-logo-item {
      display: flex;
      flex: 0 0 clamp(15px, 4.8vw, 20px);
      align-items: center;
      justify-content: center;
      width: clamp(15px, 4.8vw, 20px);
      min-width: clamp(15px, 4.8vw, 20px);
      height: clamp(15px, 4.8vw, 20px);
      padding: 1px;
      box-sizing: border-box;
      overflow: hidden;
      border-radius: 4px;
      background: #050505;
      box-shadow: inset 0 0 0 1px rgba(255, 225, 134, 0.13);
    }

    .trust-logo-item--wide {
      flex-grow: 0;
    }

    .trust-logo-item--godaddy {
      flex-grow: 0;
    }

    .trust-logo-item img {
      display: block;
      width: 100%;
      max-width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.4));
    }

    .trust-logo-item--square img {
      width: auto;
    }

    .trust-logo-item--ocbc {
      background: #111820;
    }

/*---------------------------------------------------------------------------------------------------------------------*/
    /* Popup GIF */  
#overlay {
  position: fixed; 
  top: 0;
  left: 0;
  width: 100vw;
  height: 830vh;
  background-color: rgba(0, 0, 0, 0.8); 
  z-index: 1888; 
  display: none;    
}

#gifContainer {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1900;
  display: none;
}

#gifContainer img {
  width: 400px; 
  height: auto;
}

#popup {
  position: fixed;
  top: 72%;
  left: 50%;
  width: min(330px, calc(100vw - 36px));
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  z-index: 10000;
  display: none;
  text-align: center;
  padding: 18px 18px 20px;
  border: 1px solid rgba(255, 211, 72, 0.3);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(34, 19, 4, 0.62), rgba(12, 7, 2, 0.76));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 242, 176, 0.12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#popup .result-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 15px;
  line-height: 1.35;
  text-wrap: balance;
}

#popup #result-heading {
  color: #ffe36a;
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

#popup .result-sentence {
  display: block;
}

#popup #result-prize {
  color: #ffd534;
}

#popup #brand-link {
  color: #fff;
  text-decoration: none;
}

#popup .cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  left: 50%;
  width: min(340px, calc(100vw - 16px));
  margin: 12px 0 0;
  padding: 0;
  translate: -45% -5%;
  text-decoration: none;
  filter: drop-shadow(0 7px 10px rgba(218, 165, 32, 0.9));
  animation: zoomInOut 0.7s infinite;
} 

#popup .cta-button img {
  width: 100%;
  height: auto;
}

.spin-btn:disabled {
  cursor: default;
}

@keyframes zoomInOut {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}
/*---------------------------------------------------------------------------------------------------------------------*/
    /* Media Queries */
    @media (max-width: 1200px) {
      .trust-footer {
        top: 690px;
      }

      .wheel-frame {
        width: 360px;
        height: 360px;
        top: 490px;
        left: 50%;
      }
        
      .wheel-container {
        width: 315px;
        height: 315px;
        top: 94px;
        left: 10.5%;
      }
      .spin-btn {
        width: 100px;
        height: 100px;
        top: 105px;
        left: 34%;
      }
    }

    @media (min-width: 768px)  {
    body {
        max-width: 400px;
        left: 50%;
        transform: translateX(-50%); 
    }   

      .spins-left {
        font-size: 13px;
        background-size: 150px 40px;
        top: 275px;
      }
        
      .wheel-frame {
        width: 360px;
        height: 360px;
        top: 490px;
        left: 50%;
      }
        
      .wheel-container {
        width: 315px;
        height: 315px;
        top: 94px;
        left: 10.5%;
      }
      .spin-btn {
        width: 100px;
        height: 100px;
        top: 105px;
        left: 34%;
      }

      .trust-footer {
        top: 690px;
      }
    }

@media (min-width: 400px) and (max-width: 767px)  {
    body {
        max-width: 400px;
        left: 50%;
        transform: translateX(-50%);
        overflow-y:hidden;
    }   
    
      .spins-left {
        font-size: 13px;
        background-size: 150px 40px;
        top: 275px;
      }
        
      .wheel-frame {
        width: 350px;
        height: 350px;
        top: 490px;
        left: 50%;
      }
        
      .wheel-container {
        width: 310px;
        height: 310px;
        top: 94px;
        left: 11%;
      }
      .spin-btn {
        width: 100px;
        height: 100px;
        top: 105px;
        left: 34%;
      }

      .trust-footer {
        top: 685px;
      }
    }

@media (min-width: 370px) and (max-width: 399px)  {
    body{
        max-width: 370px;
        left: 50%;
        transform: translateX(-50%);
    }     
    
      .spins-left {
        font-size: 13px;
        background-size: 140px 40px;
        top: 250px;
      }

      .wheel-frame {
        width: 330px;
        height: 330px;
        top: 450px;
        left: 50%;
      }
        
      .wheel-container {
        width: 290px;
        height: 290px;
        top: 63px;
        left: 11%;
      }
      .spin-btn {
        width: 95px;
        height: 95px;
        top: 96px;
        left: 34%;
      }

      .trust-footer {
        top: 635px;
      }
    }

      
@media (min-width: 361px) and (max-width: 369px)  {
    body{
        max-width: 360px;
        left: 50%;
        transform: translateX(-50%);
    }
    
      .spins-left {
        font-size: 13px;
        background-size: 140px 40px;
        top: 240px;
      }
    
      .wheel-frame {
        width: 310px;
        height: 310px;
        top: 435px;
        left: 50%;
      }
        
      .wheel-container {
        width: 270px;
        height: 270px;
        top: 60px;
        left: 12%;
      }
      .spin-btn {
        width: 90px;
        height: 90px;
        top: 86px;
        left: 33%;
      }

      .trust-footer {
        top: 610px;
      }
    }
    
    
    
@media (min-width: 345px) and (max-width: 360px)  {
    body{
        max-width: 350px;
        left: 50%;
        transform: translateX(-50%);
    }    

      .spins-left {
        font-size: 12px;
        background-size: 140px 40px;
        top: 240px;
      }
    
      .wheel-frame {
        width: 310px;
        height: 310px;
        top: 435px;
        left: 50%;
      }
        
      .wheel-container {
        width: 270px;
        height: 270px;
        top: 60px;
        left: 11%;
      }
      .spin-btn {
        width: 90px;
        height: 90px;
        top: 86px;
        left: 33%;
      }

      .trust-footer {
        top: 610px;
      }
    }
      
    
@media (min-width: 320px) and (max-width: 344px)  {
    body{
        max-width: 320px;
        left: 50%;
        transform: translateX(-50%);
    }    
    
      .spins-left {
        font-size: 10px;
        background-size: 120px 35px;
        top: 220px;
      }
    
      .wheel-frame {
        width: 285px;
        height: 285px;
        top: 400px;
        left: 50%;
      }
    
      .wheel-container {
        width: 250px;
        height: 250px;
        top: 36px;
        left: 11%;
      }
      .spin-btn {
        width: 85px;
        height: 85px;
        top: 80px;
        left: 33.5%;
      }

      .trust-footer {
        top: 563px;
      }
    }

@media (max-width: 319px) {
  .trust-footer {
    top: 690px;
  }
}

/* Keep the call-to-action geometrically centered at every wheel size. */
.wheel-container .spin-btn {
  top: 50%;
  left: 50%;
  width: clamp(92px, 28vw, 106px);
  height: clamp(92px, 28vw, 106px);
}

/*---------------------------------------------------------------------------------------------------------------------*/


    @-webkit-keyframes tada {
      0%, 100% {
        -webkit-transform: scale3d(1, 1, 1)
      }
      10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
      }
      30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg)
      }
      40%, 60%, 80% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg)
      }
    }

    @-moz-keyframes tada {
      0%, 100% {
        -moz-transform: scale3d(1, 1, 1)
      }
      10%, 20% {
        -moz-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
      }
      30%, 50%, 70%, 90% {
        -moz-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg)
      }
      40%, 60%, 80% {
        -moz-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg)
      }
    }

    @keyframes tada {
      0%, 100% {
        transform: scale3d(1, 1, 1)
      }
      10%, 20% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
      }
      30%, 50%, 70%, 90% {
        transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg)
      }
      40%, 60%, 80% {
        transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg)
      }
    }

     /* Sound toggle button */
.sound-toggle {
  position: fixed;
  top: 20px; /* Adjust the distance from the top */
  right: 20px; /* Adjust the distance from the right */
  background: none; /* Remove default button background */
  border: none; /* Remove default button border */
  padding: 0; /* Remove padding */
  cursor: pointer; /* Show pointer cursor on hover */
  z-index: 2000; /* Ensure it's above other content */
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1); /* Slightly enlarge the icon */
  }
}

.sound-text {
  display: block; /* Ensure the span is a block element */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  line-height: 1; /* Adjust line height if needed */
  font-size: 11px;
}
      
.sound-icon {
  width: 50px; /* Adjust the width as needed */
  height: auto; /* Maintain aspect ratio */
  margin-top: -25px; /* Adjust this value to reduce or increase the gap */
  transition: transform 0.2s ease-in-out; /* Smooth transform changes */
}