@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

:root {
  -main-white-color:#ffffff;
  -main-blue-color:#1f419b;
  -main-babyblue-color:#00aced;
}

*, html {
  font-family: "Heiti TC", "微軟正黑體", "Microsoft JhengHei", sans-serif;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size:16px;
  color:#333;
  outline: none;
}

body { position: relative;
  background-image: url(../img/common/bg_desktop.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #931e3b;
}
  a { color:#00aced; }

  .desktop_only{
    display: block;
  }
  .mobile_only{
    display: none;
  }
  .debug-border { border-width: 1px;  border-style: solid; border-color: red; }
  .noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
    supported by Chrome and Opera */
  }
  .max-width {
    max-width: 1280px;
    margin: auto;
  }

  /** override class **/
  @media print, screen and (max-width: 63.9375em){
    .reveal { width:80%; min-width: 270px; max-width: 68em; display:block; top:8% !important; left:10%; height:auto !important; min-height:auto !important; }
  }
  @media print, screen and (min-width: 64em){
    .reveal { width:80%; min-width: 600px; max-width: 58em; display: block; }
  }
  input:-moz-read-only { /* For Firefox */
    cursor: text
  }
  input:read-only {
    cursor: text
  }
  html.is-reveal-open, html.is-reveal-open body { width: 100%; }
  .reveal { overflow-x: visible; overflow-y: visible; border:0; }
  .close-button, .close-button.medium { background:#af1532; position: absolute; display: block; width:2rem;height:2rem; line-height:0; top:-1rem; right:-1rem; border-radius: 100%; text-align: center; }
  .close-button span, .close-button.medium span { display:inline-block; width:1rem; height:1rem; color:#fff; background:url(../img/common/close.png) no-repeat center center / contain; }
  .reveal h1 { font-size:1.6rem; font-weight: 700; margin-top:2rem; }
  .reveal h2 { font-size:1.1rem; color:#222; }
  .reveal h2:after { content:""; display:block; width: 5rem; height: 0.2rem; background:#1f419b; clear: both; margin: 1rem 0; background:#00aced; }
  .reveal .form-step { list-style: none; margin: 0; padding: 0; }
  .reveal .form-step li { display: block; width: 1.6rem; height: 1.6rem; font-size:1rem; font-weight: 700; line-height: 1.7rem; text-align: center; background-color:rgba(0,172,237,0.2); color:#fff; border-radius: 100%; margin:0 auto 2.2rem;}
  .reveal .form-step li.active { background-color:#00aced; }
  .FlowupLabels .row { margin-bottom:1.1rem; }
  .reveal .row.space { margin-bottom:2rem;}
  .reveal p, .reveal ol li, .reveal a, .reveal a:visited, .reveal ul li { font-size: 0.8rem; color:#212121; }

  main {
    display: block;
    position: relative;
    margin: 0 auto;
    height: 100vh;
    width: calc(100dvh * 0.570);
    overflow: scroll;
    /* touch-action: none; */
    touch-action: pan-y; 
}
.game main {
    box-shadow: 0 0 25px #4f212d;
}

  .logo {
    width: 30%;
    margin: auto;
    position: relative;
    display: block;
    margin-top: 10%;
}
#result .logo{
  width: 26%;
    margin-top: 5%;
}
@media screen and (max-width:768px){
  
  #result .logo{
    width: 30%;
  }
}
.result main, .home main {
   width: 100dvw;
   height: calc(100dvh);
}
  .frame {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    background-image: url(../img/common/bg_m.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #931e3b;
    pointer-events: none;
    height: 100vh;
  }
   #result.frame,  .home .frame {
    width: calc(100dvh * 0.570);
    margin: auto;
    display: block;
    position: relative;
    background: none;
    pointer-events: all;
    min-width: 300px;
  }
  
@media screen and (max-width:768px){

   #result.frame,  .home .frame {
      width: 100%;
    }
}
  .intro {
    width: 100%;
    background-image: url(../img/common/bg_cup.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    aspect-ratio: 694 / 928;
    margin: 10px auto;
    z-index: 1; 
  }

  .intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/common/bg_cup.png);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1; 
    pointer-events: none;
    filter: drop-shadow(0px 0px 25px rgba(255, 220, 150, 0.9));
    animation: pulseBehindGlow 4s ease-in-out infinite;
  }

  /* Animates the under-glow intensity over time */
  @keyframes pulseBehindGlow {
    0% {
      filter: drop-shadow(0px 0px 5px rgba(255, 220, 150, 0.6));
    }
    50% {
      filter: drop-shadow(0px 0px 10px rgba(255, 220, 150, 1)); /* Maximum edge glow spread */
    }
    100% {
      filter: drop-shadow(0px 0px 5px rgba(255, 220, 150, 0.6));
    }
  }
.intro .content{
    width: 90%;
    margin: auto;
    padding-top: 9%;
}
.intro .title {
    width: 66%;
    margin: auto;
    display: block;
    margin-top: 27px;
}
.intro .products {
    width: 53%;
    margin: auto;
    display: block;
    margin-top: 30px;
    margin-bottom: 5px;
    padding-right: 18px;
}
.intro .btnstart {
  display: block;
    width: 55%;
    margin: auto;
    pointer-events: all;
    cursor: pointer;
  animation: pauseAndPop 4s ease-in-out infinite;
}
@keyframes pauseAndPop {
  /* 0% to 83.33% represents the 5-second static pause phase */
  0%, 30% {
    transform: scale(1);
  }
  40% {
    transform: scale(1); /* Scales up rapidly */
  }
  55% {
    transform: scale(1.15); /* Scales up rapidly */
  }
  70% {
    transform: scale(1); /* Scales up rapidly */
  }
  85% {
    transform: scale(1.15); /* Scales up rapidly */
  }
  100% {
    transform: scale(1); /* Returns smoothly to original size */
  }
}
.intro .btnhowtoplay {
    width: 38%;
    margin: auto;
    margin-top: 4px;
    padding-bottom: 10px;
    pointer-events: all;
    cursor: pointer;
}
.intro .icecream{
  position: absolute;
  width: 9%;
  right: 13%;
  bottom: 15%;
  transform-origin: center center; 
  animation: floatAndRotate 5s ease-in-out infinite; 
}

@keyframes floatAndRotate {
  0% {
    /* Start position: stationary and untilted */
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    /* Highest point: tilts slightly to the left */
    transform: translate(0, -150px) rotate(-100deg);
  }
  100% {
    /* Smoothly returns to the starting position */
    transform: translate(0, 0) rotate(0deg);
  }
}

#popupOverlay{
    pointer-events: all;
    cursor: pointer;
}
.overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Dim effect */
  z-index: 9999; /* Sits on top of everything */
}

/* Centered popup box */
.popup-content {
  position: absolute;
    top: 22%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1%;
  border-radius: 8px;
  width: 100%;
  max-width: calc(100dvh * 0.570);
    pointer-events: all;
    cursor: pointer;
}
.popup_bg {
    position: relative;
}
.popup_detail {
    position: absolute;
    width: 80%;
    top: 70%;
    left: 0;
    right: 0;
    margin: auto;
}

#popupOverlay_2x img {
    width: 100%;
    margin: auto;
    display: block;
    margin-top: -20%;
   animation: 
        scaleIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
        doublePop 2s ease-in-out infinite 0.4s;
}

@media screen and (max-width: 768px) {
    #popupOverlay_2x img {
        width: 90%;
    }
}

