#bg {
    width: 100%;
    height: 100vh;
}

  .main-container{
    width: 100%;
    height: 103vh;
  }

  .fancy-text {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6),
               0 0 20px rgba(255, 0, 0, 0.4);
}


  .countdown{
    top: 27%;
  }

  .form{
    top: 2%;
  }

.logo img{
  width:20%
}

#picture-1{
   animation: float 3s ease-in-out infinite; /* 平滑漂浮 */

}

#picture-2{
   animation: float 3s ease-in-out infinite; /* 平滑漂浮 */

}

.reward-amount {
  font-size: 44px; /* 奖金字体大小 */
  font-weight: bold; /* 可选，加粗 */
  color: #c7372b; /* 可选，黄金色 */
}

.logo-text{
  color:#c7372b;

    font-size: 77px;
    
}

  .sub-title{
    color: white !important;
    font-size: 40px;
  }

.countdown-box {
      border: 2px solid rgba(245, 210, 122, 0.4);
      border-radius: 20px;
      padding: 30px 20px;
      min-width: 150px;
      background: rgba(0, 0, 0, 0.35);
      box-shadow: inset 0 0 20px rgba(245, 210, 122, 0.15);
    }

  .countdown-number {
      font-size: 56px;
      font-weight: bold;
      line-height: 1;
      background: linear-gradient(to bottom, #FFE5B4, #D4AF37);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    }

  .countdown-label {
      letter-spacing: 2px;
      margin-top: 10px;
      font-size: 14px;
    }



.form-sub-title{
     color: #c7372b;
    font-size: 40px;
}

.form-container {
    width: 45%;
    height: 67vh;
    left: 26%;
    border: 2px solid rgba(245, 210, 122, 0.4);
    border-radius: 20px;
     background: rgba(0, 0, 0, 0.15);
     
     
}

.form-title {
    color: white;
    font-size: 40px;
  

    padding: 20px;

}

.form-subtitle{
  font-size:18px;
    margin-bottom: 0.5rem !important;
}

/* ===== Claim Form Input Group ===== */
.claim-group {
  position: relative;
  margin-bottom: 10px;
}

/* Label */
.claim-group label {
  display: block;
  font-family: 'MiSans-Bold', sans-serif;
  font-size: 12px;
  color: white;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
 
}

.btn1 {
    left: 0%;
    top: 86%;

 
}

.btn1 img{
  width: 90% ;
}



/* Input */
.claim-input {
  width: 83%;
  background: var(--input-bg, #121212);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 16px 52px 16px 20px; /* right space for icon */
  font-family: 'MiSans-Regular', sans-serif;
  font-size: 16px;
  color: #ffffff;
  outline: none;
  transition: border-color 0.3s ease,
              box-shadow 0.3s ease,
              background-color 0.3s ease;
}

/* Focus State */
.claim-input:focus {
  border-color: #D4AF37;
  background: rgba(255, 215, 0, 0.05);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.25);
}

/* Icon */
.claim-icon {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

/* ===== Submit Button ===== */
.claim-submit {
  width: 40%;
  background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%);
  border: none;
  border-radius: 12px;
  padding: 18px;
  font-family: 'MiSans-Bold', sans-serif;
  font-size: 18px;
  color: #370617;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(253, 185, 49, 0.3);
  transition: transform 0.3s ease,
              box-shadow 0.3s ease,
              filter 0.3s ease;
}

/* Hover Effect */
.claim-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(253, 185, 49, 0.4);
  filter: brightness(1.1);
}

/* Shine Effect */
.claim-submit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

.claim-submit:hover::after {
  transform: translateX(100%);
}


.angpao-container{
  height: 0vh;
}


.angpao{
    top: 29%;
}

.angpao img{
    width:16%;
    
}

.success-tit{
      top: 650px;
}

.success-title{
  font-size: 45px;
   color: #f5d27a
}


.countdown,
.form {

    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Countdown 初始 */
.countdown {
    opacity: 1;
    transform: translateY(0);
}

/* Form 初始（在下面 + 隐藏） */
.form {
    opacity: 0;
    transform: translateY(40px);
}

/* 隐藏状态 */
.hidden {
    pointer-events: none;
}

/* Countdown 消失：fade up */
.countdown.exit {
    opacity: 0;
    transform: translateY(-40px);
}

/* Form 出现：fade up */
.form.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.hidden {
  display: none;
}

.fade-out {
  animation: fadeOut 0.5s ease forwards;
}

.fade-in {
  animation: fadeIn 0.8s ease forwards;
}

.anpao-section{
      top: 7%;
}


.angpao-text {
    position: absolute;
    top: 32%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Arial', sans-serif;
    font-size: 17px;
    font-weight: bold;
    color: #b82421;
    text-align: center;
  
    line-height: 1.2;
    padding: 0 10px;
    white-space: normal;
}



@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-15px); } /* 向上漂浮 */
  100% { transform: translateY(0px); }
}


