/* ============================================================
   好友邀請活動 · 開箱 H5 · 粉色夢幻主題
   ============================================================ */
:root{
  --pink:        #F49AB5;
  --pink-deep:   #E86B92;
  --pink-soft:   #FBD3DF;
  --pink-pale:   #FFF0F4;
  --text-rose:   #C9577A;
  --text-brown:  #8A5A3B;
  --white:       #FFFFFF;
  --shadow:      0 16px 36px rgba(220,130,160,.35);
  --tier-color:  #C9577A;   /* 由 JS 依檔位改寫 */
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  font-family:"Noto Sans TC","Baloo 2",system-ui,sans-serif;
  color:var(--text-rose);
  overflow:hidden; position:fixed; inset:0; user-select:none;
}

/* 背景 */
.bg{
  position:fixed; inset:0; z-index:-1;
  background:url("assets/bg-mobile.webp") center/cover no-repeat;
}
@media (min-aspect-ratio:1/1){
  .bg{ background-image:url("assets/bg-pc.webp"); }
}

/* 主舞台：上中下三段 */
.stage{
  position:fixed; inset:0;
  display:flex; flex-direction:column; align-items:center;
  justify-content:space-between;
  padding:max(28px,5vh) 20px max(24px,4vh);
}

/* ---- 標題 ---- */
.head{ display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; }
.title-big{
  width:min(82vw,420px); height:auto;
  filter:drop-shadow(0 6px 10px rgba(220,120,150,.3));
  animation:titlePop .6s cubic-bezier(.2,1.5,.4,1) both;
}
.title-small{
  width:min(64vw,330px); height:auto;
  animation:titlePop .7s cubic-bezier(.2,1.5,.4,1) .1s both;
}
@keyframes titlePop{ 0%{opacity:0; transform:scale(.6) translateY(-10px);} 100%{opacity:1; transform:scale(1) translateY(0);} }

/* ---- 寶箱區 ---- */
.chest-area{
  position:relative; flex:1;
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:0;
}
.glow{
  position:absolute; left:50%; top:48%; transform:translate(-50%,-50%);
  width:min(90vw,460px); aspect-ratio:1; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.85) 0%, rgba(255,245,250,.45) 30%, transparent 60%);
  animation:glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse{ 0%,100%{opacity:.6; transform:translate(-50%,-50%) scale(.95);} 50%{opacity:1; transform:translate(-50%,-50%) scale(1.07);} }

/* 箱子底部橢圓光台陰影 */
.chest-shadow{
  position:absolute; left:50%; top:66%; transform:translate(-50%,-50%);
  width:min(42vw,200px); height:min(11vw,52px); z-index:0; pointer-events:none;
  background:radial-gradient(ellipse, rgba(244,154,181,.5) 0%, rgba(244,154,181,.2) 45%, transparent 70%);
  animation:shadowPulse 3s ease-in-out infinite;
}
@keyframes shadowPulse{ 0%,100%{opacity:.7; transform:translate(-50%,-50%) scale(1);} 50%{opacity:.5; transform:translate(-50%,-50%) scale(.9);} }

.chest-wrap{
  position:relative; z-index:1;
  cursor:pointer;
  animation:floatChest 3s ease-in-out infinite;
  will-change:transform;
}
.chest-wrap.busy{ cursor:default; }
@keyframes floatChest{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }

.chest{
  width:min(60vw,290px); height:auto;
  filter:drop-shadow(0 12px 14px rgba(180,120,140,.3));
  pointer-events:none;
}
/* 待點擊輕脈動 */
.chest-wrap.idle .chest{ animation:chestPulse 1.8s ease-in-out infinite; }
@keyframes chestPulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.035);} }
/* 開箱前抖動 */
.chest-wrap.shake{ animation:shake .5s ease-in-out; }
@keyframes shake{
  0%,100%{transform:translateX(0) rotate(0);}
  15%{transform:translateX(-6px) rotate(-2deg);}
  30%{transform:translateX(6px) rotate(2deg);}
  45%{transform:translateX(-5px) rotate(-1.5deg);}
  60%{transform:translateX(5px) rotate(1.5deg);}
  75%{transform:translateX(-3px) rotate(-1deg);}
}
/* 開箱瞬間箱體彈一下 */
.chest-wrap.burst .chest{ animation:chestPop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes chestPop{ 0%{transform:scale(.9);} 55%{transform:scale(1.12);} 100%{transform:scale(1);} }

/* 白光閃 */
.flash{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:120%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,240,247,.5) 35%, transparent 65%);
  z-index:2; pointer-events:none; opacity:0;
}
.flash.go{ animation:flash .5s ease-out; }
@keyframes flash{ 0%{opacity:0; transform:translate(-50%,-50%) scale(.4);} 35%{opacity:1;} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.3);} }

