/* 20260910 網頁寶箱頁樣式（獨立檔，不動 style.css）。
   與 style.css 相同的兩段式寫法：第一行字面值給 IE11，第二行變數給現代瀏覽器。
   禮物盒圖：/static/img/gift_{normal,over,pressed,disabled,complete}.png（BBO2 TAB_AWARDS_GIFT_* 五狀態，210×289）。
   用 background-image 做狀態切換，滑鼠移上／按下／選中／停用／完成不需要 JS，IE11 也能跑。

   20260910b 改版：網頁只顯示「一個」寶箱（不論表裡啟用幾個），並加上開箱成功特效。
   特效全部做成類別，不用內聯 style —— 站台 CSP 是 style-src 'self'，內聯樣式會被擋。 */

.navchest,.navsign{
  margin-left:10px; padding:4px 10px; border-radius:3px; font-size:13px; font-weight:700; letter-spacing:.1em;
  white-space:nowrap;
}
.navchest{
  color:#F2C462; color:var(--gold);
  border:1px solid #B98523; border:1px solid var(--gold-deep);
  background:rgba(242,196,98,.08);
}
.navchest:hover{background:rgba(242,196,98,.18);}
.navsign{
  color:#B08C90; color:var(--muted);
  border:1px solid #5C2029; border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.navsign:hover{color:#F4E6E3; color:var(--text); background:rgba(255,255,255,.08);}

.chestpanel .chest-rule{font-size:12px; letter-spacing:.04em; margin-left:auto;}

/* ---- 寶箱＋獎品清單：桌面並排，小視窗改上下 ---- */
.chestmain{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.chestmain > * {margin:0 14px;}
.prizebox{flex:0 1 340px; min-width:250px;}
.prizebox .rewards{margin-bottom:8px;}
.prizebox .act-note{margin-top:0;}
/* 20260910c 獎品清單只是「可能開出什麼」的說明，不是可點的連結。
   .rw-name 是從簽到板沿用來的樣式（那邊點下去會看道具說明），這裡要把底線與手指游標拿掉，
   不然玩家會一直去點它、以為壞掉。 */
.prizebox .rw-name{text-decoration:none; cursor:default;}

/* ---- 20260910e 就地開箱：特效直接長在寶箱上，不再跳到結果頁 ----
   .giftsolo 要當定位基準，光芒／光暈／火花才會以寶箱為中心散開。 */
.giftsolo{position:relative;}
.giftsolo.burst .gift.solo{position:relative; z-index:1;}
.openstate{text-align:center; margin-top:4px;}
.openstate h3{margin:0 0 4px; font-size:22px; font-weight:900;}
.openstate .sub{font-size:14px; margin:0 0 14px; color:#B08C90; color:var(--muted);}

/* ---- 就地登入：點完寶箱後在同一頁輸入帳密 ---- */
.chestlogin{max-width:340px; margin:6px auto 0;}
.chestlogin .act-note{text-align:center;}

/* ---- 單一寶箱：置中放大 ---- */
.giftsolo{display:flex; justify-content:center; padding:14px 0 6px;}
.giftform{margin:8px; display:block;}

.gift{
  display:block; position:relative; width:150px; height:206px; padding:0; border:0; cursor:pointer;
  background:transparent url(/static/img/gift_normal.png) no-repeat center center;
  background-size:contain;
  transition:transform .12s ease;
}
button.gift:hover,button.gift:focus{background-image:url(/static/img/gift_over.png); transform:translateY(-4px); outline:0;}
button.gift:active{background-image:url(/static/img/gift_pressed.png); transform:translateY(0) scale(.97);}
.gift.picked{background-image:url(/static/img/gift_pressed.png); transform:translateY(-4px);}
.gift.off{background-image:url(/static/img/gift_disabled.png); opacity:.55; cursor:default;}
.gift.done{background-image:url(/static/img/gift_complete.png); cursor:default;}

/* 只有一個箱子時放大一點，成為畫面主體；並持續輕微呼吸吸引點擊 */
.gift.solo{width:230px; height:317px;}
button.gift.solo{animation:chestbreath 2.4s ease-in-out infinite alternate;}
@keyframes chestbreath{
  from{transform:translateY(0) scale(1);}
  to{transform:translateY(-6px) scale(1.03);}
}

.giftno{
  position:absolute; left:0; right:0; bottom:8px; text-align:center;
  font-family:"Segoe UI","Microsoft JhengHei",sans-serif; font-family:var(--en);
  font-size:26px; font-weight:700; letter-spacing:.06em;
  color:#FFF3F1; text-shadow:0 0 6px rgba(0,0,0,.9), 0 2px 2px rgba(0,0,0,.8);
}
.gift.solo .giftno{font-size:34px; bottom:14px;}
.gift.off .giftno{opacity:.6;}

.chest-actions{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin-top:16px;}
.chest-actions > *{margin:6px;}

/* ---- 結果頁 ---- */
.giftstage{position:relative; display:flex; justify-content:center; padding:26px 0 14px;}
.gift.big{width:210px; height:289px; cursor:default;}
.gift.glow{animation:chestglow 1.6s ease-in-out infinite alternate;}
@keyframes chestglow{
  from{filter:drop-shadow(0 0 6px rgba(242,196,98,.35));}
  to{filter:drop-shadow(0 0 22px rgba(242,196,98,.9));}
}

/* ---- 開箱成功特效：放射光芒 + 光暈 + 12 顆火花 + 寶箱彈出 ----
   放射光是用「重複的圓錐漸層」畫的；IE11 不支援 conic-gradient，會退成單純的光暈，不會破版。 */
.giftstage.burst{padding:34px 0 18px;}
.burst .rays{
  position:absolute; left:50%; top:50%; width:520px; height:520px; margin:-260px 0 0 -260px;
  pointer-events:none; z-index:0; opacity:0;
  background:repeating-conic-gradient(from 0deg,
    rgba(242,196,98,.30) 0deg 5deg, rgba(242,196,98,0) 5deg 20deg);
  -webkit-mask-image:radial-gradient(circle, #000 18%, rgba(0,0,0,.55) 42%, transparent 70%);
          mask-image:radial-gradient(circle, #000 18%, rgba(0,0,0,.55) 42%, transparent 70%);
  animation:raysin .5s ease-out .05s forwards, raysspin 14s linear .05s infinite;
}
@keyframes raysin{ from{opacity:0; transform:scale(.4);} to{opacity:1; transform:scale(1);} }
@keyframes raysspin{ from{rotate:0deg;} to{rotate:360deg;} }

.burst .halo{
  position:absolute; left:50%; top:50%; width:360px; height:360px; margin:-180px 0 0 -180px;
  pointer-events:none; z-index:0; border-radius:50%;
  background:radial-gradient(circle, rgba(255,238,190,.55) 0%, rgba(242,196,98,.28) 34%, rgba(242,196,98,0) 68%);
  animation:halopop .55s cubic-bezier(.2,.9,.3,1) forwards, halobreath 2.2s ease-in-out .6s infinite alternate;
}
@keyframes halopop{ from{opacity:0; transform:scale(.3);} to{opacity:1; transform:scale(1);} }
@keyframes halobreath{ from{opacity:.75;} to{opacity:1;} }

.burst .gift.big{position:relative; z-index:1;}
.gift.pop{animation:chestpop .55s cubic-bezier(.2,1.5,.4,1) both;}
@keyframes chestpop{
  0%{opacity:0; transform:scale(.35) rotate(-10deg);}
  60%{opacity:1; transform:scale(1.12) rotate(3deg);}
  100%{opacity:1; transform:scale(1) rotate(0deg);}
}

/* 火花：12 顆，角度與延遲各自寫成類別（不能用內聯 style，CSP 會擋） */
.sparks{position:absolute; left:50%; top:50%; width:0; height:0; z-index:2; pointer-events:none;}
.sp{
  position:absolute; left:-5px; top:-5px; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle, #FFF6DA 0%, #F2C462 45%, rgba(242,196,98,0) 72%);
  opacity:0;
}
.s1 {animation:fly1  1.10s ease-out .10s both;}
.s2 {animation:fly2  1.25s ease-out .14s both;}
.s3 {animation:fly3  1.00s ease-out .08s both;}
.s4 {animation:fly4  1.30s ease-out .18s both;}
.s5 {animation:fly5  1.15s ease-out .12s both;}
.s6 {animation:fly6  1.05s ease-out .16s both;}
.s7 {animation:fly7  1.28s ease-out .09s both;}
.s8 {animation:fly8  1.12s ease-out .20s both;}
.s9 {animation:fly9  1.02s ease-out .13s both;}
.s10{animation:fly10 1.22s ease-out .07s both;}
.s11{animation:fly11 1.18s ease-out .17s both;}
.s12{animation:fly12 1.08s ease-out .11s both;}
@keyframes fly1 {0%{opacity:0;transform:translate(0,0) scale(.4);}18%{opacity:1;}100%{opacity:0;transform:translate(0px,-190px) scale(1.25);}}
@keyframes fly2 {0%{opacity:0;transform:translate(0,0) scale(.4);}18%{opacity:1;}100%{opacity:0;transform:translate(112px,-160px) scale(1.1);}}
@keyframes fly3 {0%{opacity:0;transform:translate(0,0) scale(.4);}18%{opacity:1;}100%{opacity:0;transform:translate(178px,-92px) scale(1.3);}}
@keyframes fly4 {0%{opacity:0;transform:translate(0,0) scale(.4);}18%{opacity:1;}100%{opacity:0;transform:translate(200px,6px) scale(1.05);}}
@keyframes fly5 {0%{opacity:0;transform:translate(0,0) scale(.4);}18%{opacity:1;}100%{opacity:0;transform:translate(168px,104px) scale(1.2);}}
@keyframes fly6 {0%{opacity:0;transform:translate(0,0) scale(.4);}18%{opacity:1;}100%{opacity:0;transform:translate(96px,168px) scale(1.0);}}
@keyframes fly7 {0%{opacity:0;transform:translate(0,0) scale(.4);}18%{opacity:1;}100%{opacity:0;transform:translate(-6px,196px) scale(1.28);}}
@keyframes fly8 {0%{opacity:0;transform:translate(0,0) scale(.4);}18%{opacity:1;}100%{opacity:0;transform:translate(-104px,158px) scale(1.08);}}
@keyframes fly9 {0%{opacity:0;transform:translate(0,0) scale(.4);}18%{opacity:1;}100%{opacity:0;transform:translate(-176px,88px) scale(1.22);}}
@keyframes fly10{0%{opacity:0;transform:translate(0,0) scale(.4);}18%{opacity:1;}100%{opacity:0;transform:translate(-198px,-14px) scale(1.02);}}
@keyframes fly11{0%{opacity:0;transform:translate(0,0) scale(.4);}18%{opacity:1;}100%{opacity:0;transform:translate(-160px,-112px) scale(1.26);}}
@keyframes fly12{0%{opacity:0;transform:translate(0,0) scale(.4);}18%{opacity:1;}100%{opacity:0;transform:translate(-88px,-174px) scale(1.12);}}

/* 「開箱成功」四個字掃一道金光。
   20260910f 整段包進 @supports，不然遊戲登入器會出現一條綠色橫條把字蓋掉。
   原因（已用 ie-test.ps1 在登入器同一顆引擎上量過）：
   登入器是 IE11（Trident/7.0; rv:11.0），它沒有 -webkit-background-clip，
   backgroundClip 設成 text 也會被判成無效值，更沒有 -webkit-text-fill-color。
   結果就是：綠色漸層照樣鋪滿整個標題方塊（654x35），文字顏色又還是同一個綠，
   綠字疊在綠底上等於看不見 —— 畫面上就只剩一條綠色橫條。
   IE11 同時也不支援 @supports（實測 CSS.supports = no），會整段跳過，
   於是只留下 .c-jade 的綠色文字，乾淨、看得見；支援的瀏覽器才拿得到掃光效果。 */
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .shine{
    background:linear-gradient(100deg, #5CCBA2 0%, #5CCBA2 38%, #FFF6DA 50%, #5CCBA2 62%, #5CCBA2 100%);
    background-size:280% 100%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:shinesweep 2.4s ease-in-out .35s infinite;
  }
}
@keyframes shinesweep{ 0%{background-position:120% 0;} 55%,100%{background-position:-60% 0;} }

.hidden{display:none;}
.btn.ghost.small{padding:6px 14px; font-size:13px;}

@media (prefers-reduced-motion: reduce){
  .gift.glow, .gift.pop, button.gift.solo, .burst .rays, .burst .halo, .sp, .shine{animation:none;}
  .sp{opacity:0;}
  .shine{-webkit-text-fill-color:currentColor; background:none;}
}

/* 遊戲登入器內嵌視窗（實測約 460~500 寬） */
@media (max-width:520px){
  /* 登入器小視窗放不下兩顆入口＋帳號資訊，字級與間距收一點 */
  .navchest,.navsign{margin-left:6px; padding:3px 7px; font-size:12px; letter-spacing:.04em;}
  .chestmain > *{margin:0 0 10px;}
  .prizebox{flex:1 1 100%; min-width:0;}
  .giftsolo{padding:8px 0 4px;}
  .gift.solo{width:200px; height:276px;}
  .gift.solo .giftno{font-size:28px; bottom:10px;}
  .gift.big{width:180px; height:248px;}
  .chestpanel .chest-rule{display:none;}
  .chest-actions > *{margin:5px;}
  .burst .rays{width:360px; height:360px; margin:-180px 0 0 -180px;}
  .burst .halo{width:260px; height:260px; margin:-130px 0 0 -130px;}
}