/* 20261004 「活動頁・明亮手遊」皮膚（skin-pop）—— 三服正式採用
   ------------------------------------------------------------------
   定位：現代手遊「每日簽到活動」那種明亮、活潑、好讀的感覺。
     底色   淡藍紫 #EEF3FB（建議 <body bgcolor="#EEF3FB">，避免 IE 換頁閃深色）
     卡片   白底、大圓角、柔和陰影
     主色   活力橘 #FF7A1A（主要行動鈕＝糖果鈕，下緣有實色「厚度」）
     輔色   湖水藍 #0FA3BF（連結、標籤、選取框）
     狀態   已簽到＝綠色實心勾、今日＝橘色發光圈、可補簽＝琥珀、未開放＝淡灰

   載入順序：本檔最後載入（_header.ejs 依 config.skin 決定要不要掛），覆蓋 style.css / chest.css /
   slot.css / ingame-compact.css；選服頁則覆蓋 server-select.css。只改外觀，不動任何版面邏輯與顯示／隱藏規則。
   要退回原本外觀：.env 加 SKIN=none 重啟即可。

   IE8（約 1%，走 legacy.css）：本檔所有漸層／rgba 前面都先寫了實色，IE8 看不懂的那一行會被略過、
   留下實色；圓角、陰影 IE8 不支援，就是方角平面。legacy.css 自己寫死的暗色另由 skin-pop-legacy.css 蓋掉。

   IE11 相容（遊戲登入器內嵌引擎）：
     不用 var()、grid、flex gap、inset、min()/clamp()、:is()/:where()，一律寫字面值。
     body.ie-stable（IE 內一定會加）沿用原本「大面積用實色、不用大陰影」的效能取捨，
     卡片的立體感改用「下緣加粗的實色邊框」做，不靠 box-shadow。
   ------------------------------------------------------------------ */