/* 迸發星星 */
.sparks{ position:absolute; left:50%; top:50%; width:0; height:0; z-index:3; pointer-events:none; }
.spark{
  position:absolute; font-size:22px; color:#FFE27A;
  text-shadow:0 0 8px rgba(255,210,90,.9);
  opacity:0;
}
.spark.go{ animation:sparkFly .7s ease-out forwards; }
@keyframes sparkFly{
  0%{opacity:0; transform:translate(0,0) scale(.3);}
  30%{opacity:1;}
  100%{opacity:0; transform:translate(var(--dx),var(--dy)) scale(1.1);}
}

/* ---- 檔位名 + 按鈕 ---- */
.foot{ display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; }
.tier-name{
  display:flex; align-items:center; gap:10px;
  font-size:clamp(22px,6.4vw,28px); font-weight:900;
  color:var(--tier-color);
  text-shadow:0 2px 0 rgba(255,255,255,.7);
  min-height:34px;
  transition:color .3s ease;
}
.tier-deco{ color:#FFCF5A; font-size:.8em; }

.open-btn{
  position:relative; border:none; background:none; cursor:pointer;
  width:min(72vw,300px); padding:0;
  filter:drop-shadow(0 8px 14px rgba(220,120,150,.3));
}
.open-btn .btn-bg{ width:100%; height:auto; display:block; }
.btn-bg-normal{ position:absolute; inset:0; opacity:0; transition:opacity .12s ease; }
.open-btn:active .btn-bg-normal{ opacity:1; }
.btn-text{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(18px,5.2vw,22px); font-weight:900; color:#fff;
  text-shadow:0 2px 4px rgba(190,70,105,.7), 0 0 1px rgba(190,70,105,.9);
  letter-spacing:2px;
  pointer-events:none;
}
.open-btn.bounce{ animation:btnBounce 1.6s ease-in-out infinite; }
@keyframes btnBounce{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-4px);} }
.open-btn[disabled]{ opacity:.5; cursor:default; animation:none; }

/* 頁腳標語 */
.page-footer{
  margin-top:4px;
  font-size:clamp(12px,3.4vw,14px); font-weight:700;
  color:var(--text-rose); opacity:.75;
  letter-spacing:3px;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}

/* ============================================================
   彈窗
   ============================================================ */
.modal-mask{
  position:fixed; inset:0; z-index:50;
  display:none; align-items:center; justify-content:center; padding:22px;
  background:rgba(180,110,140,.4); backdrop-filter:blur(3px);
}
.modal-mask.show{ display:flex; animation:maskIn .25s ease; }
@keyframes maskIn{ from{opacity:0} to{opacity:1} }

.modal-pop{
  position:relative; width:min(90vw,400px);
  animation:popIn .45s cubic-bezier(.18,1.45,.4,1);
}
/* 獎勵彈窗從寶箱位置蹦出來的感覺 */
.prize-pop{ animation:popBurst .5s cubic-bezier(.2,1.5,.35,1); }
@keyframes popIn{ 0%{opacity:0; transform:scale(.7);} 100%{opacity:1; transform:scale(1);} }
@keyframes popBurst{ 0%{opacity:0; transform:scale(.35) translateY(40px);} 60%{opacity:1;} 100%{opacity:1; transform:scale(1) translateY(0);} }

.pop-bg{ width:100%; height:auto; display:block; pointer-events:none; }
.pop-inner{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:13% 13% 11%;
  text-align:center;
}