/* 1. INITIAL APPEARANCE: Bouncy scale-up from nothing */
@keyframes scaleIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes doublePop {
    0% {
        transform: scale(1);       /* Base size */
    }
    10% {
        transform: scale(1.06);    /* First Pop (up 6%) */
    }
    20% {
        transform: scale(1);       /* Drop back down */
    }
    30% {
        transform: scale(1.06);    /* Second Pop (up 6%) */
    }
    40% {
        transform: scale(1);       /* Drop back down to rest */
    }
    100% {
        transform: scale(1);       /* Remains resting until the 2-second mark hits */
    }
}
#popupOverlay_2x.overlay{
    background-color: rgba(119, 35, 69, 0.65);
    backdrop-filter: blur(4px);
}
#popupOverlay_2x .popup-content{
        position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.closePopup{
  width: 100%;
  height: 100%;
}
  
body.game {
  margin: 0;
  padding: 0;
  background-color: #520823;
  background-image: url(../img/common/bg_desktop.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #931e3b;
  color: #fff;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: flex-start;

      margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important; /* Prevents scrollbars from clipping the canvas bottom */
    background-color: #000000;  /* Pure black hides the pillarbox padding clean */
    display: flex;
    justify-content: center;
    align-items: center;
}

#game-container {
  background-image: linear-gradient(0deg, #fdd186, #c1a369, #eec392);
  /* display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start; */

  aspect-ratio: 1000 / 1777;

    /* 2. Make it responsive: expand to fill the screen but never overflow */
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;

    /* 3. Keep it dead-centered inside its parent wrapper */
    margin: auto;
    
    /* Layout containment */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

}
#game-container canvas{
  
   /* width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw;
    max-height: 100vh;
    aspect-ratio: 1000 / 1777 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative; */
}
.score-frame-div{
  text-align: center;
  padding-top: 3%;
}
.score-frame {
    /* This scales down all child EM measurements by 20% */
    font-size: 0.8em; 
    
    display: inline-flex;  
    flex-direction: column;
    align-items: center;   
    gap: 0.5em; /* Scaled spacing */

    text-decoration: none !important;
    text-decoration-style: solid !important; /* Forces the browser to discard "dotted" */

    border: none !important;
    outline: none !important;
}
.score-frame,
.score-frame *,
.score-group,
.score-group * {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: solid !important;
    
    outline: 0 none transparent !important;
    outline-style: none !important;
    
    border: 0 none transparent !important;
    box-shadow: none !important;
}
.score-group {
    display: flex;
    align-items: center; 
    gap: 0.5em;
    white-space: nowrap;   
    position: relative;
    text-decoration: none !important;
}

