/* =====================================================
   卡牌收藏館 Card Collection
   沿用整站暗底＋金線＋楷體標題；卡片未收藏＝灰度＋低透明黑罩＋鎖。
===================================================== */

:root{
  --cg-gold:#c9a14a;
  --cg-gold-soft:rgba(201,161,74,.42);
  --cg-gold-line:rgba(184,137,50,.55);
  --cg-ink:#ecdfc0;
  --cg-ink-dim:#b7a988;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  background:#07080c;
  color:var(--cg-ink);
}

body{
  font-family:"Times New Roman",Georgia,serif;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1200px 620px at 50% -140px, rgba(60,44,16,.42), rgba(0,0,0,0) 70%),
    radial-gradient(900px 500px at 50% 120%, rgba(28,22,10,.5), rgba(0,0,0,0) 72%);
  background-attachment:fixed;
}

/* 【補 310】2026-09-19 使用者指示：字體棧要跟全站一致（見 styles.css 的 #homeLayout 那幾條）。
   這一頁以前一行寫死「楷體優先」，日／韓／阿拉伯語系都被迫吃楷體或系統預設。
   英文等拉丁語系維持上面的 Times New Roman，跟主站一樣。 */
html[lang="zh"] body{font-family:KaiTi,"STKaiti","Kaiti SC",楷體,ReportKaiTi,"Times New Roman",serif}
html[lang="ja"] body{font-family:"NotoSerifJP","Yu Mincho","Hiragino Mincho ProN","Times New Roman",serif}
html[lang="ko"] body{font-family:"NotoSerifKR",Batang,"AppleMyungjo","Times New Roman",serif}
html[lang="ar"] body{font-family:"NotoNaskhArabic","Noto Naskh Arabic","Times New Roman",serif}

.cg-wrap{
  width:1200px;
  max-width:calc(100% - 40px);
  margin:0 auto;
  padding:46px 0 90px;
}

/* ---------- 語言列 ---------- */

.cg-lang{
  border-bottom:1px solid rgba(184,137,50,.32);
  background:linear-gradient(180deg, rgba(22,17,10,.92), rgba(9,8,6,.55));
}

.cg-lang-inner{
  width:1200px;
  max-width:calc(100% - 40px);
  margin:0 auto;
  padding:9px 0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
}

.cg-lang-btn{
  font-family:inherit;
  font-size:12.5px;
  letter-spacing:.5px;
  color:#b7a988;
  background:transparent;
  border:1px solid transparent;
  border-radius:6px;
  padding:4px 10px;
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}

.cg-lang-btn:hover{
  color:#efe2bd;
  border-color:rgba(184,137,50,.45);
}

.cg-lang-btn.is-on{
  color:#ffe9a0;
  border-color:rgba(201,161,74,.7);
  background:rgba(201,161,74,.14);
}

/* ---------- 刊頭 ---------- */

.cg-hero{
  text-align:center;
  padding:0 0 30px;
  border-bottom:1px solid var(--cg-gold-line);
  margin-bottom:34px;
}

.cg-kicker{
  font-family:"Times New Roman",Georgia,serif;
  font-size:13px;
  letter-spacing:6px;
  color:#c8a85e;
  opacity:.85;
}

.cg-title{
  margin:12px 0 10px;
  font-size:44px;
  font-weight:400;
  letter-spacing:10px;
  color:#f0dfae;
  text-shadow:0 0 26px rgba(226,196,131,.18);
}

.cg-sub{
  margin:0 auto;
  max-width:820px;
  font-size:16px;
  line-height:1.6;
  color:#d9c79c;
}

.cg-progress{
  margin-top:20px;
  font-size:13px;
  letter-spacing:2px;
  color:#d9b45f;
}

.cg-progress::before,
.cg-progress::after{
  content:"";
  display:inline-block;
  vertical-align:middle;
  width:60px;
  height:1px;
  margin:0 14px;
  background:linear-gradient(90deg, transparent, rgba(184,137,50,.7));
}

.cg-progress::after{
  background:linear-gradient(90deg, rgba(184,137,50,.7), transparent);
}

/* ---------- 分類 ---------- */

.cg-series{
  margin:0 0 42px;
}

.cg-series-head{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin:0 0 16px;
}

.cg-series-title{
  margin:0;
  font-size:22px;
  font-weight:400;
  letter-spacing:6px;
  color:#e6c877;
  white-space:nowrap;
}

.cg-series-count{
  font-family:"Times New Roman",Georgia,serif;
  font-size:12px;
  letter-spacing:2px;
  color:var(--cg-ink-dim);
}

.cg-series-rule{
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(184,137,50,.6), rgba(184,137,50,0));
  align-self:center;
}

.cg-grid{
  display:grid;
  grid-template-columns:repeat(8, minmax(0, 1fr));
  gap:16px 14px;
}