.pop-title{ font-size:clamp(21px,6vw,25px); font-weight:900; color:var(--text-rose); }
.pop-sub{ margin-top:8px; font-size:clamp(12px,3.4vw,14px); color:#C98AA0; line-height:1.5; }

.code-input{
  width:100%; margin-top:16px;
  font-family:"Baloo 2",inherit; font-size:19px; font-weight:700; letter-spacing:2px;
  text-align:center; text-transform:uppercase; color:var(--text-brown);
  padding:13px 14px; border:2.5px solid #F3B9CC; border-radius:14px;
  background:rgba(255,255,255,.85); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.code-input::placeholder{ color:#D9A8B8; font-weight:600; letter-spacing:1px; font-size:15px; }
.code-input:focus{ border-color:var(--pink-deep); box-shadow:0 0 0 4px rgba(232,107,146,.16); }
.code-error{ min-height:18px; margin-top:8px; font-size:13px; font-weight:700; color:var(--pink-deep); }

/* 藥丸按鈕（彈窗內用 CSS 畫，呼應主按鈕風格）*/
.pill-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; margin-top:10px; border:none; border-radius:999px;
  font-family:inherit; font-weight:900; font-size:clamp(15px,4.2vw,17px); color:#fff;
  padding:13px 18px; cursor:pointer;
  background:linear-gradient(180deg,#F799B4,var(--pink-deep));
  box-shadow:0 8px 16px rgba(225,100,140,.4), inset 0 2px 0 rgba(255,255,255,.4);
  transition:transform .12s, filter .12s;
  text-shadow:0 1px 2px rgba(190,80,110,.4);
}
.pill-btn:hover{ filter:brightness(1.05); }
.pill-btn:active{ transform:scale(.96); }
.pill-spinner{ width:17px; height:17px; border-radius:50%; border:3px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite; }
@keyframes spin{ to{transform:rotate(360deg);} }
.pill-btn.loading .pill-label{ opacity:.6; }

.text-btn{
  margin-top:8px; border:none; background:none; cursor:pointer;
  color:var(--text-rose); font-family:inherit; font-weight:700; font-size:14px; padding:6px;
}
.text-btn:hover{ filter:brightness(.9); }

.pop-close{
  position:absolute; top:8%; right:9%; z-index:5;
  width:32px; height:32px; border:none; border-radius:50%; cursor:pointer;
  font-size:20px; line-height:1; color:var(--pink-deep);
  background:rgba(255,255,255,.85);
  box-shadow:0 2px 6px rgba(200,120,150,.3);
}
.pop-close:hover{ background:#fff; }

/* 獎勵彈窗 */
.coin-stage{ position:relative; width:108px; height:108px; margin:0 auto 6px; }
.coin{
  width:100px; height:100px; margin:4px; object-fit:contain;
  filter:drop-shadow(0 6px 12px rgba(230,140,110,.4));
  animation:coinFloat 2.6s ease-in-out infinite, coinSpin 5s ease-in-out infinite;
}
@keyframes coinFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
@keyframes coinSpin{ 0%,100%{transform:rotateY(0);} 50%{transform:rotateY(24deg);} }
.sp{ position:absolute; color:#FFE27A; font-size:16px; text-shadow:0 0 6px rgba(255,210,90,.9); animation:twinkle 1.8s ease-in-out infinite; }
.sp1{ top:2px; left:6px; font-size:20px; }
.sp2{ top:14px; right:2px; animation-delay:.5s; }
.sp3{ bottom:2px; left:24px; font-size:13px; animation-delay:1s; }
@keyframes twinkle{ 0%,100%{opacity:.25; transform:scale(.7);} 50%{opacity:1; transform:scale(1.1);} }

.prize-title{ font-size:clamp(22px,6.4vw,27px); font-weight:900; color:var(--pink-deep); text-shadow:0 2px 0 rgba(255,255,255,.7); }
.prize-reopen{ margin-top:8px; font-size:13px; font-weight:700; color:var(--text-rose); background:rgba(255,255,255,.6); padding:6px 12px; border-radius:10px; }
.prize-reopen[hidden]{ display:none; }
.prize-body{ margin:10px 0 16px; font-size:clamp(14px,4vw,16px); font-weight:700; line-height:1.65; color:var(--text-brown); }
.prize-body .tier-name-inline{ color:var(--pink-deep); font-weight:900; }
.prize-body .prize-name{ color:#E8452B; font-weight:900; }
.prize-hint{ display:block; margin-top:8px; font-size:12px; font-weight:600; color:#B98DA0; }
.pill-save{ margin-top:4px; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; animation-iteration-count:1 !important; }
}

/* ============================================================
   機率公示：按鈕 + 彈窗
   ============================================================ */

/* 主畫面右上角浮動按鈕 */
.info-fab{
  position:fixed; top:max(14px,2.4vh); right:max(14px,3vw); z-index:40;
  width:clamp(42px,11vw,52px); height:clamp(42px,11vw,52px);
  padding:0; border:none; background:none; cursor:pointer;
  filter:drop-shadow(0 4px 8px rgba(200,110,145,.35));
  transition:transform .15s ease;
  animation:fabBob 2.8s ease-in-out infinite;
}
.info-fab img{ width:100%; height:100%; display:block; }
.info-fab:hover{ transform:scale(1.1); }
.info-fab:active{ transform:scale(.94); }
@keyframes fabBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }

/* 輸入碼彈窗標題旁的小按鈕 */
.pop-title{ display:inline-flex; align-items:center; gap:8px; }
.info-inline{
  width:26px; height:26px; padding:0; border:none; background:none; cursor:pointer;
  filter:drop-shadow(0 2px 4px rgba(200,110,145,.3));
  transition:transform .15s ease;
  flex-shrink:0;
}
.info-inline img{ width:100%; height:100%; display:block; }
.info-inline:hover{ transform:scale(1.15); }
.info-inline:active{ transform:scale(.92); }

/* ---- 公示彈窗 ---- */
.odds-pop{
  position:relative;
  width:min(92vw,440px);
  max-height:min(84vh,720px);
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#FFF5F8,#FDE7EF);
  border:3px solid #fff;
  border-radius:26px;
  box-shadow:0 20px 44px rgba(215,120,155,.4);
  overflow:hidden;
  animation:popIn .42s cubic-bezier(.18,1.45,.4,1);
}
.odds-head{
  position:relative; flex-shrink:0;
  padding:16px 18px 13px;
  background:linear-gradient(180deg,#F799B4,var(--pink-deep));
  box-shadow:0 3px 10px rgba(210,100,140,.3);
}
.odds-title{
  font-size:clamp(19px,5.2vw,22px); font-weight:900; color:#fff;
  text-align:center; letter-spacing:3px;
  text-shadow:0 2px 4px rgba(180,70,110,.5);
}
.odds-close{
  position:absolute; top:50%; right:14px; transform:translateY(-50%);
  width:30px; height:30px; border:none; border-radius:50%; cursor:pointer;
  font-size:19px; line-height:1; font-weight:700;
  color:var(--pink-deep); background:rgba(255,255,255,.9);
  box-shadow:0 2px 5px rgba(180,80,120,.3);
  transition:transform .15s ease;
}
.odds-close:hover{ transform:translateY(-50%) scale(1.12); }

.odds-body{
  flex:1; overflow-y:auto;
  padding:14px 16px 6px;
  -webkit-overflow-scrolling:touch;
}
.odds-body::-webkit-scrollbar{ width:6px; }
.odds-body::-webkit-scrollbar-thumb{ background:#F3B9CC; border-radius:3px; }

/* 每個檔位一張卡 */
.odds-card{
  margin-bottom:14px;
  background:rgba(255,255,255,.7);
  border:2px solid #FBD3DF;
  border-radius:16px;
  overflow:hidden;
}
.odds-card-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:9px 13px;
  background:var(--tc, #F7C6D6);
}
.odds-tier{
  font-size:clamp(15px,4.2vw,17px); font-weight:900; color:#fff;
  text-shadow:0 1px 3px rgba(150,80,60,.45);
  letter-spacing:1px;
}
.odds-invite{
  font-size:12px; font-weight:700; color:#fff;
  background:rgba(255,255,255,.28);
  padding:3px 9px; border-radius:999px;
  white-space:nowrap;
}
.odds-rows{ padding:4px 0; }
.odds-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 13px;
  font-size:clamp(13px,3.7vw,15px);
  border-bottom:1px dashed rgba(244,154,181,.3);
}
.odds-row:last-child{ border-bottom:none; }
.odds-prize{ font-weight:700; color:var(--text-brown); }
.odds-pct{ font-weight:900; color:var(--text-rose); font-family:"Baloo 2",inherit; }

/* 大獎高亮 */
.odds-row.rare{
  background:linear-gradient(90deg, rgba(255,222,120,.28), rgba(255,240,190,.12));
}
.odds-row.rare .odds-prize{
  color:#C9761B; font-weight:900;
}
.odds-row.rare .odds-prize::before{
  content:"★ "; color:#F5B300;
}
.odds-row.rare .odds-pct{ color:#E0821A; }

/* 超級大獎（最高檔）更亮 */
.odds-row.legend{
  background:linear-gradient(90deg, rgba(255,180,205,.35), rgba(255,225,150,.25));
}
.odds-row.legend .odds-prize{
  color:#D93A6B; font-weight:900;
}
.odds-row.legend .odds-prize::before{
  content:"👑 ";
}
.odds-row.legend .odds-pct{ color:#D93A6B; }

.odds-foot{
  flex-shrink:0;
  padding:11px 16px 14px;
  text-align:center;
  font-size:clamp(12px,3.3vw,13px); font-weight:700;
  color:var(--text-rose);
  background:rgba(255,255,255,.5);
  border-top:1px solid rgba(244,154,181,.25);
}