.score-underline {
    display: block;
    width: 100%;          
    height: auto;         
}
/* Scale the icon width using em units */
.score-group img {   
   width: 13.5em;
    height: auto;
}

/* The text will automatically inherit the 0.8em scale */
.score-text {
    font-size: 2rem; /* Use rem if you want to keep the base text size stable, or em to compound shrink */
}
.score-group::after{
  content: "";
    display: block;
    width: 100%;
    margin: 0 auto;
    background-image: url(../img/common/result_sep.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom: 10px;
    position: absolute;
    bottom: 0;
}
.rank-frame {
  /* --- Frame & Background Image --- */
  background-image: url('../img/common/rank.png'); /* Replace with your frame image */
  background-size: contain; /* CRITICAL: Ensures the whole frame is always visible */
  background-repeat: no-repeat;
  background-position: center;

  /* --- Sizing & Responsiveness --- */
  width: 85%;
  /* max-width: 400px; */
  aspect-ratio: 901 / 485;
    margin: 0 auto;

  /* --- FLEXBOX CENTERING LOGIC --- */
  display: flex;
  justify-content: center; /* Horizontally centers the content */
  align-items: center;     /* Vertically centers the content */
}

.score-text {
  /* --- Text Styling --- */
  font-family: "Outfit", sans-serif;
  font-weight: bold;
  text-align: center;
  font-size: 118px;
    background: linear-gradient(96deg, #8d6527, #d7c189, #f6f3b6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.score-frame .score-text {
    font-size: 42px;
    padding-left: 10px;
    letter-spacing: 4px;
}

.btn_register {
    display: block;
    width: 51%;
    margin: auto;
    transition: transform 0.2s ease-in-out;
}
.btn_register:hover {
     transform: scale(1.05);
}

.score-frame,
.score-group,
.score-frame * {
    /* FIX 1: Turn off the browser's default interactive outline ring */
    outline: none !important;
    -webkit-tap-highlight-color: transparent; /* Prevents tap flash on mobile Safari/Chrome */
    
    /* FIX 2: Prevent accidental text-selection highlights when clicking or tapping */
    user-select: none;
    -webkit-user-select: none;
}

@media screen and (max-width: 768px) {
   .score-group img {
    width: 6.5em;
    height: auto;
  }
  .score-frame .score-text {
        font-size: 1.3em;
        padding-left: 0%;
  }
}

#result .coupon {
    margin: 7% auto 5%;
    display: block;
    width: 95%;
    position: relative;
}

#result .coupon .couponbtn, #result .coupon .learnmorebtn {
    width: 70%;
    display: block;
    margin: auto;
    position: absolute;
    top: 62%;
    left: 0;
    right: 0;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}