/* ---------- 單張卡 ---------- */

.cg-tile{
  position:relative;
  border:1px solid rgba(184,137,50,.34);
  border-radius:8px;
  overflow:hidden;
  background:#0d0c0a;
  cursor:pointer;
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.cg-tile:hover{
  border-color:rgba(232,200,119,.85);
  box-shadow:0 0 18px rgba(201,161,74,.28);
  transform:translateY(-2px);
}

.cg-tile-img{
  display:block;
  width:100%;
  aspect-ratio:2 / 3;
  object-fit:cover;
  background:#111;
  transition:filter .3s ease;
}

.cg-tile-name{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:16px 8px 7px;
  font-size:12.5px;
  line-height:1.25;
  text-align:center;
  color:#efe2bd;
  letter-spacing:1px;
  background:linear-gradient(180deg, rgba(8,7,5,0), rgba(8,7,5,.92) 62%);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 未收藏 */

.cg-tile.is-locked .cg-tile-img{
  filter:none;
}

/* 灰階＋壓暗已經烘進 -tile-lock.webp；
   這條只在烘焙檔載入失敗、退回原圖時才生效 */
.cg-tile.is-locked .cg-tile-img[data-fb="1"]{
  filter:grayscale(1) contrast(.92) brightness(.74);
}

.cg-tile.is-locked::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.08);
  pointer-events:none;
  transition:background .22s ease;
}

.cg-tile.is-locked:hover::after{
  background:rgba(0,0,0,.02);
}

.cg-tile-lock{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:rgba(233,214,166,.9);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.75));
  pointer-events:none;
}

/* 作者樣式優先於 UA 的 [hidden]，這兩個一定要自己關掉 */
.cg-tile-lock[hidden],
.cg-tile-owned-mark[hidden]{
  display:none;
}

/* 已收藏 */

.cg-tile.is-owned{
  border-color:rgba(232,200,119,.72);
  box-shadow:0 0 14px rgba(201,161,74,.16);
}

.cg-tile.is-owned .cg-tile-img{
  filter:none;
}

.cg-tile-owned-mark{
  position:absolute;
  top:6px;
  right:6px;
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(232,200,119,.94), rgba(176,133,44,.94));
  color:#1b1405;
  font-size:13px;
  line-height:1;
  box-shadow:0 1px 6px rgba(0,0,0,.6);
  pointer-events:none;
}

/* ---------- 放大卡牌 ---------- */

.cg-zoom{
  position:fixed;
  inset:0;
  z-index:9990;
  display:flex;
  align-items:center;
  justify-content:center;
  visibility:hidden;
  opacity:0;
  transition:opacity .26s ease, visibility 0s linear .26s;
}

.cg-zoom.is-open{
  visibility:visible;
  opacity:1;
  transition:opacity .26s ease, visibility 0s;
}

.cg-zoom-backdrop{
  position:absolute;
  inset:0;
  background:rgba(3,4,7,.88);
  backdrop-filter:blur(3px);
}

.cg-zoom-stage{
  position:relative;
  display:flex;
  align-items:center;
  gap:26px;
  width:min(1360px, 96vw);
  max-height:94vh;
  padding:0 6px;
}

.cg-zoom-image-wrap{
  position:relative;
  flex:0 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}

.cg-zoom-image{
  display:block;
  max-height:88vh;
  max-width:min(58vw, 760px);
  border-radius:10px;
  border:1px solid rgba(184,137,50,.5);
  box-shadow:0 26px 70px rgba(0,0,0,.75);
  transition:filter .3s ease;
}

.cg-zoom.is-locked .cg-zoom-image{
  filter:none;
}

.cg-zoom.is-locked .cg-zoom-image[data-fb="1"]{
  filter:grayscale(1) contrast(.92) brightness(.72);
}

.cg-zoom-lock-mark{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:rgba(233,214,166,.92);
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.8));
  pointer-events:none;
}

.cg-zoom-panel{
  flex:0 0 404px;
  width:404px;
  max-height:88vh;
  display:flex;
  background:linear-gradient(165deg, rgba(26,21,13,.97), rgba(12,10,7,.97));
  border:1px solid #b88932;
  border-radius:12px;
  box-shadow:-14px 0 40px rgba(0,0,0,.55), 0 0 18px rgba(226,196,131,.16);
  overflow:hidden;
}

.cg-zoom-panel-inner{
  display:flex;
  flex-direction:column;
  width:100%;
  min-height:0;
}

.cg-zoom-head{
  position:relative;
  padding:14px 16px 10px;
  border-bottom:1px solid rgba(184,137,50,.32);
  text-align:center;
}

.cg-zoom-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:12px;
  letter-spacing:3px;
  color:#d9b45f;
}

