/* 卡池（public/js/gacha.js）：全螢幕畫面 .gc-view。伯利恆的夜空（藍）＋奶油色紙卡＋暖金，安靜不刺眼。
   手機直式 375×812 與桌機都要好讀：單欄 → 桌機兩欄（橫幅｜保底與抽卡按鈕）。按鈕至少 44px 高。
   稀有度的顏色：★5 金 #e9b949、★4 紫 #b48be0、★3 藍 #6fb6e8、★2 綠 #9fc98a。
   ★5 的揭曉只用柔和的暖光，不放彩帶、閃爍、爆炸效果；prefers-reduced-motion 時不做任何動畫。 */

.gc-view {
  --g5: #e9b949; --g5-deep: #b8861f; --g5-soft: #fff3cf;
  --g4: #b48be0; --g4-deep: #7e58b0; --g4-soft: #f1e8fc;
  --g3: #6fb6e8; --g3-deep: #3d82b8; --g3-soft: #e4f2fc;
  --g2: #9fc98a; --g2-deep: #5f9a4b; --g2-soft: #eef7e6;
  --night: #262c64;
  position: fixed; inset: 0; z-index: 24; overflow: hidden; color: var(--ink);
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, .9), transparent 60%),
    radial-gradient(1.2px 1.2px at 78% 12%, rgba(255, 255, 255, .8), transparent 60%),
    radial-gradient(1.8px 1.8px at 64% 34%, rgba(255, 244, 200, .9), transparent 60%),
    radial-gradient(1.2px 1.2px at 30% 52%, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(1.4px 1.4px at 90% 70%, rgba(255, 255, 255, .8), transparent 60%),
    radial-gradient(1.2px 1.2px at 8% 84%, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(1.3px 1.3px at 46% 8%, rgba(255, 255, 255, .8), transparent 60%),
    radial-gradient(60% 40% at 78% 0%, rgba(255, 226, 150, .22), transparent 70%),
    radial-gradient(120% 70% at 50% 0%, #4a54a3 0%, #2f3672 45%, #1f2452 100%);
  animation: gc-in .2s;
}
.gc-view[hidden] { display: none; }
body.in-gacha #phoneButton, body.in-gacha .tray, body.in-gacha .broom-btn, body.in-gacha .job-chip, body.in-gacha .sv-chip { visibility: hidden; }
.gc-hub-layer, .gc-hub { position: absolute; inset: 0; }
.gc-view .btn { color: var(--ink); }
.gc-view .btn:disabled { color: #b3a48c; }
.gc-hub { inset: var(--safe-t) 0 var(--safe-b); display: flex; flex-direction: column; min-height: 0; }

/* ---------- 上方：標題、錢包、關閉 ---------- */
.gc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px 4px; color: #fff; }
.gc-top-ic { width: 40px; height: 40px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3)); }
.gc-top-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.gc-top-title b { font-size: 19px; letter-spacing: .5px; }
.gc-top-title span { font-size: 12.5px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-wallet { order: 3; flex: 1 1 100%; display: flex; gap: 6px; justify-content: flex-start; }
.gc-coin {
  display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 3px 10px 3px 6px;
  border: 0; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font: inherit; font-size: 14.5px;
  font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18);
}
.gc-coin b { font-weight: 700; }
button.gc-coin { cursor: pointer; }
button.gc-coin:active { transform: scale(.97); }
.gc-plus { display: grid; place-items: center; width: 20px; height: 20px; margin-left: 2px; border-radius: 50%; background: var(--sun); color: #5a4210; font-weight: 700; font-size: 15px; line-height: 1; }
.gc-coin-ic { width: 22px; height: 22px; object-fit: contain; }
.gc-star-glyph { font-style: normal; color: #ffe39a; text-shadow: 0 0 6px rgba(255, 227, 154, .7); }
.gc-coin.star .gc-star-glyph { width: 22px; text-align: center; font-size: 17px; }
.gc-x {
  width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; background: #fff; color: var(--ink);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .25); font-size: 18px; font-weight: 700; cursor: pointer;
}
.gc-x.small { width: 34px; height: 34px; font-size: 14px; box-shadow: 0 2px 0 var(--line); }
@media (min-width: 720px) {
  .gc-wallet { order: 0; flex: 0 1 auto; }
}

/* 抽卡券的小圖（純 CSS：金色票根、深金邊、虛線撕口） */
.gc-tk {
  position: relative; display: inline-block; flex: none; width: 22px; height: 15px; border-radius: 3px; vertical-align: -2px;
  background: linear-gradient(160deg, #fff0b8, #f0c454); box-shadow: inset 0 0 0 1.5px #a8781a;
}
.gc-tk::after { content: ''; position: absolute; top: 2px; bottom: 2px; right: 6px; border-left: 1.5px dashed #a8781a; }

/* ---------- 分頁 ---------- */
.gc-tabs { display: flex; gap: 6px; padding: 6px 12px 8px; overflow-x: auto; scrollbar-width: none; }
.gc-tabs::-webkit-scrollbar { display: none; }
.gc-tab {
  position: relative; flex: 1 0 auto; min-width: 64px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 14px;
  background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer;
}
.gc-tab.on { background: var(--paper); color: var(--ink); box-shadow: 0 3px 0 #c9b88f; }
.gc-dot { position: absolute; top: 7px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2px #fff; }
@media (min-width: 720px) { .gc-tabs { max-width: 560px; margin: 0 auto; width: 100%; } }

.gc-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 12px 32px; -webkit-overflow-scrolling: touch; }
.gc-col { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.gc-col.tab-rates, .gc-col.tab-history { max-width: 680px; }
.gc-panel { padding: 12px 14px; background: var(--paper); border-radius: 18px; box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.gc-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.gc-col > .gc-note { color: rgba(255, 255, 255, .78); padding: 0 4px; }
.gc-empty { padding: 36px 18px; text-align: center; color: #fff; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.gc-empty p { margin: 0; opacity: .8; }

/* 小標籤 */
.gc-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; background: var(--paper-2); color: var(--ink-soft); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.gc-tag.ok { background: #e1f4ea; color: #3d8a69; }
.gc-tag.hot { background: #ffe5dc; color: #b4503a; }
.gc-tag.new { background: var(--coral); color: #fff; }
.gc-tag.big { min-height: 36px; padding: 0 16px; font-size: 15px; }
.gc-badge { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: -.02em; line-height: 18px; color: #fff; white-space: nowrap; }
.gc-badge.r5 { background: linear-gradient(160deg, #f4cf6a, var(--g5-deep)); }
.gc-badge.r4 { background: linear-gradient(160deg, #c9a6ef, var(--g4-deep)); }
.gc-badge.r3 { background: linear-gradient(160deg, #94cbf1, var(--g3-deep)); }
.gc-badge.r2 { background: linear-gradient(160deg, #b8dba5, var(--g2-deep)); }

/* ---------- 抽卡頁 ---------- */
.gc-col.tab-draw { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) {
  .gc-col.tab-draw { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); grid-template-areas: "banner side" "lineup side" "note side"; align-items: start; }
  .gc-col.tab-draw > .gc-banner { grid-area: banner; }
  .gc-col.tab-draw > .gc-side { grid-area: side; }
  .gc-col.tab-draw > .gc-lineup { grid-area: lineup; }
  .gc-col.tab-draw > .gc-note { grid-area: note; }
}

/* 大獎橫幅 */
.gc-banner {
  position: relative; overflow: hidden; border-radius: 22px; aspect-ratio: 2 / 1; min-height: 180px;
  background: var(--night); box-shadow: 0 4px 0 rgba(0, 0, 0, .28), inset 0 0 0 2px rgba(255, 226, 150, .35);
}
.gc-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }
.gc-banner-sky { position: absolute; inset: 0; background: radial-gradient(circle at 70% 20%, rgba(255, 236, 170, .55), transparent 34%), linear-gradient(170deg, #2f3a78, #4a5aa8 55%, #8c7fb8); }
.gc-bstar { position: absolute; top: 14%; left: 62%; width: 40px; height: 40px; background: #ffe9a6; clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); filter: drop-shadow(0 0 10px rgba(255, 230, 150, .9)); }
.gc-banner::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(20, 24, 66, .78) 0%, rgba(20, 24, 66, .45) 34%, transparent 58%), linear-gradient(0deg, rgba(20, 24, 66, .55), transparent 40%); }
.gc-banner-text { position: absolute; z-index: 1; left: 16px; bottom: 14px; max-width: 56%; display: flex; flex-direction: column; gap: 3px; color: #fffaf0; }
.gc-banner-sub { font-size: 13px; letter-spacing: .14em; color: #ffe39a; }
.gc-banner-text h2 { margin: 0; font-size: clamp(26px, 4.4vw, 40px); line-height: 1.12; letter-spacing: .04em; text-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 0 18px rgba(255, 226, 150, .35); }
.gc-banner-grand { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; }
.gc-banner-grand b { font-size: 17px; }
.gc-banner-grand > span:last-child { opacity: .85; }
.gc-banner-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.gc-dates { font-size: 12.5px; opacity: .9; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .gc-banner { aspect-ratio: auto; height: 236px; }
  .gc-banner-img { object-position: 60% 20%; }
  .gc-banner-text { max-width: 70%; left: 12px; bottom: 10px; }
  .gc-banner::after { background: linear-gradient(0deg, rgba(20, 24, 66, .88) 0%, rgba(20, 24, 66, .45) 45%, transparent 70%); }
}

.gc-side { display: flex; flex-direction: column; gap: 12px; }

/* 保底進度 */
.gc-pity { padding: 12px 14px 10px; background: var(--paper); border-radius: 20px; box-shadow: 0 3px 0 rgba(0, 0, 0, .2); display: flex; flex-direction: column; gap: 6px; }
.gc-pity-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gc-pity-head b { font-size: 15px; }
.gc-pity-num { color: var(--ink-soft); font-size: 13px; font-variant-numeric: tabular-nums; }
.gc-meter { position: relative; height: 16px; margin-right: 12px; border-radius: 999px; background: #efe5c9; box-shadow: inset 0 2px 0 rgba(120, 90, 40, .12); }
.gc-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; min-width: 16px; border-radius: 999px; background: linear-gradient(90deg, #f6dc8c, var(--g5) 70%, #f0c45a); box-shadow: 0 0 10px rgba(233, 185, 73, .55); transition: width .6s ease; }
.gc-meter-goal { position: absolute; right: -13px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff6d6, var(--g5)); color: #fff; font-style: normal; font-size: 15px; text-shadow: 0 1px 0 rgba(150, 100, 10, .5); box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(233, 185, 73, .7); }
.gc-pity-text { margin: 2px 0 0; font-size: 14px; }
.gc-pity-text b { font-size: 18px; color: var(--g5-deep); font-variant-numeric: tabular-nums; }
.gc-pips-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.gc-pips { display: flex; gap: 4px; }
.gc-pip { width: 14px; height: 14px; border-radius: 4px; background: #ece2f7; box-shadow: inset 0 0 0 1.5px #d8c6ee; transform: rotate(45deg) scale(.82); }
.gc-pip.on { background: linear-gradient(160deg, #d4b8f3, var(--g4)); box-shadow: 0 0 6px rgba(180, 139, 224, .6); }
.gc-pips-text { font-size: 12.5px; color: var(--g4-deep); }
.gc-pity-sub { margin: 0; font-size: 12px; color: var(--ink-soft); }

/* 抽卡按鈕 */
.gc-actions { display: flex; flex-direction: column; gap: 10px; }
.gc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gc-draw-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 84px; padding: 14px 8px 10px; border: 0; border-radius: 22px; font: inherit; cursor: pointer;
  background: linear-gradient(180deg, #fffaf0, #f4e6c2); color: var(--ink); box-shadow: 0 5px 0 #c9ad6c, inset 0 0 0 2px rgba(255, 255, 255, .6);
  transition: transform .08s;
}
.gc-draw-btn b { font-size: 21px; letter-spacing: .04em; }
.gc-draw-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #c9ad6c; }
.gc-draw-btn.ten { background: linear-gradient(180deg, #ffe7a0, var(--g5)); color: #4a3612; box-shadow: 0 5px 0 var(--g5-deep), inset 0 0 0 2px rgba(255, 255, 255, .45); }
.gc-draw-btn.ten:active:not(:disabled) { box-shadow: 0 2px 0 var(--g5-deep); }
.gc-draw-btn.free { background: linear-gradient(180deg, #c7f0de, var(--mint)); color: #23523f; box-shadow: 0 5px 0 #4f9f86, 0 0 0 3px rgba(255, 255, 255, .75), 0 0 22px rgba(127, 208, 184, .75); animation: gc-breathe 2.4s ease-in-out infinite; }
.gc-draw-btn:disabled { opacity: .5; cursor: default; animation: none; }
.gc-cost { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; opacity: .85; font-variant-numeric: tabular-nums; }
.gc-ribbon { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.gc-ribbon.soft { background: var(--g4-deep); }
.gc-ratebar { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: 18px; background: rgba(255, 255, 255, .1); color: #fff; border: 0; font: inherit; text-align: left; cursor: pointer; }
.gc-ratebar-head { display: flex; justify-content: space-between; font-size: 13.5px; }
.gc-ratebar-head span { opacity: .75; font-size: 12.5px; }
.gc-ratebar-track { display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px; }
.gc-ratebar-track i { display: block; height: 100%; }
.gc-ratebar-track .r5 { background: var(--g5); } .gc-ratebar-track .r4 { background: var(--g4); } .gc-ratebar-track .r3 { background: var(--g3); } .gc-ratebar-track .r2 { background: var(--g2); }
.gc-ratebar-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.gc-ratebar-legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: var(--c); }
.gc-closed { margin: 0; text-align: center; color: #ffe39a; font-size: 13.5px; }
.gc-tkline { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 14px; }
.gc-tkline-have { display: inline-flex; align-items: center; gap: 6px; }
.gc-tkline .btn.small { min-height: 36px; }

/* 收藏卡（抽卡頁的「這一檔的人物」與角色頁） */
.gc-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 4px 8px; color: #fff; }
.gc-sec-head b { font-size: 15.5px; }
.gc-sec-head span { font-size: 12.5px; opacity: .8; }
.gc-lineup-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 520px) { .gc-lineup-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gc-cc {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: pointer;
  font: inherit; color: #fff; background: #2a3170; box-shadow: 0 3px 0 rgba(0, 0, 0, .3), inset 0 0 0 3px var(--rc, #fff);
  transition: transform .12s;
}
.gc-cc.r5 { --rc: var(--g5); } .gc-cc.r4 { --rc: var(--g4); } .gc-cc.r3 { --rc: var(--g3); }
.gc-cc:hover { transform: translateY(-2px); }
.gc-cc:active { transform: scale(.97); }
.gc-cc-art { position: absolute; inset: 0; display: grid; place-items: end center; }
.gc-cc-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.gc-cc-sil { width: 78%; height: 86%; object-fit: contain; object-position: 50% 100%; filter: brightness(0) invert(1); opacity: .18; }
.gc-cc.missing { background: radial-gradient(circle at 50% 30%, #3b4590, #20265a 75%); box-shadow: 0 3px 0 rgba(0, 0, 0, .3), inset 0 0 0 2px rgba(255, 255, 255, .22); }
.gc-cc.missing::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--rc); opacity: .5; }
.gc-cc.have::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--rc); }
.gc-cc.have.r5 { box-shadow: 0 3px 0 rgba(0, 0, 0, .3), 0 0 16px rgba(233, 185, 73, .55); }
.gc-cc-stars { position: absolute; z-index: 2; top: 6px; left: 50%; transform: translateX(-50%); padding: 0 6px; border-radius: 999px; background: rgba(30, 30, 60, .55); color: #ffe39a; font-size: 10px; letter-spacing: -.06em; line-height: 16px; white-space: nowrap; }
.gc-cc.r4 .gc-cc-stars { color: #e4d0fb; } .gc-cc.r3 .gc-cc-stars { color: #cfe8fb; }
.gc-cc-q { position: absolute; z-index: 2; top: 40%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; font-weight: 700; color: rgba(255, 255, 255, .5); }
.gc-cc-name { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 14px 4px 6px; font-size: 13px; font-weight: 700; text-align: center; background: linear-gradient(transparent, rgba(20, 22, 60, .85)); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-cc.missing .gc-cc-name { color: rgba(255, 255, 255, .7); }
.gc-cc-using { position: absolute; z-index: 2; top: 26px; right: 4px; padding: 0 6px; border-radius: 999px; background: var(--mint); color: #23523f; font-size: 10.5px; font-weight: 700; line-height: 17px; }
.gc-cc.mini .gc-cc-name { font-size: 12px; }

/* 角色頁 */
.gc-album-head { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .1); color: #fff; }
.gc-album-head .gc-note { color: rgba(255, 255, 255, .8); }
.gc-album-count { display: flex; align-items: baseline; gap: 8px; }
.gc-album-count b { font-size: 24px; color: #ffe39a; font-variant-numeric: tabular-nums; }
.gc-album-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.gc-album-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f6dc8c, var(--g5)); }
.gc-album { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .gc-album { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.gc-album .gc-cc-name { font-size: 14.5px; padding-bottom: 8px; }
.gc-album .gc-cc-stars { font-size: 11.5px; line-height: 18px; }
.gc-starbox { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: #f4f1fb; box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.gc-starbox.small { box-shadow: none; }
.gc-starbox-main { flex: 1; min-width: 0; }
.gc-starbox-main b { font-size: 15.5px; }
.gc-starbox-main .gc-star-glyph { color: var(--g4-deep); text-shadow: none; }
.gc-starbox-main p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }

/* 機率 */
.gc-rules b { font-size: 15.5px; }
.gc-rules p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.gc-rates { display: flex; flex-direction: column; gap: 10px; }
.gc-rate { padding: 10px 14px 12px; background: var(--paper); border-radius: 18px; box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.gc-rate.r5 { background: linear-gradient(160deg, #fffaf0, var(--g5-soft)); box-shadow: 0 3px 0 rgba(0, 0, 0, .2), inset 0 0 0 2px var(--g5); }
.gc-rate-head { display: flex; align-items: center; gap: 8px; }
.gc-rate-total { margin-left: auto; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gc-rate-list { display: grid; grid-template-columns: 1fr; gap: 2px; margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
@media (min-width: 560px) { .gc-rate-list { grid-template-columns: 1fr 1fr; column-gap: 20px; } }
.gc-rate-item { display: flex; justify-content: space-between; gap: 8px; font-variant-numeric: tabular-nums; border-bottom: 1px dashed var(--line); padding: 2px 0; }

/* 紀錄 */
.gc-hist-list { display: flex; flex-direction: column; gap: 10px; }
.gc-hist-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.gc-hist-time { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.gc-hist { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.gc-hist-item { padding: 0 8px; background: var(--paper-2); border-radius: 9px; font-size: 12.5px; line-height: 22px; }
.gc-hist-item.r5 { background: #fff0c4; color: #8a6514; font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--g5); }
.gc-hist-item.r4 { background: var(--g4-soft); color: #6f4e9e; }
.gc-hist-item.r3 { background: var(--g3-soft); color: #3d79a8; }

/* ---------- 小視窗 ---------- */
.gc-sheet-layer { position: absolute; inset: 0; z-index: 5; }
.gc-sheet-layer[hidden] { display: none; }
.gc-sheet-bg { position: absolute; inset: 0; display: grid; place-items: center; padding: calc(12px + var(--safe-t)) 12px calc(12px + var(--safe-b)); background: rgba(16, 18, 48, .6); animation: gc-in .18s; }
.gc-sheet {
  position: relative; width: min(440px, 100%); max-height: 100%; overflow-y: auto; padding: 18px 18px 16px; border-radius: 26px;
  background: var(--paper); box-shadow: 0 10px 40px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 10px; animation: gc-pop .22s ease both;
}
.gc-sheet.char { width: min(760px, 100%); }
.gc-sheet > .gc-x { position: absolute; top: 10px; right: 10px; z-index: 3; }
.gc-sheet h3 { margin: 0; font-size: 20px; }

/* 角色卡說明 */
.gc-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 640px) { .gc-detail { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; } }
.gc-detail-art { position: relative; justify-self: center; width: min(100%, 300px); aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; background: #2a3170; box-shadow: 0 4px 0 rgba(0, 0, 0, .2), inset 0 0 0 4px var(--rc, #fff); }
@media (max-width: 639px) { .gc-detail-art { width: min(62vw, 240px); } }
.gc-detail.r5 { --rc: var(--g5); } .gc-detail.r4 { --rc: var(--g4); } .gc-detail.r3 { --rc: var(--g3); }
.gc-detail.r5 .gc-detail-art { box-shadow: 0 0 0 4px var(--g5), 0 0 26px rgba(233, 185, 73, .55); }
.gc-detail.r4 .gc-detail-art { box-shadow: 0 0 0 4px var(--g4), 0 0 20px rgba(180, 139, 224, .45); }
.gc-detail.r3 .gc-detail-art { box-shadow: 0 0 0 4px var(--g3), 0 0 16px rgba(111, 182, 232, .4); }
.gc-detail-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gc-detail.missing .gc-detail-img { filter: grayscale(.75) brightness(.8); }
.gc-detail-flag { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 2px 12px; border-radius: 999px; background: rgba(20, 22, 60, .78); color: #fff; font-size: 12.5px; white-space: nowrap; }
.gc-detail-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gc-detail-text h3 { font-size: 26px; }
.gc-stars-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.gc-detail-title { font-size: 15px; color: var(--ink-soft); }
.gc-verse { margin: 4px 0; padding: 10px 14px; border-left: 4px solid var(--rc, var(--g5)); border-radius: 4px 14px 14px 4px; background: rgba(255, 255, 255, .7); }
.gc-verse p { margin: 0; font-size: 15.5px; line-height: 1.7; }
.gc-verse cite { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; color: var(--ink-soft); }
.gc-blurb { margin: 0; font-size: 14px; line-height: 1.6; }
.gc-title-hint { margin: 0; padding: 6px 10px; border-radius: 12px; background: #fff6d8; color: #8a6514; font-size: 13.5px; line-height: 1.5; }
.gc-detail-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.gc-detail-actions .btn { min-width: 120px; }

/* 買抽卡券 */
.gc-shop-have { margin: 0; color: var(--ink-soft); font-size: 14px; font-variant-numeric: tabular-nums; }
.gc-need { margin: 0; padding: 8px 12px; border-radius: 12px; background: #ffe9e2; color: #b4503a; font-size: 14px; }
.gc-need.ok { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #e1f4ea; color: #3d8a69; }
.gc-shop-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.gc-shop-opt {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 8px 12px; border: 0; border-radius: 20px; cursor: pointer;
  font: inherit; color: var(--ink); background: #fff; box-shadow: 0 4px 0 var(--line), inset 0 0 0 2px var(--line);
}
.gc-shop-opt.ten { background: linear-gradient(180deg, #fffaf0, var(--g5-soft)); box-shadow: 0 4px 0 #e2c77a, inset 0 0 0 2px var(--g5); }
.gc-shop-opt:active:not(:disabled) { transform: translateY(2px); }
.gc-shop-opt:disabled { opacity: .5; cursor: default; }
.gc-shop-tk { display: inline-flex; align-items: center; gap: 6px; }
.gc-shop-tk .gc-tk { width: 34px; height: 22px; }
.gc-shop-tk b { font-size: 22px; }
.gc-shop-price { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- 翻牌 ---------- */
.gc-reveal-layer { position: absolute; inset: 0; z-index: 8; }
.gc-reveal-layer[hidden] { display: none; }
.gc-rv { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: calc(16px + var(--safe-t)) 12px calc(16px + var(--safe-b)); background: radial-gradient(120% 80% at 50% 30%, #2a2f6e, #121433 75%); color: #fff; overflow-y: auto; }
.gc-rv.cards { animation: gc-in .25s ease both; }
.gc-rv.cards, .gc-rv.hero { cursor: pointer; user-select: none; }
.gc-rv-sky { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(70% 50% at 50% 45%, rgba(110, 120, 220, .28), transparent 70%); }
.gc-rv-hint { position: relative; margin: 0; font-size: 13px; opacity: .65; }

/* 卡的大小：十連抽手機 4 張一排（4／4／2），桌機 5 張一排；單抽一張大卡 */
.gc-rv { --cw: min(21vw, 104px); --gap: 8px; }
@media (min-width: 720px) { .gc-rv { --cw: clamp(96px, calc((100dvh - 300px) / 2.7), 156px); --gap: 14px; } }
.gc-rv-grid { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); max-width: calc(var(--cw) * 4 + var(--gap) * 3); }
@media (min-width: 720px) { .gc-rv-grid { max-width: calc(var(--cw) * 5 + var(--gap) * 4); } }
.gc-rv-grid.n1 { --cw: min(62vw, 240px); }
.gc-rv-grid.static.n1 { --cw: min(48vw, 200px); }

.gc-fc { width: var(--cw); aspect-ratio: 3 / 4; perspective: 900px; animation: gc-deal .45s cubic-bezier(.2, .8, .3, 1.1) var(--deal, 0ms) both; }
.gc-fc-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: gc-turn .6s ease-in-out var(--d, 0ms) both; }
.gc-fc-back, .gc-fc-front { position: absolute; inset: 0; border-radius: calc(var(--cw) * .1); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.gc-fc-front { transform: rotateY(180deg); }
/* 卡背：深藍、金邊、伯利恆之星 */
.gc-fc-back {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 233, 166, .35), transparent 38%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 6px, transparent 6px 12px),
    linear-gradient(170deg, #3a4392, #232a66);
  box-shadow: inset 0 0 0 3px #d9b45a, inset 0 0 0 6px #232a66, inset 0 0 0 7px rgba(217, 180, 90, .55);
}
.gc-fc-star { position: absolute; left: 50%; top: 45%; width: 38%; aspect-ratio: 1; transform: translate(-50%, -50%); background: #ffe9a6; clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%); filter: drop-shadow(0 0 6px rgba(255, 230, 150, .9)); }
/* 翻開前的稀有度光（★3 藍、★4 紫、★5 金） */
.gc-fc.r3 .gc-fc-back, .gc-fc.r4 .gc-fc-back, .gc-fc.r5 .gc-fc-back { animation: gc-tease .5s ease-out calc(var(--d, 0ms) - 500ms) both; }
.gc-fc.r3 { --glow: rgba(111, 182, 232, .85); }
.gc-fc.r4 { --glow: rgba(190, 150, 240, .95); }
.gc-fc.r5 { --glow: rgba(255, 214, 120, 1); }
.gc-fc.r3 .gc-fc-front, .gc-fc.r4 .gc-fc-front, .gc-fc.r5 .gc-fc-front { overflow: visible; animation: gc-aura 1.2s ease-out calc(var(--d, 0ms) + 300ms) both; }
.gc-fc-front .gc-face { border-radius: calc(var(--cw) * .1); }
.gc-fc.open, .gc-fc.open .gc-fc-in { animation: none; }
.gc-fc.open { animation: gc-deal .35s ease both; }
.gc-fc.open.r3 { filter: drop-shadow(0 0 8px rgba(111, 182, 232, .7)); }
.gc-fc.open.r4 { filter: drop-shadow(0 0 10px rgba(190, 150, 240, .85)); }
.gc-fc.open.r5 { filter: drop-shadow(0 0 14px rgba(255, 214, 120, .95)); }

/* 卡面 */
.gc-face { position: relative; width: 100%; height: 100%; border-radius: calc(var(--cw) * .1); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 3px var(--rc, #fff); }
.gc-face.r5 { --rc: var(--g5); } .gc-face.r4 { --rc: var(--g4); } .gc-face.r3 { --rc: var(--g3); } .gc-face.r2 { --rc: var(--g2); }
.gc-face::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 3px var(--rc); }
.gc-face-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.gc-face-stars { position: absolute; z-index: 1; top: 5%; left: 50%; transform: translateX(-50%); padding: 0 5px; border-radius: 999px; background: rgba(30, 30, 60, .55); color: #ffe39a; font-size: max(9px, calc(var(--cw) * .085)); letter-spacing: -.06em; line-height: 1.5; white-space: nowrap; }
.gc-face.r4 .gc-face-stars { color: #e4d0fb; } .gc-face.r3 .gc-face-stars { color: #cfe8fb; }
.gc-face.r2 .gc-face-stars { background: transparent; color: var(--g2-deep); }
.gc-face-name { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 16% 4px 7%; text-align: center; font-weight: 700; font-size: max(11px, calc(var(--cw) * .13)); line-height: 1.2; color: #fff; background: linear-gradient(transparent, rgba(20, 22, 60, .85)); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); overflow-wrap: anywhere; }
.gc-face.gift { background: linear-gradient(170deg, #fbfdf6, var(--g2-soft)); }
.gc-face.gift .gc-face-name { color: var(--ink); background: none; text-shadow: none; font-size: max(10.5px, calc(var(--cw) * .11)); padding-bottom: 9%; }
.gc-face-name.small { font-weight: 600; }
.gc-gift-wrap { position: absolute; inset: 14% 15% 30%; display: grid; place-items: center; }
.gc-gift-ic { width: 70%; height: auto; max-height: 100%; object-fit: contain; }
.gc-gift-ic.glyph { width: auto; font-size: calc(var(--cw) * .36); color: var(--g4); text-shadow: 0 0 8px rgba(180, 139, 224, .5); }
.gc-face-flag { position: absolute; z-index: 2; top: 4%; right: 4%; min-width: 22px; padding: 0 5px; border-radius: 999px; background: var(--coral); color: #fff; font-size: max(10px, calc(var(--cw) * .09)); font-weight: 700; line-height: 1.6; text-align: center; box-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.gc-face-flag.soft { background: var(--g4-soft); color: var(--g4-deep); }
.gc-face.char .gc-face-stars { left: 6%; transform: none; }

/* ★4 以上的大卡 */
.gc-light { position: fixed; inset: 0; pointer-events: none; animation: gc-light 1.6s ease-out both; }
.gc-rv.hero.r4 .gc-light { background: radial-gradient(55% 45% at 50% 42%, rgba(205, 178, 236, .55), rgba(126, 88, 176, .18) 55%, transparent 80%); }
/* ★5：柔和的暖光，像馬槽上方的星光；沒有彩帶、沒有閃爍 */
.gc-rv.hero.r5 { background: radial-gradient(120% 80% at 50% 30%, #2c2a58, #15142e 75%); }
.gc-rv.hero.r5 .gc-light { background: radial-gradient(70% 58% at 50% 42%, rgba(255, 248, 226, .92), rgba(250, 224, 156, .55) 36%, rgba(190, 160, 210, .14) 64%, transparent 86%); animation: gc-light 2.4s ease-out both, gc-glowbreath 6s ease-in-out 2.4s infinite; }
.gc-rv-herobox { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(860px, 100%); animation: gc-rise .9s ease-out .2s both; }
@media (min-width: 720px) { .gc-rv-herobox { flex-direction: row; justify-content: center; gap: 28px; } }
.gc-rv-heroart { flex: none; width: min(60vw, 300px); aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 4px var(--g4), 0 0 40px rgba(190, 150, 240, .6); }
@media (max-width: 719px) { .gc-rv-heroart { width: min(56vw, calc((100dvh - 380px) * .75), 260px); min-width: 150px; } }
.gc-rv.hero.r5 .gc-rv-heroart { box-shadow: 0 0 0 4px var(--g5), 0 0 50px rgba(255, 220, 140, .85), 0 0 120px rgba(255, 230, 170, .45); }
.gc-rv-heroimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.gc-rv-herotext { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 420px; padding: 16px 18px; border-radius: 22px; background: rgba(253, 248, 232, .95); color: var(--ink); text-align: center; box-shadow: 0 8px 30px rgba(0, 0, 0, .3); --rc: var(--g4); }
.gc-rv.hero.r5 .gc-rv-herotext { --rc: var(--g5); }
@media (min-width: 720px) { .gc-rv-herotext { align-items: flex-start; text-align: left; } }
.gc-rv-herotext h2 { margin: 0; font-size: 30px; letter-spacing: .04em; }
.gc-rv-herotext .gc-verse { text-align: left; }
.gc-rv-tap { margin-top: 4px; font-size: 12.5px; color: var(--ink-soft); }

/* 結果總覽 */
.gc-rv.summary { justify-content: flex-start; }
.gc-rv-panel { position: relative; margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(900px, 100%); animation: gc-in .3s ease both; }
.gc-rv-panel h3 { margin: 0; font-size: 22px; letter-spacing: .08em; color: #ffe39a; }
.gc-rv-facts { margin: -4px 0 0; font-size: 14px; opacity: .85; }
.gc-rv-note { margin: 0; text-align: center; font-size: 14px; }
.gc-rv-panel .gc-title-hint { text-align: center; }
.gc-rv-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.gc-rv-actions .btn { min-width: 108px; min-height: 46px; }
.gc-rv-actions .btn.ghost { background: rgba(255, 255, 255, .92); }

/* ---------- 動畫 ---------- */
@keyframes gc-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gc-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes gc-deal { from { opacity: 0; transform: translateY(40px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes gc-turn { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
@keyframes gc-tease { from { box-shadow: inset 0 0 0 3px #d9b45a, inset 0 0 0 6px #232a66, 0 0 0 0 transparent; } to { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #232a66, 0 0 26px 6px var(--glow); } }
@keyframes gc-aura { from { box-shadow: 0 0 34px 8px var(--glow); } to { box-shadow: 0 0 14px 2px var(--glow); } }
@keyframes gc-light { from { opacity: 0; } to { opacity: 1; } }
@keyframes gc-glowbreath { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
@keyframes gc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes gc-breathe { 0%, 100% { box-shadow: 0 5px 0 #4f9f86, 0 0 0 3px rgba(255, 255, 255, .75), 0 0 14px rgba(127, 208, 184, .55); } 50% { box-shadow: 0 5px 0 #4f9f86, 0 0 0 3px rgba(255, 255, 255, .75), 0 0 26px rgba(127, 208, 184, .95); } }
@media (prefers-reduced-motion: reduce) {
  .gc-view, .gc-view *, .gc-view *::before, .gc-view *::after { animation: none !important; transition: none !important; }
  .gc-fc-in { transform: rotateY(180deg); }
}

/* 設定 → 角色：卡池角色的頭像外框 */
.avatar-choice.gacha.r5 { box-shadow: inset 0 0 0 2px #e9b949; background: linear-gradient(160deg, #fff8dc, #f3e2a8); }
.avatar-choice.gacha.r4 { box-shadow: inset 0 0 0 2px #cdb2ec; background: linear-gradient(160deg, #f8f2ff, #ece2fa); }
.avatar-choice.gacha.r3 { box-shadow: inset 0 0 0 2px #a9d3f2; background: linear-gradient(160deg, #f3f9ff, #e2eefa); }
.avatar-choice.gacha.on { background: var(--sun); }