@media(max-width:321px){
      .form-container {
        width: 97%;
        height: 76vh;
        left: 2%;
        top: 91%;
    }

    .success-title {
    font-size: 27px;
}
    .angpao img {
        width: 79% !important; 
    }

    .claim-input {
    width: 97%;

}
    .form-title {
        padding: 10px;
    }

        .btn1 img{
  width: 87% !important ;
}


   
}



@media(max-width:376px){
  .form-title {

    padding: 20px;
}


.claim-group label {


    margin-bottom: -2px;

}
    .form-container {
 
        top: 90%;
        height: 74vh;
    }

.claim-submit{
  margin-top: 1px;
}

.logo img {
    width: 50%;
}

.form {
    top: 5%;
}



}


/*@media(max-width:345px){*/
/*    .reward-amount {*/
/*    font-size: 3rem;*/
/*}*/
/*}*/

@media(max-width:767px){
    .countdown {
    top: 34%;
}
.logo-text {

    font-size: 60px;
}

  .form-title {

    padding: 13px;
}


    .sub-title {
        font-size: 23px;
    }

.form-container {
    width: 96%;
    height: 73vh;
    left: 2%;

}

.form-subtitle {
    font-size: 16px;
   
}
.claim-group {
    position: relative;
    margin-bottom: 17px;
}

.claim-submit {
    width: 66%;
    font-size: 15px;

}

.main-container {
    width: 100%;
    height: 116vh;
}

.angpao img {
    width: 58%;
}



.success-tit {
    top: 367px;
}
.success-title {
    font-size: 37px;

}

    .btn1 img{
  width: 70% ;
}
.logo img {
    width: 50%;
}


.form {
    top: 7%;
}

.angpao-container {
    height: 0vh;
    margin-top: 16%;
}

}


@media(min-width:768px){
.main-container {
        width: 100%;
        height: 100vh;
}
  .form-container {
    width: 96%;
    height: 76vh;
    left: 2%;

}




.angpao-container {
    height: 0vh;
    margin-top: 12%;
}
#bg {
    width: 100%;
    height: 117vh;
}
.angpao-text {

    font-size: 19px;

}
.angpao img {
    width: 43%; 
}

#bg {
    width: 100%;
    height: 117vh;

}

.logo img {
    width: 50%;
}


.form {
    top: 3%;
}
    .success-tit {
        top: 410px;
    }
}
@media (min-width: 992px) {
    #bg {
        height: 100vh;
    }
        .angpao-text {
        font-size: 20px;
    }

    .btn1 img{
  width: 90% ;
}

    .angpao-container {
        height: 0vh;
        margin-top: 3%;
    }
  }

@media(min-width:1020px){
  .main-container {
    width: 100%;
    height: 106vh;
}

.form-container {
    width: 56%;
    height: 75vh;
    left: 22%;
}
    .angpao img {
        width: 24%;
    }
}

@media(min-width:1700px){
    .form-container {
        height: 66vh;
    }

        .angpao img {
        width: 19%;
    }
    .angpao {
               top: 97%;
    }

    .btn1 img{
  width: 22% ;
}

    .logo img {
        width: 21%;
    }
    
        .angpao-container {
        height: 0vh;
        margin-top: 3%;
    }
}

@media(min-width:2000px){
      .angpao img {
        width: 13%;
    }

    .success-tit {
        top: 620px;
    }
}
/* 
@media(max-width:800px){
  .form-container {
    width: 66%;
    height: 74vh;
    left: 16%;
      top: 91%;

}

.form-title {

    padding: 20px;
}
.claim-submit {
    width: 50%;

}
} */


/*   */





/* pop out msg */