.cg-zoom-id{
  font-family:"Times New Roman",Georgia,serif;
  letter-spacing:2px;
}

.cg-zoom-series{
  color:#c2b393;
}

.cg-zoom-name{
  margin-top:6px;
  font-size:21px;
  letter-spacing:4px;
  color:#f0dfae;
}

.cg-zoom-ode{
  margin-top:6px;
  font-size:12.5px;
  line-height:1.5;
  color:#bda97f;
}

.cg-zoom-close{
  position:absolute;
  top:8px;
  right:10px;
  width:28px;
  height:28px;
  border:1px solid rgba(184,137,50,.5);
  border-radius:50%;
  background:rgba(0,0,0,.35);
  color:#d9b45f;
  font-size:16px;
  line-height:1;
  cursor:pointer;
}

.cg-zoom-close:hover{
  border-color:#e8c877;
  color:#ffe9a0;
}

.cg-zoom-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:8px 14px 10px;
}

.cg-sec{
  margin-top:8px;
}

.cg-sec-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 4px;
  font-size:13px;
  font-weight:400;
  letter-spacing:4px;
  color:#d9b45f;
}

.cg-sec-title::before,
.cg-sec-title::after{
  content:"";
  height:1px;
  flex:1;
  background:linear-gradient(90deg, transparent, rgba(184,137,50,.6));
}

.cg-sec-title::after{
  background:linear-gradient(90deg, rgba(184,137,50,.6), transparent);
}

.cg-text{
  margin:0;
  font-size:12.5px;
  line-height:1.72;
  color:#ecdfc0;
  text-align:justify;
  white-space:pre-line;
}

.cg-core-wrap{
  position:relative;
}

.cg-core-wrap.is-clamped #cgCore{
  overflow:hidden;
}

.cg-core-fade{
  display:none;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:34px;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(19,15,10,0), rgba(16,13,9,.96));
}

.cg-core-wrap.is-clamped .cg-core-fade{
  display:block;
}

.cg-lock{
  margin-top:8px;
  padding:10px 12px 12px;
  border:1px solid rgba(184,137,50,.42);
  border-radius:10px;
  background:linear-gradient(165deg, rgba(41,32,18,.55), rgba(16,13,9,.55));
  box-shadow:inset 0 0 18px rgba(226,196,131,.07);
  text-align:center;
}

.cg-lock[hidden]{display:none;}

.cg-lock-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#d9b45f;
  opacity:.92;
  margin-bottom:4px;
}

.cg-lock-title{
  margin:0 0 4px;
  font-size:12.5px;
  font-weight:400;
  letter-spacing:2px;
  color:#e8c877;
}

.cg-lock-body{
  margin:0 0 9px;
  font-size:11px;
  line-height:1.55;
  color:#c2b393;
  text-align:justify;
}

.cg-lock-cta{
  display:inline-block;
  padding:7px 22px;
  border:1px solid rgba(201,161,74,.72);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(201,161,74,.24), rgba(201,161,74,.10));
  color:#ffe9a0;
  font-family:inherit;
  font-size:12px;
  letter-spacing:2px;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}

.cg-lock-cta:hover{
  border-color:#e8c877;
  background:linear-gradient(180deg, rgba(201,161,74,.36), rgba(201,161,74,.16));
}

.cg-owned{
  margin-top:10px;
  padding:8px 12px;
  border:1px solid rgba(201,161,74,.5);
  border-radius:10px;
  background:linear-gradient(165deg, rgba(201,161,74,.16), rgba(201,161,74,.05));
  text-align:center;
}

.cg-owned[hidden]{display:none;}

.cg-owned-label{
  font-size:12px;
  letter-spacing:3px;
  color:#f0dfae;
}

.cg-zoom-foot{
  border-top:1px solid rgba(184,137,50,.28);
  padding:9px 14px 11px;
  text-align:center;
}

.cg-source{
  font-size:11px;
  letter-spacing:1px;
  color:#a2906a;
}

.cg-zoom-scroll::-webkit-scrollbar{width:8px;}
.cg-zoom-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.03);}
.cg-zoom-scroll::-webkit-scrollbar-thumb{background:rgba(201,161,74,.45);border-radius:4px;}

/* ---------- 模擬付款 ---------- */

.cg-pay{
  position:fixed;
  inset:0;
  z-index:10060;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(5,7,12,.62);
}

.cg-pay[hidden]{display:none;}

.cg-pay-card{
  width:min(520px, 90vw);
  padding:22px 22px 18px;
  border:1px solid #b88932;
  border-radius:14px;
  background:linear-gradient(165deg, rgba(30,24,14,.98), rgba(12,10,7,.98));
  box-shadow:0 24px 60px rgba(0,0,0,.7), 0 0 22px rgba(226,196,131,.14);
  text-align:center;
}