#result .coupon .learnmorebtn {
    top: 78%;
}
#result .coupon .couponbtn:hover, #result .coupon .learnmorebtn:hover {
     transform: scale(1.05);
}
#result .sep{
   width: 83%;
  margin: 0 auto;
  background-image: url(../img/common/result_sep.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: 50px;
}

.learnmorebtn {
    width: 64%;
    margin: auto;
    cursor: pointer;
     transition: transform 0.2s ease-in-out; 
}
.learnmorebtn:hover {
    transform: scale(1.05);
}
.video-container {
    position: absolute;
    top: 42.6%;
    left: 0;
    right: 0;
    width: 73%;
    margin: auto;
    /* height: auto; */
    z-index: 2;
    padding: 15px;
    background-image: url(../img/common/video_border.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* or "contain" depending on video format */
  border-radius: 4px;
}

@media screen and (max-width:1024px) {
  .video-container {
    width: 70%;
    padding:16px 16px 13px;
  }
}
@media screen and (max-width:430px) {
  .video-container {
    width: 70%;
    padding:12px 12px 8px;
  }
}
#register.pop-animate {
    animation: popOnce 1.5s ease-in-out forwards;
}
@keyframes popOnce {
    0% {
        transform: scale(1); /* Starts at its normal size */
    }
    50% {
        transform: scale(1.05); /* Pops larger temporarily */
    }
    100% {
        transform: scale(1); /* Settles back down to stay permanently */
    }
}
#result .form_container {
    background-image: url(../img/common/form_frame.png);
    width: 85%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position-x: center;
    position: relative;
    margin: 8% auto 3%;
}
#result .form_title {
    width: 48%;
    position: absolute;
    margin: -20px auto 0;
    left: 0;
    right: 0;
}
#result .form_img {
    width: 95%;
    padding-top: 14%;
    margin: auto;
    display: block;
}
#result .form_prompt {
    width: 82%;
    display: block;
    margin: auto;
    margin: 3% auto 7%;
}
#result .form_tnc {
    width: 50%;
    display: block;
    margin: auto;
    /* margin: 10px auto 30px; */ 
    padding: 0 0 9% 0;
}


#result form{
  width: 90%;
    padding-right: 3%;
    margin: auto;
    padding-bottom: 20px;
}
#result .form-row {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    gap: 10px;
}

#result .form-row img {
    width: 30%;
    height: auto;
    margin-top: -1em;
}
#result .form-row input {
    flex: 1; 
    padding: 1.7em;
    border: 2px solid #d7c189;
    border-radius: 30px;
    font-size: 1rem;
    height: 1em;
    color: #d7c189;
    box-sizing: border-box;
}
@media screen and (max-width: 1024px) {
  #result .form-row input {
    height: .9em;
}
}
@media screen and (max-width: 768px) {
  #result .form-row input {
    padding: 1.8em;
    height: .6em;
}
}
@media screen and (max-width: 480px) {
  #result .form-row input {
    padding: 1em;
    height: .6em;
}
}