/* ================= 基底 ================= */
html{
  /* IE11 專屬的捲軸配色：淡色系，和頁面一致（其他瀏覽器會忽略） */
  scrollbar-face-color:#C9D6EC;
  scrollbar-arrow-color:#4A5878;
  scrollbar-track-color:#EEF3FB;
  scrollbar-shadow-color:#C9D6EC;
  scrollbar-highlight-color:#C9D6EC;
  scrollbar-3dlight-color:#EEF3FB;
  scrollbar-darkshadow-color:#EEF3FB;
}
body{
  background-color:#EEF3FB;
  /* 一般瀏覽器：上方淡天藍、右下淡蜜桃色的柔光，像活動頁的明亮背景 */
  background-image:
    radial-gradient(900px 420px at 50% -10%, rgba(120,190,255,.30), rgba(120,190,255,0) 70%),
    radial-gradient(700px 400px at 100% 100%, rgba(255,170,120,.18), rgba(255,170,120,0) 70%),
    linear-gradient(180deg, #E6EEFB, #EEF3FB 320px);
  color:#1F2A44;
  font-family:"Microsoft JhengHei","微軟正黑體","PingFang TC",Arial,sans-serif;
}
/* IE 內：純色底，不鋪漸層（沿用原本的效能考量） */
body.ie-stable{background-color:#EEF3FB; background-image:none;}

/* IE11 不認得 <main>，會把它當成行內元素，.wrap 的左右內距因此失效，
   內容整片貼齊視窗左緣（實測 main 左緣 -12px、標題 0px）。深色版不明顯，
   白卡片在亮底上就很刺眼，所以這裡補成區塊元素。（IE8 由 legacy.css／legacy-html5.js 處理） */
main{display:block;}

a{color:#0B86A3;}
a:hover{color:#E8590C;}
:focus-visible{outline:2px solid #FF7A1A; outline-offset:2px;}
.muted{color:#56627E;}
.num,.stat .v,.rw-qty,.boxlist .bq,.card .cd,.day-num .d,.daycard .cd{
  font-family:"Segoe UI","Microsoft JhengHei",Arial,sans-serif;
}

/* ================= 頁首 ================= */
.top{
  background:#FFFFFF;
  border-top:3px solid #FF7A1A;
  border-bottom:1px solid #DCE4F2;
  box-shadow:0 2px 10px rgba(60,90,150,.08);
}
body.ie-stable .top{background:#FFFFFF; box-shadow:none; border-bottom:2px solid #DCE4F2;}
.crest{
  border-radius:10px;
  background:#FF7A1A;
  background:linear-gradient(160deg, #FFA53D, #FF6A10);
  box-shadow:0 3px 0 #D9530A;
  font-family:"Microsoft JhengHei","微軟正黑體",Arial,sans-serif;
  color:#FFFFFF; font-size:18px; font-weight:900;
}
.brand b{color:#1F2A44; font-weight:900; letter-spacing:.03em;}
.brand small{color:#0B86A3; font-weight:700;}
.who{color:#56627E;}
.who b{color:#1F2A44;}
.linkbtn{color:#56627E; font-weight:700;}
.linkbtn:hover{color:#E8590C;}

/* 頁首導覽：三顆圓角膠囊，各帶一個糖果色 */
.navsign,.navchest,.navslot,.navrush,.navswitch{
  border-radius:999px; font-weight:700; letter-spacing:.04em; text-decoration:none;
}
.navsign{color:#0A7189; background:#DDF4F8; border:1px solid #9ED9E5;}
.navsign:hover{color:#06586B; background:#C8EDF4;}
.navchest{color:#C24A00; background:#FFEBDA; border:1px solid #FFC08F;}
.navchest:hover{color:#A33E00; background:#FFDDC2;}
.navslot{color:#B0216A; background:#FDE4F0; border:1px solid #F5AFD0;}
.navslot:hover{color:#8E1A55; background:#FBD3E6; text-decoration:none;}
.navrush{color:#5B34B8; background:#EFE8FF; border:1px solid #CDB8F7;}
.navrush:hover{color:#45268F; background:#E3D7FF; text-decoration:none;}
.navswitch{color:#4A5878; background:#F1F4FA; border:1px solid #D5DEEE;}
.navswitch:hover{color:#1F2A44; background:#E4EAF5;}
.svbadge{
  border-radius:999px; color:#FFFFFF; border:0;
  background:#0FA3BF; box-shadow:0 2px 0 #0A7E95;
}

/* ================= 標題與共用文字 ================= */
h1.page{
  color:#1F2A44; font-weight:900; letter-spacing:.04em;
  border-left:5px solid #FF7A1A; padding-left:10px; line-height:1.25;
}
.charline{color:#56627E;}
.charline b{color:#1F2A44;}
.c-gold{color:#E8590C;}
.c-jade{color:#14995B;}
.c-crimson{color:#E0384F;}
.lbl{color:#0A7E95; letter-spacing:.12em;}

/* ================= 卡片／面板 ================= */
.panel{
  background:#FFFFFF;
  border:1px solid #DCE4F2;
  border-radius:16px;
  box-shadow:0 8px 22px rgba(60,90,150,.10);
}
/* IE 內不用大陰影，改用「下緣加粗」做出卡片浮起的感覺 */
body.ie-stable .panel{background:#FFFFFF; box-shadow:none; border:1px solid #DCE4F2; border-bottom:3px solid #CCD7EA;}
.panel-head{
  background:#FFFFFF;
  border-bottom:1px solid #E8EDF6;
  border-radius:16px 16px 0 0;
}
body.ie-stable .panel-head{background:#FFFFFF;}
.panel-head h2{
  color:#1F2A44; font-weight:900; letter-spacing:.08em;
  border-left:4px solid #FF7A1A; padding-left:8px; line-height:1.2;
}
.panel-head .rule{background:#E8EDF6; height:2px; border-radius:2px;}
body.ie-stable .panel-head .rule{background:#E8EDF6;}

/* ================= 表單 ================= */
label.field{color:#4A5878; font-weight:700;}
label.field input{
  background:#F7F9FD; color:#1F2A44;
  border:2px solid #D5DEEE; border-radius:12px;
}
label.field input:focus{border-color:#FF7A1A; background:#FFFFFF;}

/* ================= 按鈕：糖果鈕 ================= */
.btn{
  border-radius:999px;
  font-family:"Microsoft JhengHei","微軟正黑體",Arial,sans-serif;
  font-weight:900; letter-spacing:.08em;
  color:#FFFFFF;
  background:#F26B0F;
  background:linear-gradient(180deg, #FF9A3C, #F2650A);
  /* 下緣 4px 實色＝糖果鈕的厚度；內側上緣一道白光 */
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), 0 4px 0 #C44B00;
  text-shadow:0 1px 0 rgba(150,50,0,.45);
}
.btn:hover{color:#FFFFFF;}
.btn:active{box-shadow:inset 0 2px 0 rgba(255,255,255,.25), 0 1px 0 #C44B00; transform:translateY(3px);}
/* 今日可領：最醒目，黃橘漸層＋外圈光暈 */
.btn.gold{
  color:#FFFFFF;
  background:#FF7A1A;
  background:linear-gradient(180deg, #FFC23D, #FF8A1F 55%, #F2650A);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 4px 0 #C44B00, 0 0 0 4px rgba(255,138,31,.20);
  text-shadow:0 1px 0 rgba(150,50,0,.55);
}
/* 次要／不可用：白底灰框 */
.btn.ghost{
  background:#FFFFFF;
  color:#4A5878;
  box-shadow:inset 0 0 0 2px #D5DEEE, 0 3px 0 #D5DEEE;
  text-shadow:none;
}
.btn.ghost:hover{color:#0A7E95; box-shadow:inset 0 0 0 2px #9ED9E5, 0 3px 0 #9ED9E5;}
.btn[disabled]{opacity:1; background:#EEF1F6; color:#7A8499; box-shadow:inset 0 0 0 2px #DDE3EE; text-shadow:none;}
.btn.small{letter-spacing:.04em;}
.btn.ghost.small{box-shadow:inset 0 0 0 2px #D5DEEE, 0 2px 0 #D5DEEE;}

/* ================= 提示框 ================= */
.alert,.notice,.good{border-radius:12px; font-weight:700; border-left-width:5px;}
.alert{background:#FFE9EC; border-left:5px solid #F0435A; color:#A81C30;}
.notice{background:#E3F2FE; border-left:5px solid #2B8DE3; color:#14568F;}
.good{background:#E1F7EC; border-left:5px solid #1FAA6B; color:#0F6B40;}

/* ================= 統計列 ================= */
.stat{
  background:#FFFFFF;
  border:1px solid #DCE4F2; border-bottom:3px solid #CCD7EA;
  border-radius:14px;
}
.stat .k{color:#56627E; font-weight:700; letter-spacing:.08em;}
.stat .v{color:#1F2A44; font-weight:900;}
.stat .v small{color:#56627E; font-weight:700;}
.stat .v.gold{color:#E8590C;}
.stat .v.jade{color:#14995B;}
.bar{height:8px; border-radius:999px; background:#E6ECF6;}
.bar i{border-radius:999px; background:#FF7A1A; background:linear-gradient(90deg, #FFB347, #FF7A1A);}
.bar.jade i{background:#1FB872; background:linear-gradient(90deg, #4FD69A, #18A866);}
.stat .hint{color:#5F6B86;}

/* ================= 詳情 ================= */
.day-num{
  border:0; border-radius:14px;
  background:#FF7A1A;
  background:linear-gradient(170deg, #FFA53D, #FF6A10);
  box-shadow:0 4px 0 #D9530A;
}
.day-num .m{color:#FFF1E4; font-weight:700;}
.day-num .d{color:#FFFFFF; font-weight:900; text-shadow:0 2px 0 rgba(180,60,0,.35);}
.day-title h3{color:#1F2A44;}

/* 狀態膠囊 */
.badge{border-radius:999px; font-weight:900; letter-spacing:.06em; box-shadow:none;}
.badge.claimed{color:#FFFFFF; background:#1FAA6B; box-shadow:none;}
.badge.today{color:#FFFFFF; background:#FF7A1A; box-shadow:0 0 0 3px rgba(255,122,26,.22);}
.badge.makeup{color:#7A4A00; background:#FFD467; box-shadow:none;}
.badge.notyet{color:#56627E; background:#E7ECF4; box-shadow:none;}

.showcase{
  border:1px solid #E3E9F5; border-radius:16px;
  background:#F7F9FD;
  background:radial-gradient(150px 120px at 76px 50%, rgba(255,190,120,.30), rgba(255,190,120,0) 72%), #F7F9FD;
}
body.ie-stable .showcase{background:#F7F9FD;}
.relic{
  border:3px solid #FFD2AE; border-radius:22px;
  background:#FFF6EC;
  background:radial-gradient(circle at 50% 42%, #FFFFFF, #FFEBD6 75%);
  box-shadow:0 5px 0 #FFC08F;
}
.relic img{filter:none;}
.relic .qty{
  border-radius:999px; color:#FFFFFF; font-weight:900;
  background:#FF7A1A; box-shadow:0 3px 0 #C44B00;
  text-shadow:0 1px 0 rgba(150,50,0,.4);
}
.showcase-body h4{color:#1F2A44; font-weight:900;}
.showcase-body .meta{color:#56627E;}

/* 獎勵清單 */
.rewards li{
  background:#FFFFFF; border:1px solid #E3E9F5; border-radius:12px;
}
.showcase .rewards li{background:#FFFFFF;}
.chip-ico{
  background:#F1F5FC; border:1px solid #DCE4F2; border-radius:10px;
}
.rw-name{color:#1F2A44; font-weight:700; text-decoration-color:rgba(15,163,191,.55);}
.rw-name:hover{color:#0A7E95;}
.rw-name .hint{color:#6B7590;}
.rw-qty{color:#E8590C; font-weight:900;}
.rw-qty.cost{color:#E0384F;}

/* 寶箱可開出內容 */
.boxwrap{background:#F7F9FD; border:1px solid #E3E9F5; border-radius:14px;}
.boxlist li{background:#FFFFFF; border:1px solid #E8EDF6; border-radius:10px;}
.boxlist .chip-ico{background:#F1F5FC;}
.boxlist .bn{color:#1F2A44;}
.boxlist .bq{color:#E8590C; font-weight:900;}
.boxlist .be{color:#C24A00; background:#FFEBDA; box-shadow:none;}
.boxlist .bx{color:#0A7189; background:#DDF4F8; box-shadow:none;}
.boxlist .bc{color:#A81C30; background:#FFE4E8; box-shadow:none;}
.boxmore{
  border-radius:999px; background:#FFFFFF; color:#0A7E95;
  box-shadow:inset 0 0 0 2px #9ED9E5;
}
.boxmore:hover{color:#06586B; background:#EAF8FB;}

/* 領取條件 */
.checks li{color:#1F2A44;}
.checks li.off{color:#5F6B86;}
.mark{font-weight:900;}
.mark.ok{background:#1FAA6B; color:#FFFFFF; box-shadow:none;}
.mark.no{background:#F0435A; color:#FFFFFF; box-shadow:none;}
.mark.na{background:#E7ECF4; color:#56627E; box-shadow:none;}
.act-note{color:#5F6B86;}

/* ================= 月曆 ================= */
.legend{color:#4A5878; border-bottom:1px solid #E8EDF6; font-weight:700;}
.dot{width:10px; height:10px; border-radius:50%;}
.dot.claimed{background:#1FAA6B;}
.dot.today{background:#FF7A1A;}
.dot.makeup{background:#FFB020;}
.dot.notyet{background:#C9D2E2;}

.calendar-pager{color:#1F2A44; font-weight:700;}
.calendar-pager button{
  border:0; border-radius:999px; padding:6px 14px; font-weight:700;
  color:#0A7189; background:#DDF4F8; box-shadow:inset 0 0 0 1px #9ED9E5;
}
.calendar-pager button:disabled{opacity:1; color:#9AA3B5; background:#F1F4FA; box-shadow:inset 0 0 0 1px #E3E9F5;}

.grid{scrollbar-color:#C9D6EC transparent;}
.grid::-webkit-scrollbar-thumb{background:#C9D6EC;}

/* 一般格（基底） */
.card{
  border-radius:12px;
  background:#F4F7FC;
  box-shadow:inset 0 0 0 1px #E1E8F4;
}
.card:hover{box-shadow:inset 0 0 0 1px #C9D6EC, 0 6px 14px rgba(60,90,150,.16);}
.card .cd{color:#1F2A44; font-weight:900;}
.card .cm{color:#6B7590; font-weight:700;}
.card .cs{font-weight:900;}

/* 已簽到：綠色實心＋右上白圈勾 */
.card.claimed{
  background:#1FAA6B;
  background:linear-gradient(180deg, #34C784, #17A062);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12);
}
.card.claimed .cd,.card.claimed .cs{color:#FFFFFF;}
.card.claimed .cm{color:#D8F5E7;}
.card.claimed .cico{opacity:.6;}
.card.claimed::after{
  content:"✔"; top:4px; right:5px; width:16px; height:16px; line-height:16px;
  border-radius:50%; text-align:center; font-size:10px; font-weight:900;
  color:#17A062; background:#FFFFFF; text-shadow:none;
}
/* 今日：白底＋橘色發光圈 */
.card.today{
  background:#FFFFFF;
  box-shadow:inset 0 0 0 3px #FF7A1A, 0 0 0 3px rgba(255,122,26,.22), 0 6px 14px rgba(255,122,26,.30);
}
.card.today .cd{color:#E8590C;}
.card.today .cs{color:#E8590C;}
.card.today .cm{color:#F08A3E;}
/* 可補簽：琥珀 */
.card.makeup{
  background:#FFF3D3;
  box-shadow:inset 0 0 0 2px #FFB020;
}
.card.makeup .cd{color:#7A4A00;}
.card.makeup .cs{color:#8F5A00;}
.card.makeup .cm{color:#A87420;}
/* 未開放：淡灰（不再用半透明，字才看得清楚） */
.card.notyet{background:#EEF1F6; opacity:1; box-shadow:inset 0 0 0 1px #E1E6EF;}
.card.notyet .cd{color:#7D879C;}
.card.notyet .cs{color:#7D879C;}
.card.notyet .cm{color:#9AA3B5;}
.card.notyet .cico{opacity:.45;}
/* 選取中：湖水藍框 */
.card[aria-pressed="true"]{
  box-shadow:inset 0 0 0 3px #0FA3BF, 0 0 0 3px rgba(15,163,191,.22), 0 6px 14px rgba(15,163,191,.25);
}
.card.claimed[aria-pressed="true"]{
  box-shadow:inset 0 0 0 3px #0B7E95, 0 0 0 3px rgba(15,163,191,.28);
}
/* 今日格預設就是選取中：保留橘色發光圈，外面再加一圈湖水藍表示「選取」 */
.card.today[aria-pressed="true"]{
  box-shadow:inset 0 0 0 3px #FF7A1A, 0 0 0 3px #FFFFFF, 0 0 0 5px #0FA3BF, 0 6px 14px rgba(255,122,26,.30);
}

/* ================= 角色清單 ================= */
table.list th{color:#56627E;}
table.list td{color:#1F2A44;}
table.list th,table.list td{border-bottom:1px solid #E8EDF6;}
.chip{border-radius:999px; font-weight:700; background:#E7ECF4; color:#4A5878;}
.chip.on{background:#DDF6EA; color:#0F7A47; box-shadow:inset 0 0 0 1px #A6E3C6;}

/* ================= 領取結果＋蓋章 ================= */
.result h3{color:#1F2A44;}
.result .sub{color:#56627E;}
/* 結果標題的顏色代表成敗（綠＝成功、橘＝處理中、紅＝失敗），上面那行 .result h3 權重較高會把它蓋掉，這裡補回 */
.result h3.c-jade,.openstate h3.c-jade{color:#14995B;}
.result h3.c-gold,.openstate h3.c-gold{color:#E8590C;}
.result h3.c-crimson,.openstate h3.c-crimson{color:#E0384F;}
.sealstage{
  border:1px solid #E3E9F5; border-radius:18px;
  background:#F7F9FD;
  background:radial-gradient(220px 140px at 50% 40%, rgba(255,190,120,.30), rgba(255,190,120,0) 70%), #F7F9FD;
}
body.ie-stable .sealstage{background:#F7F9FD;}
.daycard{
  border-radius:16px; background:#FFFFFF;
  box-shadow:inset 0 0 0 3px #FF7A1A, 0 6px 16px rgba(255,122,26,.25);
}
.daycard .cm{color:#F08A3E; font-weight:700;}
.daycard .cd{color:#E8590C; font-weight:900;}
.daycard .cs{color:#E8590C;}
/* 印章改成活潑的橘紅「簽到成功章」 */
.seal{
  border-radius:50%;
  background:#FF5A2C; color:#FFFFFF;
  font-family:"Microsoft JhengHei","微軟正黑體",Arial,sans-serif;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.95), inset 0 0 0 8px #FF5A2C, 0 6px 16px rgba(255,90,44,.40);
}
.seal::after{border-radius:50%;}
.dust{border-color:rgba(255,122,26,.6);}

/* ================= 道具彈窗 ================= */
.veil{background:#8F97A8; background:rgba(31,42,68,.55);}
.modal{
  background:#FFFFFF; color:#1F2A44;
  /* 整圈暖橘細框（不用粗上緣：圓角＋單邊粗框在 IE 會變成兩端變細的月牙形） */
  border:3px solid #FFC08F; border-radius:22px;
  box-shadow:0 18px 40px rgba(20,40,90,.30);
}
.modal .frame{
  border:3px solid #FFD2AE; border-radius:22px;
  background:#FFF6EC;
  background:radial-gradient(circle at 50% 42%, #FFFFFF, #FFEBD6 75%);
  box-shadow:0 5px 0 #FFC08F;
}
.modal h4{color:#1F2A44; font-weight:900;}

/* ================= 頁尾 ================= */
/* 原本 padding 的左右是 0，會蓋掉 .wrap 的內距，字貼邊；這裡補回左右內距 */
.foot{color:#5F6B86; border-top:1px solid #DCE4F2; padding-left:18px; padding-right:18px;}
@media (max-width:520px){ .foot{padding-left:10px; padding-right:10px;} }

/* ================= 底部遊戲內捲動列 =================
   注意 body.ie-stable 版的選擇器權重較高，兩組都要寫 */
@media (max-width:960px), (max-height:500px){
  .qnav,body.ie-stable .qnav{
    background:#FFFFFF;
    border-top:1px solid #DCE4F2;
    box-shadow:0 -4px 12px rgba(60,90,150,.12);
  }
  body.ie-stable .qnav{box-shadow:none; border-top:2px solid #DCE4F2;}
  .qnav button,body.ie-stable .qnav button{
    border-radius:999px;
    background:#EEF3FB;
    color:#1F2A44;
    border:1px solid #D5DEEE;
    box-shadow:none;
    font-weight:900;
  }
  /* 上頁／下頁固定在最後兩顆，給它橘色，最常按的鈕一眼就找到 */
  .qnav button:last-child,.qnav button:nth-last-child(2),
  body.ie-stable .qnav button:last-child,body.ie-stable .qnav button:nth-last-child(2){
    background:#FF7A1A; color:#FFFFFF; border:1px solid #E8590C;
  }
  .qnav button:active,body.ie-stable .qnav button:active{background:#DDF4F8; color:#06586B;}
  .qnav button:last-child:active,.qnav button:nth-last-child(2):active,
  body.ie-stable .qnav button:last-child:active,body.ie-stable .qnav button:nth-last-child(2):active{
    background:#D9530A; color:#FFFFFF;
  }
}

/* ================= 每日寶箱頁 ================= */
.chestpanel .chest-rule{color:#5F6B86;}
.openstate h3{color:#1F2A44;}
.openstate .sub{color:#56627E;}
.prizebox .rw-name{color:#1F2A44;}
/* 20261004 配套美術：寶箱五狀態換成亮色禮物盒（public/img/pop，尺寸與原圖相同，IE8 不縮放也不跑版）。
   選擇器與 chest.css 一一對應，只換圖、不動大小與動畫 */
.gift{background-image:url(/static/img/pop/gift_normal.png);}
button.gift:hover,button.gift:focus{background-image:url(/static/img/pop/gift_over.png);}
button.gift:active{background-image:url(/static/img/pop/gift_pressed.png);}
.gift.picked{background-image:url(/static/img/pop/gift_pressed.png);}
.gift.off{background-image:url(/static/img/pop/gift_disabled.png);}
.gift.done{background-image:url(/static/img/pop/gift_complete.png);}
/* 「?」疊在新禮物盒底部的白色名牌上：改成主色橘、不要黑色陰影 */
.giftno{color:#FF7A1A; text-shadow:none;}
.gift.off .giftno{color:#9AA3B5;}
/* 原本的金色呼吸光改成暖橘，跟新圖一致 */
@keyframes chestglow{
  from{filter:drop-shadow(0 0 6px rgba(255,138,31,.30));}
  to{filter:drop-shadow(0 0 20px rgba(255,138,31,.75));}
}
/* 寶箱底下襯一圈淡橘光，讓圖片在亮底上不會顯得突兀 */
.giftsolo{
  border-radius:24px;
  background:radial-gradient(160px 160px at 50% 52%, rgba(255,190,120,.35), rgba(255,190,120,0) 70%);
}
body.ie-stable .giftsolo{background:none;}
/* 開箱成功的放射光是 360px 寬，在 337 寬的小視窗會撐出橫向捲軸（舊外觀也有），在舞台內裁掉 */
.giftstage.burst{overflow:hidden;}
/* 開箱成功的金光改成暖橘，與主色一致（IE 不支援的部分會自動略過） */
.sp{background:radial-gradient(circle, #FFFFFF 0%, #FFB347 45%, rgba(255,122,26,0) 72%);}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .shine{background:linear-gradient(100deg, #14995B 0%, #14995B 38%, #FFC23D 50%, #14995B 62%, #14995B 100%); background-size:280% 100%; -webkit-background-clip:text; background-clip:text;}
}

/* ================= 幸運拉霸頁 ================= */
body.ie-stable .slotpanel{background:#FFFFFF;}
body.ie-stable .slotpanel .panel-head{background:#FFFFFF;}
.slotstage{border:3px solid #FFB347; border-radius:16px; box-shadow:0 5px 0 #FFC08F;}
body.ie-stable .slotstage{box-shadow:none;}
.slot-loading{background:#FFFFFF; background:rgba(255,255,255,.88); color:#E8590C;}
.slot-stat{background:#FFFFFF; border:1px solid #DCE4F2; border-bottom:3px solid #CCD7EA; border-radius:14px;}
.slot-stat .k{color:#56627E; font-weight:700;}
.slot-stat .v{color:#E8590C; font-weight:900;}
.slot-stat.win .v{color:#9AA3B5;}
.slot-stat.win.on .v{color:#14995B;}
.slot-btn{
  border:0; border-radius:999px; font-weight:900;
  color:#0A7189; background:#DDF4F8; box-shadow:inset 0 0 0 2px #9ED9E5;
}
.slot-btn:hover:enabled{background:#C8EDF4;}
.slot-btn:disabled{opacity:1; color:#9AA3B5; background:#F1F4FA; box-shadow:inset 0 0 0 2px #E3E9F5;}
.slot-btn.main{
  color:#FFFFFF; border:0;
  background:#F26B0F;
  background:linear-gradient(180deg, #FFB347, #F2650A);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), 0 4px 0 #C44B00;
  text-shadow:0 1px 0 rgba(150,50,0,.45);
}
.slot-btn.main:hover:enabled{background:#FF8A1F;}
.slot-btn.main:disabled{color:#7A8499; background:#EEF1F6; box-shadow:inset 0 0 0 2px #DDE3EE; text-shadow:none;}
.slot-betbox{background:#FFFFFF; border:1px solid #DCE4F2; border-radius:999px;}
.slot-betbox .k{color:#56627E; font-weight:700;}
.slot-betbox .v{color:#E8590C;}
.slot-notice.on{background:#FFE9EC; border:1px solid #F5A3AF; color:#A81C30; border-radius:12px;}
.slot-demo{background:#FFF4E6; border-left:4px solid #FF7A1A; color:#6B4A20; border-radius:0 12px 12px 0;}
.slot-fallback{border:2px dashed #C9D6EC; color:#56627E; border-radius:12px;}

/* ================= 小視窗（遊戲內）微調 ================= */
@media (max-width:520px){
  /* 補了 main{display:block} 之後內容寬度變回正確的 300px；IE11 的 flex-basis 不吃 border-box，
     原本的 132px 會被加上內距變成 154px，兩欄排不下而變一欄。縮小基準值，維持「統計卡兩欄」的原設計 */
  .stat{flex:1 1 100px;}
  .card{border-radius:10px;}
  .card.claimed::after{top:1px; right:1px; width:13px; height:13px; line-height:13px; font-size:8px;}
  .day-num{border-radius:12px; box-shadow:0 3px 0 #D9530A;}
  .relic{border-radius:18px;}
}
@media (max-width:420px){
  table.list tr{border-bottom:1px solid #E8EDF6;}
}
@media (max-height:480px){
  /* 精簡頁首：橘色上緣縮細，留給內容 */
  .top{border-top-width:2px;}
  /* 原本 .top .wrap 有 min-height:58px，精簡模式下頁首仍空出一大塊白，收成一行高 */
  .top .wrap{min-height:34px;}
  .panel{border-radius:14px;}
  .panel-head{border-radius:14px 14px 0 0;}
  .panel-head h2{border-left-width:3px; padding-left:6px;}
  h1.page{border-left-width:4px; padding-left:8px;}
  .panel-head h2,h1.page{font-size:14px;}
}

/* ================= 選服頁（只載 server-select.css 的那一頁） =================
   server-select.css 用的是 button、h1 這類通用選擇器，
   這裡一律加上 .choose 前綴，才不會波及其他頁面的按鈕。 */
.choose{
  background:#FFFFFF; color:#1F2A44;
  border:1px solid #DCE4F2; border-bottom:3px solid #CCD7EA;
  border-top:5px solid #FF7A1A;
  border-radius:18px;
}
.choose h1{color:#1F2A44; font-weight:900; letter-spacing:.04em;}
.choose .hint,.choose .note{color:#56627E;}
.choose .error{color:#A81C30; background:#FFE9EC; border:1px solid #F5A3AF; border-radius:10px;}
.choose button{
  border:2px solid #D5DEEE; border-radius:16px;
  background:#F7F9FD; color:#4A5878;
  box-shadow:0 3px 0 #D5DEEE;
  font-family:"Microsoft JhengHei","微軟正黑體",Arial,sans-serif;
}
.choose button:hover,.choose button:focus{background:#FFF4EA; border-color:#FF9A3C; box-shadow:0 3px 0 #FFC08F; outline:0;}
.choose button strong{color:#E8590C; font-weight:900;}
.choose button span{color:#56627E; font-weight:700;}
/* 上次選的那一服：整顆變成橘色糖果鈕，最好按 */
.choose button.last{
  border-color:#E8590C; color:#FFFFFF;
  background:#FF7A1A;
  background:linear-gradient(180deg, #FF9A3C, #F2650A);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), 0 4px 0 #C44B00;
}
.choose button.last strong,.choose button.last span{color:#FFFFFF;}
.choose button.last em{color:#FFF1C2;}
.choose button em{color:#0A7E95; font-weight:700;}