.cg-pay-title{
  margin:0 0 10px;
  font-size:18px;
  font-weight:400;
  letter-spacing:3px;
  color:#f0dfae;
}

.cg-pay-body{
  margin:0 0 18px;
  font-size:13px;
  line-height:1.65;
  color:#cbb98f;
}

/* 付款確認裡的餘額行：跟上面那句說明分開一行，數字用金色。 */
.cg-pay-bal{
  display:block;
  margin-top:10px;
  font-size:12.5px;
  letter-spacing:1.4px;
  color:#e8c877;
}

.cg-pay-row{
  display:flex;
  gap:12px;
  justify-content:center;
}

.cg-pay-btn{
  min-width:132px;
  padding:9px 18px;
  border:1px solid rgba(184,137,50,.6);
  border-radius:9px;
  background:rgba(0,0,0,.28);
  color:#d9c79c;
  font-family:inherit;
  font-size:13px;
  letter-spacing:2px;
  cursor:pointer;
}

.cg-pay-btn:hover{
  border-color:#e8c877;
  color:#ffe9a0;
}

.cg-pay-ok{
  background:linear-gradient(180deg, rgba(201,161,74,.34), rgba(201,161,74,.14));
  color:#ffe9a0;
}

/* ---------- RTL / 回應式 ---------- */

html[dir="rtl"] .cg-zoom-panel{
  box-shadow:14px 0 40px rgba(0,0,0,.55), 0 0 18px rgba(226,196,131,.16);
}

html[dir="rtl"] .cg-tile-owned-mark{
  right:auto;
  left:6px;
}

@media (max-width:1100px){
  .cg-grid{grid-template-columns:repeat(6, minmax(0,1fr));}
}

@media (max-width:880px){
  .cg-grid{grid-template-columns:repeat(4, minmax(0,1fr));}
  .cg-zoom-stage{flex-direction:column;gap:14px;width:96vw;}
  .cg-zoom-image{max-width:88vw;max-height:46vh;}
  .cg-zoom-panel{flex:0 0 auto;width:100%;max-height:44vh;}
}

@media (max-width:620px){
  .cg-grid{grid-template-columns:repeat(3, minmax(0,1fr));gap:12px 8px;}
  .cg-tile-name{font-size:9px;letter-spacing:0;}
  .cg-title{font-size:30px;letter-spacing:6px;}
}

/* ============================================================
   抽卡（【亥、補 387】）
   收藏館頁上的一層覆蓋層：DOM 卡牌 ＋ canvas 粒子／光暈。
   z-index 30000 要蓋過放大層與付款層，不然翻牌會被壓在後面。
   六幕：start（選單抽／卡包）→ summon（按住請卦）→
         shuffle（洗牌）→ reveal（逐張翻）→ summary（收卡）
   ============================================================ */

/* 入口按鈕（頁首） */
.cg-draw-btn{
  margin:18px auto 0;
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 30px;
  white-space:nowrap;
  font:inherit; font-size:13px; letter-spacing:.24em; text-transform:uppercase;
  color:#f6e2a8; cursor:pointer;
  background:linear-gradient(180deg, rgba(201,161,74,.20), rgba(201,161,74,.06));
  border:1px solid rgba(205,166,90,.62); border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.5) inset, 0 6px 22px rgba(0,0,0,.45);
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
.cg-draw-btn:hover{
  border-color:rgba(240,217,168,.95);
  box-shadow:0 0 26px rgba(201,161,74,.34), 0 0 0 1px rgba(0,0,0,.5) inset;
  transform:translateY(-1px);
}

/* 卡面右下角的稀有度點 */
.cg-tile-rarity{
  position:absolute; right:6px; bottom:6px; z-index:4;
  width:9px; height:9px; border-radius:50%;
  /* 顏色由 .r-<tier> 的 color 決定；這裡一定要自己吃 currentColor，
     不然只畫出一圈黑框，在灰階卡面等於看不見。 */
  background:currentColor;
  border:1px solid rgba(0,0,0,.7);
  box-shadow:0 0 7px currentColor, 0 1px 2px rgba(0,0,0,.8);
  opacity:.95;
}

/* 神話級 384 格裡只有 6 格，點要一眼看得出來跟史詩不同：
   做大一點、帶一圈亮環。 */
