@charset "UTF-8";
/*dialog*/
.ui-widget-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,.7);z-index: 99!important;}
.ui-dialog-titlebar,.ui-dialog,.site-dialog{display: none;}
.ui-dialog{z-index: 100 !important;position: absolute;}
.ui-dialog{background-color: #fff;border-radius: 10px;}
.site-dialog-header{padding: 20px 25px;border-bottom: 2px solid #e75280;line-height: 1;text-align: center;}
.site-dialog-header > *{display: inline-block;}
.site-dialog-header h1{font-size: 18px;color: #29353f;}.site-dialog-header h2{font-weight: 300;}
.site-dialog-content,.site-dialog-foot,.ui-dialog-buttonpane{padding: 10px 25px;}
.ui-dialog-buttonset {text-align: center;}
/*幸運轉盤*/
.lucky-wheel-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
    text-align: center;
    padding: 20px;
    height: auto !important;
}
/*行銷活動名稱*/
.lucky-wheel-eligibility{
  font-size: 20px;
  font-weight: bold;
  color: #e75280;
  text-align: center;
  padding: 5px 0px 10px 0px;
}
.lucky-wheel-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/*旋轉區*/
.spin-wheel-section{
  display: inline-block;
  position: relative;
  overflow: hidden;
}
canvas.spin-wheel{
  width: 100%;
  max-width: 350px;
  height: auto;
  display: block;
  border-radius: 50%;
  border: 16px solid #f995b8;
  position: static !important;
  top: auto !important;
  left: auto !important;
  z-index: 1 !important;
}
.wheel-base {
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 55px solid #AA88F7;
  margin-top: -35px;
}
.btn-alert {
  margin-top: 15px;
  padding: 10px 20px;
  background: transparent linear-gradient(110deg, #FAB1A0 0%, #FD79A8 100%) 0% 0% no-repeat padding-box;
  box-shadow: 0px 5px 10px #fd79a880;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 10px;
  text-align: center;
}
.btn-spin {
  font: 1.5em / 0 "Lato", sans-serif;
  user-select: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25%;
  height: 25%;
  margin: -12%;
  background: #AA88F7;
  color: #fff;
  box-shadow: 0 0 0 8px currentColor, 0 0px 15px 5px rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  transition: 0.8s;
}
.btn-spin::after {
  content: "";
  position: absolute;
  top: -17px;
  border: 10px solid transparent;
  border-bottom-color: currentColor;
  border-top: none;
}
/*中獎內容*/
.prizetext{
  font-size: 20px;
  font-weight: bold;
  color: #004aad;
  text-align: center;
  margin-top: 10px;
}
/* 彈出視窗樣式 - 垂直置中 */
.lucky-wheel-modal-congrats {
  display: none;
  /* position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5); */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.congrats-content {
  text-align: center;
  /* box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2); */
  flex-direction: column;
}
.congrats-content h2 {
  font-size: 20px;
  color: #e75280;
  margin: 10px 0px 10px 0px;
  font-weight: 800;
}
.congrats-content button {
  margin-top: 15px;
  padding: 10px 20px;
  background: transparent linear-gradient(110deg, #FAB1A0 0%, #FD79A8 100%) 0% 0% no-repeat padding-box;
  box-shadow: 0px 5px 10px #fd79a880;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 10px;
}
.dot {
  width: 10px;
  height: 10px;
  background-color: #ffd700;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
  animation: blink 1s infinite alternate;
}
  
@keyframes blink {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0.4;
    transform: scale(1.3);
  }
}
.wheel-container {
  position: relative;
  width: 350px;
  height: 350px;
}
/*封面*/
.lucky-wheel-page img{
  width: 100%;
}
.lucky-wheel-outer-ring {
  position: absolute;
  width: 370px;
  height: 370px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}
/*轉盤抽獎資格*/
/*恭喜*/
.lucky-wheel-modal-congrats ~ .ui-dialog-buttonpane .ui-dialog-buttonset button {
  margin-top: 15px;
  padding: 10px 20px;
  background: transparent linear-gradient(110deg, #FAB1A0 0%, #FD79A8 100%) 0% 0% no-repeat padding-box;
  box-shadow: 0px 5px 10px #fd79a880;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 10px;
  text-align: center;
}
/*點擊抽獎-按鈕*/
.ui-dialog-buttonpane .ui-button.btn-start-lucky-wheel{
  margin-top: 15px;
  padding: 10px 20px;
  background: transparent linear-gradient(110deg, #FAB1A0 0%, #FD79A8 100%) 0% 0% no-repeat padding-box;
  box-shadow: 0px 5px 10px #fd79a880;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 10px;
  text-align: center;
}
/*抽卡*/
.site-dialog-content.card-draw-wrapper{
  padding: 0px;
}
.card-draw-container.is-shuffling .card-draw-card{
  pointer-events: none;
  cursor: default;
}
/* 選擇提示 */
.card-draw-pick-hint{
  text-align: center;
  font-size: 16px;
  margin: 5px 0;
  display: none;
}
.card-draw-container{
  position: relative;
  width: fit-content; /* 依卡片實際寬度自動縮放 */
  margin: 0 auto;     /* 水平置中 */
  min-height: 300px;
}
.card-draw-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
/* 卡片本體 */
.card-draw-card{
  width: 160px;
  height: 240px;
  /* position: absolute; */
  cursor: pointer;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  border-radius: 8px;
  pointer-events: auto;
}
/* 卡片前後共用樣式 */
.card-draw-back,
.card-draw-front{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
/* 卡片正面 */
.card-draw-back{
  padding: 20px 15px;
  object-fit: cover;
  z-index: 1;
}
/* 卡片背面 */
.card-draw-front{
  position: relative;
  padding: 10px;
  transform: rotateY(180deg);
  z-index: 2;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.card-draw-front img{
  max-height: 100%;
  object-fit: contain;
  display: block;
  padding: 10px;
}
/* 獎項標籤 */
.card-draw-prize-labels{
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  font-weight: bold;
  z-index: 2;
  pointer-events: none;
}
.card-draw-prize-line{
  border-radius: 6px;
  margin: 2px 0;
  font-size: 14px;
}
.card-draw-prize-line.highlight{
  font-size: 15px;
  padding: 4px 5px;
  background: #FFD700;
  color: #000;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 最多 2 行 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
}
.card-draw-card .card-img{
  z-index: 2;
}
/* 停用卡片本身的光暈與放大（翻面交給 JS 動畫） */
.card-draw-card.glow{
  box-shadow: none;
}
/* 讓光暈貼在獎項圖片上 */
.card-draw-front img.glow-img{
  filter: drop-shadow(0 0 6px gold) drop-shadow(0 0 12px gold);
  border-radius: 8px;
}
.card-draw-start{
  text-align: center;
  margin-top: 20px;
}
/* 開始遊戲按鈕 */
.btn-draw{
  text-align: center;
  margin: 20px 0px;
  padding: 5px 20px;
  background: transparent linear-gradient(110deg, #FAB1A0 0%, #FD79A8 100%) 0% 0% no-repeat padding-box;
  box-shadow: 0 5px 10px #fd79a880;
  color: #fff;
  border-radius: 3px;
  position: relative;
}
/* 中獎展示層 */
.selected-card-display{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  z-index: 10050;
  pointer-events: auto;
}
.selected-card-display .card{
  width: 180px;
  height: 270px;
  transform: rotateY(180deg);
  position: relative;
  z-index: 999;
}
/* 顯示中獎展示 */
.selected-card-display.show{
  display: flex;
}
.selected-card-display .winning-card{
  pointer-events: none;
}
.selected-card-display .btn-claim-prize{
  position: relative;
  z-index: 10060;
}
/* 中獎彈出動畫（保留帶旋轉與透明度漸變的版本） */
@keyframes pop{
  0%{
    transform: scale(0.5) rotateY(180deg);
    opacity: 0;
  }
  100%{
    transform: scale(1) rotateY(180deg);
    opacity: 1;
  }
}
/* 確認按鈕*/
.btn-claim-prize{
  padding: 5px 20px;
  background: transparent linear-gradient(110deg, #FAB1A0 0%, #FD79A8 100%) 0% 0% no-repeat padding-box;
  box-shadow: 0 5px 10px #fd79a880;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, opacity .15s ease;
}

/* ============== 手機版 ============== */
@media screen and (max-width: 640px){
  .ui-dialog{
    width: 90% !important;
  }
  .card-draw-back{
    padding: 20px 15px;
  }
  .card-draw-front img{
    padding: 10px 5px;
}
}