#result .form-row input:focus {
    outline: none;
    background-color: transparent;
    border-color: #4facfe;
}

#result .btn_submit{
    width: 80%;
    margin: auto;
    display: block;
     transition: transform 0.2s ease-in-out; 
     pointer-events: all;
     cursor: pointer;
}
#result .btn_submit:hover{
   transform: scale(1.05);
}
#result div#thank-you-container .form_img {
    padding-top: 0;
}

[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], textarea {
    background: none;
    background-color: transparent;
}

.action-buttons-container {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 30px;
    margin-bottom: 50px;
}

.action-button {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.action-button:hover {
    transform: scale(1.05); 
}

.action-button img {
    display: block;
    width: 100%;
    height: auto;
}

.tnc-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px 0;
}

.tnc-row label {
    display: flex;
    align-items: center;
    gap: 12px; /* Space between the custom checkbox icon and the text image */
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

/* Hide the ugly native browser checkbox completely */
.tnc-row input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Custom Sprite Sheet Checkbox Styling */
.custom-checkbox-icon {
    display: inline-block;
    flex-shrink: 0;
    
    /* SCALE ADJUSTMENT: Change this base width to make the checkbox bigger or smaller */
    --display-width: 76px; 
    
    /* Calculate height keeping the original aspect ratio (141w to 130h) */
    width: var(--display-width);
    height: calc(var(--display-width) * (130 / 141));
    
    /* Link your spritesheet file path here */
    background-image: url('../img/common/tnc_icon.png'); 
    background-repeat: no-repeat;
    
    /* Scale the background image size relative to your display width */
    background-size: var(--display-width) calc(var(--display-width) * (260 / 141));
    
    /* Frame 1 (Top): Unticked state */
    background-position: 0 0; 
    
    transition: background-position 0.1s steps(1); /* Sharp sprite transition */
}
[type='checkbox'] + label, [type='radio'] + label {
    margin-right:0;
}

@media (max-width: 768px) {
  .custom-checkbox-icon {
    --display-width: 2.8rem;
  }
  
}
@keyframes flashError {
    0%, 100% {
        filter: drop-shadow(0 0 0 transparent);
    }
    50% {
        /* Flashes a bright reddish-orange highlight ring around your custom sprite box */
        filter: drop-shadow(0 0 8px #ff4d4d); 
    }
}
#result-form p{
  color: #ffe6e6;
    font-size: 1rem;
}

#result-form .checkbox-error {
   filter: drop-shadow(0 0 8px #ff4d4d); 
    /* animation: flashError 0.5s ease-in-out; */
}
#result-form .checkbox-error p{
   color: #ffbe49;
}
/* Frame 2 (Bottom): Shift background position up by 100% when input is checked */
.tnc-row input[type="checkbox"]:checked + label .custom-checkbox-icon {
    background-position: 0 100%;
}

@media (max-width: 768px) {
  .score-text {
    font-size: 58px;
  }
  #result-form p {
    font-size: 0.7rem;
  }
}
.comingsoon p {
      
        padding-top: 10%;
        line-height: 1.8rem;
        color: #fff;
        margin: auto;
    }
  @media screen and (max-width: 1000px) {
    

    .comingsoon p .small_word{
      color: #fff;
      line-height: 1.3rem;
      display: block;
      padding-top: 4%;
    }

  }

  @media screen and (max-width: 768px) {
    
    main {
      width: 100dvw;
      /* height: calc(100dvh - 38px); */
    }
    .intro_title {
      width: 66%;
      margin: 8% auto 2%
    }
  }
  @media screen and (max-width: 320px){
    
    .intro_title {
      width: 60%;
      margin: 6% auto 3%;
    }
  }