.cg-tile-rarity.r-mythic{
  width:12px; height:12px; right:5px; bottom:5px;
  background:radial-gradient(circle at 50% 38%, #fffdf2, #f3e0a4 46%, #a17b2c 100%);
  border-color:rgba(255,248,224,.75);
  box-shadow:0 0 12px rgba(243,224,164,.95), 0 0 0 2px rgba(243,224,164,.28), 0 1px 2px rgba(0,0,0,.8);
}

.cg-tile-rarity.r-epic{
  box-shadow:0 0 9px rgba(217,164,65,.9), 0 1px 2px rgba(0,0,0,.8);
}

/* 抽到重複的張數（×N）掛在左下角 */
.cg-tile-count{
  position:absolute; left:6px; bottom:6px; z-index:4;
  padding:1px 6px; border-radius:2px;
  font-family:"Times New Roman",Georgia,serif;
  font-size:11px; line-height:1.5; letter-spacing:.04em;
  color:#f6e2a8; background:rgba(0,0,0,.72);
  border:1px solid rgba(205,166,90,.5);
  pointer-events:none;
}

/* 放大視窗裡的稀有度一行 */
.cg-rarity{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:8px; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}
/* display:inline-flex 的優先序高於 [hidden] 的 UA 規則，要自己補一條才藏得住 */
.cg-rarity[hidden]{display:none;}
.cg-rarity i{width:8px; height:8px; border-radius:50%; box-shadow:0 0 8px currentColor; background:currentColor;}
.cg-rarity b{font-weight:400;}
.cg-rarity span{opacity:.62; font-size:10px; letter-spacing:.12em;}

/* 四級共用色票：--rc 是這一級的主色 */
.r-common{--rc:#7d8a93; color:#7d8a93;}
.r-rare{--rc:#5fb2c8; color:#5fb2c8;}
.r-epic{--rc:#d9a441; color:#d9a441;}
.r-mythic{--rc:#f3e0a4; color:#f3e0a4;}

/* ---------- 覆蓋層 ---------- */
.cg-gacha{
  /* 【補 415】2026-09-23 使用者指示：抽卡不要全螢幕覆蓋，做成 1200 寬的浮動面板
     （跟主站帶寬、其他報告頁一致）；內容不多的時候面板就矮，不要硬撐滿整個視窗。
     置中用 left/top 50% ＋ transform，cgShake 的 keyframes 也一起把那組位移帶回去。 */
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:30000;
  width:min(1200px, calc(100vw - 20px));
  min-height:min(620px, calc(100vh - 20px));
  max-height:calc(100vh - 20px);
  overflow:auto;
  display:flex; align-items:center; justify-content:center;
  color:#efd9a8;
  background:radial-gradient(125% 95% at 50% 42%, rgba(34,25,12,.96), rgba(3,3,4,.988) 72%);
  border:1px solid rgba(205,166,90,.18);
  box-shadow:0 26px 90px rgba(0,0,0,.72);
  opacity:0; pointer-events:none; transition:opacity .5s ease;
  /* 【補 404】牌的寬度由視窗高度反推：收卡那一幕是「兩列牌 ＋ 摘要」，
     兩列牌高 ＝ 2.8 × 牌寬，摘要約 240px。視窗矮（筆電 768）時自動縮牌，
     才不會把最上面一排牌切掉；視窗高時就固定在上限 158px。 */
  --cg-cardw:clamp(110px, calc((100vh - 460px) / 2.8), 158px);
}
.cg-gacha.is-open{opacity:1; pointer-events:auto;}
.cg-gacha[hidden]{display:none;}
.cg-gacha-canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
.cg-gacha-close{
  position:absolute; top:16px; right:20px; z-index:8;
  width:44px; height:44px; line-height:1;
  font:inherit; font-size:26px; color:#c9a14a; cursor:pointer;
  background:transparent; border:1px solid rgba(205,166,90,.34); border-radius:50%;
  transition:color .2s, border-color .2s;
}
.cg-gacha-close:hover{color:#f6e2a8; border-color:rgba(240,217,168,.8);}

/* 【補 416】面板左上角那行「本次 −24 分 · 餘額 456 分」。 */
.cg-gacha-spend{
  position:absolute; left:24px; top:22px; z-index:8; margin:0;
  padding:8px 16px; font-size:15px; letter-spacing:.07em;
  color:#efd58b; background:rgba(10,8,5,.72);
  border:1px solid rgba(205,166,90,.28); border-radius:2px;
  white-space:nowrap; pointer-events:none; font-variant-numeric:tabular-nums;
}
.cg-gacha-spend[hidden]{display:none;}

.cg-gacha-act{
  position:absolute; inset:0;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; padding:5vh 28px; text-align:center;
  /* 【補 415】面板本身就是 1200 寬（見 .cg-gacha），左右留白固定 28px。
     以前那組 max(5vw, calc((100% - 1200px)/2)) 是以「覆蓋整頁」為前提寫的。 */
}
.cg-gacha-act.is-on{display:flex; animation:cgFade .5s ease both;}
@keyframes cgFade{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

/* ---------- 幕五：收卡 ---------- */
/* 【補 404】2026-09-23 使用者指示：抽完的牌要停在畫面上，下方才出現 COLLECTED…。
   以前幕五會把幕四整個關掉，牌只閃一秒就不見了。
   做法：幕五開啟時 #cgGacha 改成兩列 grid（上面放牌陣、下面放摘要），
   兩列都在文件流裡，視窗變矮時摘要會被推到下面而不是疊在牌上。 */
.cg-gacha.is-summary{
  display:grid;
  /* 一定要指定單一彈性欄：不寫的話隱式欄是 auto＝max-content，
     兩幕會被縮成內容寬（實測 784px），1200 帶就量不準。 */
  grid-template-columns:minmax(0,1fr);
  /* 【補 415】兩列都用 auto（＝內容高），面板就貼著「牌 ＋ 摘要」長高，
     摘要在牌的正下方；以前第二列是 minmax(0,1fr)，那是在填滿整個視窗，
     所以摘要被推到螢幕最底。min-height 也在這一幕關掉，面板才縮得到內容高。 */
  grid-template-rows:auto auto;
  align-items:center;
  align-content:center;
  min-height:0;
}
.cg-gacha.is-summary #cgActReveal{
  position:relative; inset:auto;
  padding-top:1.6vh; padding-bottom:0;
}
.cg-gacha.is-summary #cgActSummary{
  position:relative; inset:auto;
  padding-top:18px; padding-bottom:26px;
  gap:14px;
}

.cg-gacha-kicker{font-size:14px; letter-spacing:.34em; text-transform:uppercase; color:#c9a14a; opacity:.85;}
.cg-gacha-title{font-size:clamp(26px,3vw,38px); letter-spacing:.18em; color:#f6e2a8; margin:0;}
.cg-gacha-sub{margin:0; font-size:17px; line-height:1.85; color:#bfae8a; max-width:46ch;}
.cg-gacha-hint{margin:0; font-size:15px; letter-spacing:.09em; color:#8d7f63; min-height:1.5em;}

/* ---------- 幕零：選單抽／卡包 ---------- */
.cg-gacha-menu{display:flex; gap:22px; flex-wrap:wrap; justify-content:center;}
.cg-gacha-card{
  min-width:270px; padding:26px 32px;
  background:linear-gradient(180deg, rgba(201,161,74,.10), rgba(0,0,0,.25));
  border:1px solid rgba(205,166,90,.42); border-radius:3px;
  cursor:pointer; font:inherit; color:#efd9a8;
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.cg-gacha-card:hover{border-color:rgba(240,217,168,.9); transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.5);}
.cg-gacha-card b{display:block; font-size:20px; letter-spacing:.12em; margin-bottom:10px;}
.cg-gacha-card i{display:block; font-style:normal; font-size:16px; color:#c9a14a; letter-spacing:.09em;}
.cg-gacha-card u{display:block; margin-top:12px; text-decoration:none; font-size:14px; color:#8d7f63; letter-spacing:.07em;}
/* 【補 416】價值對照：單抽 2 分 vs 點菜 50 分，不寫出來沒人知道差多少。 */
.cg-gacha-card u.cg-gacha-value{color:#c9a14a; opacity:.92;}
/* 【補 427】卡包那張卡的優惠提示（多送 2 抽）：用綠字，跟其他灰字說明分開。 */
.cg-gacha-card u.cg-gacha-bonus{color:#8fd08a; font-size:15px; font-weight:600; letter-spacing:.08em;}

/* ---------- 幕一：請卦（按住卡包） ---------- */
.cg-gacha-pack{
  position:relative; width:190px; height:266px;
  background:none; border:0; padding:0; cursor:pointer;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.7));
  transition:transform .3s ease;
}
.cg-gacha-pack .cg-gacha-pack-art{
  width:100%; height:100%; display:block;
  transform:translateY(0);
  transition:transform .4s ease, filter .4s ease;
}
.cg-gacha-pack.is-holding{transform:scale(1.035);}
.cg-gacha-pack.is-holding .cg-gacha-pack-art{filter:drop-shadow(0 0 26px rgba(240,217,168,.55));}
.cg-gacha-pack.is-ready .cg-gacha-pack-art{animation:cgPackPulse 1.5s ease-in-out infinite;}
@keyframes cgPackPulse{0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-6px) scale(1.02);}}
.cg-gacha-ring{
  position:absolute; inset:-22px; border-radius:50%;
  background:conic-gradient(rgba(240,217,168,.95) calc(var(--p,0) * 1turn), rgba(255,255,255,.07) 0);
  -webkit-mask:radial-gradient(closest-side, transparent 74%, #000 76%);
          mask:radial-gradient(closest-side, transparent 74%, #000 76%);
  opacity:0; transition:opacity .3s;
}
.cg-gacha-pack.is-holding .cg-gacha-ring{opacity:1;}

/* ---------- 幕二：洗牌 ---------- */
.cg-gacha-shuffle{position:relative; width:min(560px,80vw); height:min(360px,42vh);}
.cg-gacha-shuffle i{
  position:absolute; left:50%; top:50%; width:44px; height:64px; margin:-32px 0 0 -22px;
  border:1px solid rgba(205,166,90,.55); border-radius:3px;
  background:linear-gradient(150deg, rgba(60,44,20,.9), rgba(14,11,7,.95));
  box-shadow:0 0 12px rgba(0,0,0,.6) inset;
}

/* ---------- 幕三／四：牌陣 ---------- */
/* 【補 404】2026-09-23 使用者指示：抽卡這一頁的寬度就做成 1200，
   跟主站帶寬對齊（以前是 1080，跟背後的收藏館格子對不上）。
   七欄 1200 − 六道 16px 間隙 ＝ 每格 157.7px，牌順著長大，
   整排剛好填滿 1200，不再只是把間隙撐開。 */
.cg-gacha-deck{
  display:grid;
  /* 【補 426】字級放大後，牌下面的名字（.cg-gcard-name，掛在牌外 −22px）在
     兩列牌陣（卡包 14 張）會被下一列的牌蓋掉，所以列距另外給一段較大的值。
     單列（單抽）時這一段不影響任何東西。 */
  column-gap:clamp(8px,1.1vw,16px); row-gap:clamp(26px,2.4vw,34px);
  grid-template-columns:repeat(7, minmax(0,1fr));
  /* 七欄的總寬跟著牌寬走，牌縮小時間隙不會被撐開（見 .cg-gacha 的 --cg-cardw）。 */
  /* 【補 415】面板 1200 − 左右各 28px 內距 ＝ 1144，牌陣就以它為上限。 */
  width:min(1200px, 100%, calc(var(--cg-cardw) * 7 + 96px));
  justify-items:center;
}
/* 單抽只擺一張。這裡不能寫 minmax(0,1fr)：外層是 align-items:center 的 flex，
   width:auto 會讓容器縮到 max-content，1fr 的軌道就跟著塌成 0，
   牌是有渲染、但寬度 0 → 使用者看到空的、也點不到。給定寬度軌道才穩。 */
.cg-gacha-deck.is-single{grid-template-columns:minmax(0,var(--cg-cardw)); width:auto;}
.cg-gcard{
  position:relative; width:100%; max-width:var(--cg-cardw); aspect-ratio:5 / 7;
  padding:0; border:0; background:none; cursor:pointer;
  perspective:900px;
  opacity:0; transform:translateY(26px) rotate(-2deg);
  animation:cgDeal .55s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes cgDeal{to{opacity:1; transform:none;}}
.cg-gcard-inner{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transition:transform .62s cubic-bezier(.4,.15,.2,1);
}
.cg-gcard.is-flipped .cg-gcard-inner{transform:rotateY(180deg);}
.cg-gcard-face,
.cg-gcard-back{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:4px; overflow:hidden;
  border:1px solid rgba(205,166,90,.45);
}
.cg-gcard-back{
  background:
    radial-gradient(60% 45% at 50% 42%, rgba(201,161,74,.30), transparent 70%),
    linear-gradient(150deg, rgba(48,35,16,.95), rgba(10,8,6,.98));
  box-shadow:0 0 14px rgba(0,0,0,.65) inset;
}
.cg-gcard-back::after{
  content:""; position:absolute; inset:8px; border:1px solid rgba(205,166,90,.24); border-radius:2px;
}
.cg-gcard-face{
  transform:rotateY(180deg);
  background:#0b0906;
  border-color:var(--rc, rgba(205,166,90,.45));
  box-shadow:0 0 22px -6px var(--rc, rgba(201,161,74,.5));
}
.cg-gcard-face img{width:100%; height:100%; object-fit:cover; display:block;}
.cg-gcard.is-unflipped:hover .cg-gcard-inner{transform:translateY(-6px);}
.cg-gcard:disabled{cursor:default;}
.cg-gcard-name{
  /* 【補 426】左右各吃 8px 的欄間隙：字級 10 → 12 之後，英文長名字（最長的 44 字元）
     更容易被截成「…」，放寬可用寬度可以把多數名字救回來。 */
  position:absolute; left:-8px; right:-8px; bottom:-22px;
  font-size:12px; letter-spacing:.05em; color:#bfae8a; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; transition:opacity .3s;
}
.cg-gcard.is-flipped .cg-gcard-name{opacity:1;}
.cg-gcard-tag{
  position:absolute; top:-11px; left:-5px; z-index:3;
  padding:3px 8px; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  border-radius:2px; opacity:0; transform:translateY(4px); transition:opacity .3s, transform .3s;
}
.cg-gcard.is-flipped .cg-gcard-tag{opacity:1; transform:none;}
.cg-gcard-tag.is-new{background:var(--rc); color:#120e07;}
.cg-gcard-tag.is-dup{background:rgba(0,0,0,.8); color:#9a8b6d; border:1px solid rgba(205,166,90,.4);}

/* 史詩／神話的翻牌演出 */
.cg-gcard.is-epic.is-flipped .cg-gcard-face{animation:cgGlowEpic 1.2s ease-out;}
.cg-gcard.is-mythic.is-flipped .cg-gcard-face{animation:cgGlowMythic 1.6s ease-out;}
@keyframes cgGlowEpic{
  0%{box-shadow:0 0 0 0 rgba(217,164,65,0);} 35%{box-shadow:0 0 42px 6px rgba(217,164,65,.72);} 100%{box-shadow:0 0 22px -6px rgba(217,164,65,.5);}
}
@keyframes cgGlowMythic{
  0%{box-shadow:0 0 0 0 rgba(243,224,164,0);} 25%{box-shadow:0 0 60px 14px rgba(243,224,164,.85);} 60%{box-shadow:0 0 34px 4px rgba(243,224,164,.6);} 100%{box-shadow:0 0 22px -6px rgba(243,224,164,.55);}
}
.cg-gacha.is-shake{animation:cgShake .62s cubic-bezier(.36,.07,.19,.97);}
/* 【補 415】面板靠 transform:translate(-50%,-50%) 置中，抖動動畫要把那組位移一起帶著，
   不然一抖就跳到畫面左上角。 */
@keyframes cgShake{
  10%,90%{transform:translate(calc(-50% - 2px), -50%);} 20%,80%{transform:translate(calc(-50% + 4px), -50%);}
  30%,50%,70%{transform:translate(calc(-50% - 7px), -50%);} 40%,60%{transform:translate(calc(-50% + 7px), -50%);}
}

/* 稀有度公佈（翻到 mythic／epic 時中央浮一行字） */
.cg-gacha-callout{
  position:absolute; left:50%; top:12vh; transform:translateX(-50%);
  font-size:clamp(18px,2vw,26px); letter-spacing:.4em; text-transform:uppercase;
  color:var(--rc,#f6e2a8); text-shadow:0 0 26px currentColor;
  opacity:0; pointer-events:none;
}
.cg-gacha-callout.is-on{animation:cgCallout 2s ease-out;}
@keyframes cgCallout{0%{opacity:0; letter-spacing:.9em;} 18%{opacity:1;} 70%{opacity:1; letter-spacing:.4em;} 100%{opacity:0;}}

/* ---------- 幕五：收卡 ---------- */
.cg-gacha-summary{display:flex; flex-direction:column; align-items:center; gap:18px;}
.cg-gacha-score{display:flex; gap:26px; flex-wrap:wrap; justify-content:center;}
.cg-gacha-score div{min-width:126px;}
.cg-gacha-score b{display:block; font-size:42px; color:#f6e2a8; letter-spacing:.06em;}
.cg-gacha-score span{display:block; margin-top:8px; font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:#8d7f63;}
/* 【補 416】收卡時的結算行：這次花了多少、用點菜價算是多少、省下多少。
   【補 426】字級放大後這一行會折成兩行，句尾的「·」會孤零零掉到第二行開頭。
   結算行現在由 card-gallery.js 拆成兩個 inline-block 段（分數句／餘額句），
   換行只會發生在兩段之間；段內的「·」用 nbsp 綁在前一個字上。 */
.cg-gacha-pay{
  margin:0; font-size:15.5px; letter-spacing:.07em; line-height:1.85;
  color:#bfae8a; text-align:center; max-width:84ch;
}
.cg-gacha-pay .cg-pay-seg{display:inline-block;}
.cg-gacha-again{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:10px;}
.cg-gacha-btn{
  padding:13px 30px; font:inherit; font-size:15px; letter-spacing:.16em; text-transform:uppercase;
  color:#efd9a8; cursor:pointer; background:transparent;
  border:1px solid rgba(205,166,90,.55); border-radius:2px;
  transition:border-color .22s, color .22s, background .22s;
}
.cg-gacha-btn:hover{border-color:rgba(240,217,168,.95); color:#f6e2a8; background:rgba(201,161,74,.10);}
.cg-gacha-btn.is-solid{background:linear-gradient(180deg, rgba(201,161,74,.22), rgba(201,161,74,.06));}

@media (max-width:900px){
  .cg-gacha-deck{grid-template-columns:repeat(5, minmax(0,1fr));}
}
@media (max-width:600px){
  .cg-gacha-deck{grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px;}
  .cg-gacha-card{min-width:0; width:100%;}
}