/* ===== ガチャ画面(待機)と開封演出(gacha_fx.js) =====
   2026-10-02 オーナー決定: 試作B「カードパック爆裂」(_proto/gacha/b.html)を本番化。1回引く/チケットで
   引くで★5が出たときだけ試作C「隊員の大号令」(c.html)の★5の見せ方。見た目は試作にできるだけ忠実。
   ・resources/ の画像は CSS の url() で参照しない(ネイティブアプリでは API_BASE が要る)。パック・カード・
     隊員の顔・ホロの型抜きは gacha_fx.js が API_BASE を付けて入れる。
   ・試作の vw/vmax は、横長の画面でも舞台の幅(最大480px)に合わせるため --gw(舞台の幅)・--gm(幅と高さの
     大きい方)に置き換えた(gacha_fx.js が px で入れる)。cqw は iOS 15 で使えないので使わない。
   ・控えめ(.gx-rm / .gacha-calm)は揺れなし・回転なし。閃光の強さと粒子の量は JS 側で絞る。 */

/* ---------- 待機画面 ---------- */
#screen-gacha { background: radial-gradient(ellipse at 50% 38%, #4a1470 0%, #1f0838 45%, #08020f 100%); }
#screen-gacha .gacha-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.gacha-bg-rays {
  position: absolute; left: 50%; top: 36%; width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255,190,255,.10) 0 6deg, transparent 6deg 18deg); animation: gachaSpin 40s linear infinite;
}
.gacha-bg-dots {
  position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,255,255,.18) 0 1.2px, transparent 1.6px) 0 0 / 22px 22px;
  -webkit-mask: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 70%); mask: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 70%);
}
.gacha-bg-spark {
  position: absolute; width: 14px; height: 14px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff 0 18%, transparent 20%), linear-gradient(0deg, transparent 45%, #fff 50%, transparent 55%), linear-gradient(90deg, transparent 45%, #fff 50%, transparent 55%);
  animation: gachaTwinkle 2.4s ease-in-out infinite;
}
@keyframes gachaSpin { to { transform: rotate(360deg); } }
@keyframes gachaTwinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

#screen-gacha .gacha-content {
  position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; height: auto;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  width: 100%; max-width: 480px; padding: 0 12px;
}
#screen-gacha .gacha-header { height: auto; padding-bottom: 0; }
#screen-gacha .gacha-header > * { flex: 0 0 auto; }
#screen-gacha .gacha-title { font-size: 1.05rem; text-shadow: 0 0 10px rgba(255,210,80,.7); }
#screen-gacha .gacha-coin-display { padding: 5px 12px; font-size: 0.88rem; background: rgba(0,0,0,.45); border-color: rgba(255,215,0,.45); color: #ffe27a; }
/* 演出スキップ(演出の設定「ガチャの開封演出」と同じ値) */
.gacha-skipopt {
  display: flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; cursor: pointer;
  font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap;
  background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.25); -webkit-user-select: none; user-select: none;
}
.gacha-skipopt-sw { position: relative; flex: none; width: 24px; height: 14px; border-radius: 7px; background: #555; transition: background .2s; }
.gacha-skipopt-sw::before { content: ''; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: transform .2s; }
.gacha-skipopt.on .gacha-skipopt-sw { background: #2ecc71; }
.gacha-skipopt.on .gacha-skipopt-sw::before { transform: translateX(10px); }

#screen-gacha .gacha-pickup {
  flex: none; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 10px; height: 34px; max-width: none;
  border-radius: 12px; font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden;
  background: linear-gradient(90deg, rgba(255,200,40,.18), rgba(255,120,200,.22), rgba(255,200,40,.18)); border-color: rgba(255,215,0,.55);
}
#screen-gacha .gacha-pickup-img { width: 26px; height: 26px; vertical-align: middle; border: 2px solid #ffd700; margin: 0 2px; }
#screen-gacha .gacha-pickup-card { display: inline-flex; align-items: center; gap: 2px; margin: 0 4px; color: #ffe27a; }

/* パックの舞台(残りの高さいっぱい) */
#screen-gacha .gacha-stage { position: relative; flex: 1 1 auto; min-height: 120px; }
#screen-gacha .gacha-status-tease {
  position: absolute; right: 0; top: 2px; z-index: 3; padding: 3px 9px; border-radius: 999px;
  background: rgba(40,10,60,.75); border: 1px solid rgba(255,215,0,.5); font-size: 11px;
}
.gacha-packbox { position: absolute; left: 50%; top: 50%; height: 90%; aspect-ratio: 720 / 1053; transform: translate(-50%, -50%); perspective: 800px; }
.gacha-pack { position: absolute; inset: 0; transform-style: preserve-3d; animation: gachaBob 3.2s ease-in-out infinite; }
@keyframes gachaBob { 0%, 100% { transform: translateY(-3%) rotateY(-10deg) rotateZ(-2deg); } 50% { transform: translateY(3%) rotateY(10deg) rotateZ(2deg); } }
.gacha-pack-img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 10px 22px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(200,120,255,.55)); }
/* 絵が読めないときの代わり(紫のホイル風の袋) */
.gacha-pack-noart .gacha-pack { border-radius: 8px; background: linear-gradient(125deg, #3a2a88 0%, #6c4dd8 30%, #c9b6ff 45%, #5b3fc4 60%, #2a1f6b 100%); }
.gacha-pack-holo {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 42%, rgba(120,220,255,.35) 48%, rgba(255,120,220,.35) 54%, transparent 66%); background-size: 260% 100%;
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: gachaHolo 2.6s linear infinite;
}
.gacha-pack-noart .gacha-pack-holo { -webkit-mask-image: none !important; mask-image: none !important; border-radius: 8px; }
@keyframes gachaHolo { 0% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
.gacha-pack-lbl { position: absolute; left: 8%; right: 8%; top: 40%; text-align: center; font-weight: 900; color: #fff; text-shadow: 0 0 8px #b56cff, 0 2px 0 #3a0a6a; line-height: 1.15; }
.gacha-pack-lbl .a { font-size: calc(var(--pw, 160px) * .14); letter-spacing: .06em; }
.gacha-pack-lbl .b { font-size: calc(var(--pw, 160px) * .1); }
/* 左右からのぞくカード(ピックアップと★4) */
.gacha-fan { position: absolute; left: 50%; top: 50%; width: 52%; aspect-ratio: 63 / 88; transform-origin: 50% 100%; }
.gacha-fan .gx-gc { box-shadow: 0 0 18px rgba(255,215,0,.5); }
.gacha-fan-l { animation: gachaFanL 2.2s ease-in-out infinite alternate; transform: translate(-112%, -58%) rotate(-16deg); }
.gacha-fan-r { animation: gachaFanR 2.2s ease-in-out .4s infinite alternate; transform: translate(12%, -58%) rotate(16deg); }
@keyframes gachaFanL { from { transform: translate(-112%, -58%) rotate(-16deg); } to { transform: translate(-120%, -64%) rotate(-22deg); } }
@keyframes gachaFanR { from { transform: translate(12%, -58%) rotate(16deg); } to { transform: translate(20%, -64%) rotate(22deg); } }
.gacha-idle-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
/* 控えめ・演出OFF: 背景の回転・きらめき・カードの揺れを止め、パックの揺れはゆっくり小さく */
#screen-gacha.gacha-calm .gacha-bg-rays, #screen-gacha.gacha-calm .gacha-bg-spark, #screen-gacha.gacha-calm .gacha-fan { animation: none; }
#screen-gacha.gacha-calm .gacha-bg-spark { opacity: .35; }
#screen-gacha.gacha-calm .gacha-pack { animation-duration: 7s; }

/* 引くボタン(1回/10回は横並び、チケットはその下に横長) */
#screen-gacha .gacha-buttons { flex: none; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; width: 100%; }
#screen-gacha .gacha-pull-btn {
  flex: 1 1 0; min-width: 0; height: 60px; padding: 0 6px; gap: 2px; justify-content: center; overflow: hidden;
  border-radius: 16px; border: 2px solid rgba(255,255,255,.6); color: #fff; font-weight: 900;
}
#screen-gacha .gacha-pull-label { font-family: inherit; font-size: 17px; font-weight: 900; letter-spacing: .04em; color: inherit; line-height: 1.2; }
#screen-gacha .gacha-pull-cost { font-size: 11.5px; font-weight: 800; color: inherit; opacity: .95; white-space: nowrap; line-height: 1.2; }
#screen-gacha .gacha-deal { display: inline-block; font-size: 10px; color: inherit; background: rgba(255,255,255,.22); border-radius: 6px; padding: 0 5px; margin-left: 3px; }
#screen-gacha .gacha-pull-single { background: linear-gradient(180deg, #ff7a45, #d9363e); box-shadow: none; }
#screen-gacha .gacha-pull-ten { background: linear-gradient(180deg, #ffcf33, #ff8a00); color: #3a1600; border-color: #fff3b0; box-shadow: none; }
#screen-gacha .gacha-pull-ten .gacha-deal { background: rgba(80,20,0,.18); }
#screen-gacha .gacha-pull-ticket {
  flex: 1 1 100%; height: 40px; flex-direction: row; gap: 8px; border-radius: 14px; border-color: rgba(255,255,255,.5);
  background: linear-gradient(180deg, #1fd1b5, #0a8f8a) !important; animation: none;
}
#screen-gacha .gacha-pull-ticket .gacha-pull-label { font-size: 14px; }
#screen-gacha .gacha-pull-ticket .gacha-pull-cost { font-size: 11px; font-weight: 700; }
/* ボタンの光が横切る(押したときの光 button::after とは別に ::before を使う) */
#screen-gacha .gacha-pull-btn::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); animation: gachaBtnShine 3.2s ease-in-out infinite;
}
#screen-gacha .gacha-pull-ten::before { animation-delay: 1.1s; }
@keyframes gachaBtnShine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
#screen-gacha.gacha-calm .gacha-pull-btn::before { animation: none; display: none; }

/* 天井とコレクション */
#screen-gacha .gacha-pity-row { flex: none; display: flex; gap: 8px; height: 50px; margin: 0; max-width: none; }
#screen-gacha .gacha-pity {
  flex: 1; min-width: 0; margin: 0; padding: 6px 10px; text-align: left; border-radius: 14px;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  background: rgba(10,6,30,.65); border: 1px solid rgba(255,215,0,.35);
}
#screen-gacha .gacha-pity-label { margin: 0; font-size: 12px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; }
#screen-gacha .gacha-pity-label > span#gacha-pity-num { font-size: 17px; color: #ffd700; margin: 0 1px; }
#screen-gacha .gacha-pity-label .gacha-pity-count, #screen-gacha .gacha-pity-label .gacha-pity-count span { margin: 0; font-family: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: 0; color: rgba(255,255,255,.7); }
#screen-gacha .gacha-pity-bar-bg { height: 7px; border-radius: 4px; background: rgba(255,255,255,.15); }
#screen-gacha .gacha-pity-bar { border-radius: 4px; background: linear-gradient(90deg, #8e44ff, #ff5fa2, #ffd700); box-shadow: none; }
#screen-gacha .gacha-pity-coll {
  flex: 0 0 104px; gap: 1px; padding: 0 4px; border-radius: 14px; white-space: nowrap; line-height: 1.25;
  background: rgba(10,6,30,.65); border: 1px solid rgba(255,255,255,.3);
}
#screen-gacha .gacha-pity-coll-label { font-size: 12px; font-weight: 800; color: #fff; }
#screen-gacha .gacha-pity-coll-desc { font-size: 9.5px; opacity: .8; color: #fff; }

/* 排出率(1行。タップでくわしい表) */
#screen-gacha .gacha-rates-info {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: nowrap; height: 20px; width: 100%;
  padding: 0; margin: 0; border: none; background: none; cursor: pointer; white-space: nowrap; overflow: hidden;
  font-size: 10.5px; color: rgba(255,255,255,.82);
}
#screen-gacha .gacha-rates-info::after { display: none; }
#screen-gacha .gacha-rates-info:active { transform: none; opacity: .7; }
#screen-gacha .gacha-rate-row { display: inline; }
#screen-gacha .gacha-rates-info .rarity-star { font-size: inherit; }
#screen-gacha .gacha-rate-sep { opacity: .6; }
#screen-gacha .gacha-rates-more { margin-left: 4px; text-decoration: underline; text-underline-offset: 2px; }
.gacha-odds-overlay { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.7); }
.gacha-odds-box { width: 100%; max-width: 340px; padding: 16px; border-radius: 16px; background: #15102b; border: 1px solid rgba(255,255,255,.3); font-size: 13px; line-height: 1.7; color: #fff; }
.gacha-odds-title { font-size: 16px; font-weight: 900; margin-bottom: 8px; }
.gacha-odds-table { width: 100%; border-collapse: collapse; }
.gacha-odds-table td { padding: 2px 4px; border-bottom: 1px solid rgba(255,255,255,.1); }
.gacha-odds-table td:last-child { text-align: right; font-weight: 800; }
.gacha-odds-table .rarity-star { font-size: inherit; }
.gacha-odds-notes { margin: 8px 0 0; padding-left: 1.1em; font-size: 12px; opacity: .85; }
.gacha-odds-close { display: block; margin-top: 12px; width: 100%; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.1); color: #fff; font-weight: 800; cursor: pointer; text-align: center; }

/* 低い画面(iPhone SE など): スクロールなしで全部見えるように詰める */
@media (max-height: 700px) {
  #screen-gacha .gacha-header { padding-top: max(28px, calc(env(safe-area-inset-top, 0px) + 6px)); }
  #screen-gacha .gacha-content { gap: 5px; }
  #screen-gacha .gacha-pull-btn { height: 54px; }
  #screen-gacha .gacha-pull-ticket { height: 38px; }
  #screen-gacha .gacha-pickup { height: 30px; font-size: 11.5px; }
  #screen-gacha .gacha-pickup-img { width: 22px; height: 22px; }
  #screen-gacha .gacha-pity-row { height: 46px; }
  #screen-gacha .gacha-stage { min-height: 100px; }
}
@media (max-width: 360px) {
  #screen-gacha .gacha-pickup { font-size: 11px; }
  #screen-gacha .gacha-pull-cost { font-size: 10.5px; }
  #screen-gacha .gacha-deal { font-size: 9px; }
  #screen-gacha .gacha-rates-info { font-size: 9.5px; }
}

/* ---------- カード面(試作の .gc。待機画面ののぞくカード・演出で共用) ---------- */
.gx-gc {
  --rc: #90a4ae; position: relative; width: 100%; aspect-ratio: 63 / 88; border-radius: 9px; padding: 4%; box-sizing: border-box;
  background: linear-gradient(160deg, #26324a, #10131f); border: 2px solid var(--rc); color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,.6), 0 0 14px var(--rcg, transparent); display: flex; flex-direction: column; overflow: hidden;
  font-family: 'Noto Sans JP', sans-serif;
}
.gx-gc.r1 { --rc: #90a4ae; } .gx-gc.r2 { --rc: #66bb6a; } .gx-gc.r3 { --rc: #42a5f5; --rcg: rgba(66,165,245,.45); }
.gx-gc.r4 { --rc: #c56cff; --rcg: rgba(197,108,255,.7); background: linear-gradient(160deg, #3a1d5a, #150a26); }
.gx-gc.r5 { --rc: #ffd700; --rcg: rgba(255,215,0,.85); background: linear-gradient(160deg, #5a4210, #1d1405); border-width: 3px; }
.gx-gc-art { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 5px; overflow: hidden; background: #000; }
.gx-gc-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gx-gc-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; }
.gx-gc.big .gx-gc-badge { font-size: 5rem; }
.gx-gc-stars { position: absolute; left: 6%; top: 5%; z-index: 2; font-size: 9px; letter-spacing: -1px; color: #ffd700; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.gx-gc-name { flex: none; margin-top: 4%; font-size: 9.5px; font-weight: 900; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-gc-new { position: absolute; right: 4%; top: 4%; z-index: 3; background: #ff2d55; color: #fff; font-size: 8px; font-weight: 900; padding: 1px 4px; border-radius: 4px; }
.gx-gc-holo { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: none; }
.gx-gc.r4 .gx-gc-holo, .gx-gc.r5 .gx-gc-holo { display: block; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 45%, transparent 60%); background-size: 250% 100%; animation: gxHolo 2.4s linear infinite; mix-blend-mode: screen; }
.gx-gc.r5 .gx-gc-holo { background: linear-gradient(115deg, transparent 25%, rgba(255,80,80,.35) 35%, rgba(255,240,80,.45) 42%, rgba(80,255,160,.4) 50%, rgba(80,160,255,.4) 58%, transparent 70%); background-size: 250% 100%; }
@keyframes gxHolo { 0% { background-position: 150% 0; } 100% { background-position: -100% 0; } }
.gx-gc.r5::before {
  content: ''; position: absolute; inset: -3px; border-radius: 10px; z-index: 4; pointer-events: none; border: 3px solid transparent;
  background: linear-gradient(90deg, #ff4d4d, #ffb13b, #fff53b, #3bff7a, #3be8ff, #5a6bff, #d13bff, #ff4d4d) border-box; background-size: 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: gxRainbow 3s linear infinite;
}
@keyframes gxRainbow { 0% { background-position: 0 0; } 100% { background-position: 300% 0; } }
.gx-gc.big { border-radius: 16px; }
.gx-gc.big .gx-gc-stars { font-size: 20px; letter-spacing: 0; }
.gx-gc.big .gx-gc-name { font-size: 21px; margin-top: 3%; }
.gx-gc.big .gx-gc-new { font-size: 14px; padding: 2px 8px; border-radius: 6px; }
.gx-gc-sub { display: none; font-size: 11px; text-align: center; opacity: .85; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-gc.big .gx-gc-sub { display: block; }
#screen-gacha.gacha-calm .gx-gc-holo, .gx-rm .gx-gc-holo { animation-duration: 6s; }

/* ---------- 開封演出(引いてから結果の一覧まで) ---------- */
/* 演出の間は後ろの待機画面とタブを描かない(覆われていても回る背景・ぼかしのタブが描き直されて重かった) */
body.gacha-fx-playing #screen-gacha > .gacha-bg, body.gacha-fx-playing #screen-gacha > .gacha-content, body.gacha-fx-playing .main-tabbar { visibility: hidden; }
.gx-root {
  position: fixed; inset: 0; z-index: 9600; overflow: hidden; display: flex; justify-content: center;
  background: #05030f; color: #fff; font-family: 'Noto Sans JP', sans-serif;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.gx-frame { position: relative; flex: none; overflow: hidden; }
.gx-show { position: absolute; inset: 0; overflow: hidden; }
.gx-pcv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; }
.gx-flash { position: absolute; inset: 0; z-index: 50; pointer-events: none; opacity: 0; }
.gx-taphint { position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: 11px; color: rgba(255,255,255,.55); z-index: 55; pointer-events: none; }
.gx-skip {
  position: absolute; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: 60;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.6); color: #fff; border-radius: 999px; padding: 8px 16px;
  font-family: inherit; font-weight: 800; font-size: 13px; cursor: pointer;
}
/* 画面・パックの揺れと光は gacha_fx.js が WAAPI で動かす(控えめでは揺らさない・光は3割以下) */

/* 案B: パック */
.gx-stagebg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(70,20,110,.9), rgba(6,2,14,.97) 70%); }
.gx-speed {
  position: absolute; left: 50%; top: 45%; width: calc(var(--gm, 844px) * 2.6); height: calc(var(--gm, 844px) * 2.6); margin: calc(var(--gm, 844px) * -1.3) 0 0 calc(var(--gm, 844px) * -1.3);
  border-radius: 50%; opacity: 0; background: repeating-conic-gradient(var(--c, #fff) 0 1.5deg, transparent 1.5deg 9deg);
  -webkit-mask: radial-gradient(circle, transparent 7%, #000 30%); mask: radial-gradient(circle, transparent 7%, #000 30%); animation: gachaSpin 6s linear infinite;
}
.gx-rm .gx-speed { animation-duration: 30s; }
.gx-lowfx .gx-speed { animation: none; }
.gx-bpack { position: absolute; left: 50%; top: 45%; width: min(calc(var(--gw, 390px) * .58), 250px); aspect-ratio: 720 / 1053; transform: translate(-50%, -50%); }
.gx-bpack img { position: absolute; inset: 0; width: 100%; height: 100%; }
.gx-bpack .gx-flap { -webkit-clip-path: inset(0 0 87% 0); clip-path: inset(0 0 87% 0); }
.gx-bpack .gx-body { -webkit-clip-path: inset(13% 0 0 0); clip-path: inset(13% 0 0 0); }
.gx-bpack.gx-noart { border-radius: 8px; background: linear-gradient(125deg, #3a2a88 0%, #6c4dd8 30%, #c9b6ff 45%, #5b3fc4 60%, #2a1f6b 100%); }
.gx-leak { position: absolute; inset: -14%; border-radius: 30%; background: radial-gradient(ellipse, var(--c, #fff) 0%, transparent 62%); opacity: 0; mix-blend-mode: screen; }
.gx-seam { position: absolute; left: 4%; right: 4%; top: 12%; height: 3%; background: var(--c, #fff); box-shadow: 0 0 18px 6px var(--c, #fff); opacity: 0; border-radius: 4px; }
/* 案B: 飛び出すカード */
.gx-cardfly { position: absolute; left: 50%; top: 45%; width: min(calc(var(--gw, 390px) * .6), 260px); aspect-ratio: 63 / 88; transform: translate(-50%, -50%); perspective: 900px; z-index: 5; }
.gx-in { position: absolute; inset: 0; transform-style: preserve-3d; }
.gx-face, .gx-back { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.gx-face { transform: rotateY(180deg); }
.gx-cback { position: absolute; inset: 0; border-radius: 14px; border: 3px solid var(--c, #cfd8dc); background: radial-gradient(circle at 50% 45%, #3b2a8a, #120a35 70%); box-shadow: 0 0 22px var(--c, transparent); overflow: hidden; }
.gx-cback::before { content: '★'; position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-size: calc(var(--cw, 200px) * .34); line-height: 1; color: #ffd54a; text-shadow: 0 0 14px #ffb300; }
.gx-cback::after { content: 'STARVOX'; position: absolute; left: 0; right: 0; top: 64%; text-align: center; font-weight: 900; letter-spacing: .14em; font-size: calc(var(--cw, 200px) * .1); color: #e7defa; }
.gx-ring { position: absolute; left: 50%; top: 45%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 4px solid var(--c, #fff); box-shadow: 0 0 22px var(--c, #fff), inset 0 0 12px var(--c, #fff); pointer-events: none; z-index: 6; }
/* 案B: ★4/★5 の全画面の絵 */
.gx-fullart { position: absolute; inset: 0; z-index: 7; overflow: hidden; opacity: 0; }
.gx-fullart .gx-art { position: absolute; left: 50%; top: 45%; width: calc(var(--gm, 844px) * 1.5); height: calc(var(--gm, 844px) * 1.5); object-fit: cover; transform: translate(-50%, -50%); }
.gx-vig { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(0,0,0,.75) 90%); }
.gx-tintc { position: absolute; inset: 0; mix-blend-mode: overlay; opacity: .55; }
.gx-bigname { position: absolute; left: 0; right: 0; top: 74%; z-index: 9; text-align: center; pointer-events: none; }
.gx-bn-stars { font-size: 36px; color: #ffd700; letter-spacing: 3px; text-shadow: 0 0 14px #ff9d00, 0 2px 0 #4a2a00; }
.gx-bn-stars span, .gx-bn-n span { display: inline-block; opacity: 0; }
.gx-bn-n { font-size: 34px; font-weight: 900; color: #fff; -webkit-text-stroke: 1px #2a0a4a; text-shadow: 0 0 16px var(--c, #ffd700), 0 3px 0 #2a0a4a; letter-spacing: .04em; white-space: nowrap; }
.gx-bn-s { font-size: 13px; font-weight: 800; margin-top: 2px; text-shadow: 0 1px 3px #000; }
.gx-stamp { display: inline-block; margin-top: 6px; background: #ff2d55; color: #fff; font-weight: 900; font-size: 18px; padding: 2px 14px; border-radius: 8px; border: 2px solid #fff; transform: rotate(-8deg); opacity: 0; }
/* 案B: 10連の並びと数 */
.gx-combo { position: absolute; left: 0; right: 0; top: 9%; z-index: 9; text-align: center; font-weight: 900; pointer-events: none; }
.gx-num { font-size: 58px; line-height: 1; color: #fff; text-shadow: 0 0 18px var(--c, #ff5fa2), 0 4px 0 #3a0a4a; display: inline-block; }
.gx-lab { font-size: 15px; letter-spacing: .3em; color: #ffd6f5; }
.gx-slot { position: absolute; z-index: 5; }
.gx-slotglow { position: absolute; inset: -18%; border-radius: 14px; background: radial-gradient(ellipse, var(--c), transparent 70%); opacity: 0; pointer-events: none; }
.gx-slot .gx-gc-name { font-size: 8px; }
.gx-slot .gx-gc-stars { font-size: 7px; }
.gx-slot .gx-gc-new { font-size: 6.5px; padding: 0 3px; }
.gx-slot .gx-gc-badge { font-size: 1.1rem; }

/* 案C: ★5の1回(隊員の大号令) */
.gx-cbg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(20,60,120,.85), rgba(3,8,22,.96) 70%); }
.gx-modec { background: linear-gradient(180deg, #06142e 0%, #0a1f45 45%, #071025 100%); }
.gx-speedl { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .2s; background: repeating-linear-gradient(100deg, rgba(255,255,255,.18) 0 2px, transparent 2px 30px); animation: gxSlide .25s linear infinite; }
@keyframes gxSlide { to { background-position: 60px 0; } }
.gx-rm .gx-speedl { animation: none; }
.gx-cutin {
  position: absolute; left: -10%; right: -10%; height: 150px; z-index: 6; transform: skewY(-8deg); overflow: hidden; border-top: 4px solid #fff; border-bottom: 4px solid #fff;
  background: repeating-linear-gradient(100deg, var(--c) 0 26px, var(--c2) 26px 52px); box-shadow: 0 0 30px var(--c);
}
.gx-cutin img { position: absolute; left: 12%; bottom: -12%; height: 125%; transform: skewY(8deg); filter: drop-shadow(4px 4px 0 rgba(0,0,0,.35)); }
.gx-cutin.r img { left: auto; right: 12%; }
.gx-ln { position: absolute; right: 15%; top: 50%; transform: translateY(-50%) skewY(8deg); font-size: min(28px, calc(var(--gw, 390px) * .07)); font-weight: 900; color: #fff; -webkit-text-stroke: 1.5px #102040; text-shadow: 0 4px 0 #102040; white-space: nowrap; }
.gx-cutin.r .gx-ln { right: auto; left: 15%; top: 58%; }
.gx-who { position: absolute; right: 13%; top: 12%; transform: skewY(8deg); font-size: 12px; font-weight: 900; background: #ffd400; color: #2a1a00; padding: 1px 8px; border-radius: 4px; }
.gx-cutin.r .gx-who { right: auto; left: 13%; }
.gx-allsplash { position: absolute; inset: 0; z-index: 7; overflow: hidden; background: radial-gradient(ellipse at 50% 50%, #ffe680, #ff8a00 45%, #8a1a00 90%); }
.gx-sl { position: absolute; top: -10%; bottom: -10%; width: 26%; transform: skewX(-12deg); overflow: hidden; border-left: 3px solid #fff; border-right: 3px solid #fff; background: var(--c); }
.gx-sl img { position: absolute; left: 50%; top: 50%; width: 200%; transform: translate(-50%, -50%) skewX(12deg); }
.gx-tt { position: absolute; left: 0; right: 0; bottom: 10%; text-align: center; font-size: 42px; font-weight: 900; color: #fff; -webkit-text-stroke: 2px #4a1a00; text-shadow: 0 5px 0 #4a1a00, 0 0 20px #ffd700; letter-spacing: .04em; }
.gx-tt small { display: block; font-size: 26px; -webkit-text-stroke: 1px #4a1a00; }
.gx-mem { position: absolute; width: 74px; height: 74px; margin: -37px 0 0 -37px; z-index: 4; border-radius: 50%; background: radial-gradient(circle, rgba(20,40,80,.95), rgba(8,16,40,.95)); border: 3px solid var(--c); box-shadow: 0 0 18px var(--c); overflow: hidden; }
.gx-mem img { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; }
.gx-beam { position: absolute; height: 10px; margin-top: -5px; z-index: 3; transform-origin: 0 50%; border-radius: 5px; background: linear-gradient(90deg, var(--c), #fff); box-shadow: 0 0 16px var(--c), 0 0 4px #fff; pointer-events: none; }
.gx-orb { position: absolute; left: 50%; top: 42%; width: 40px; height: 40px; margin: -20px 0 0 -20px; z-index: 4; border-radius: 50%; background: radial-gradient(circle, #fff 0%, var(--c) 35%, transparent 70%); box-shadow: 0 0 40px var(--c); transition: transform .35s cubic-bezier(.3,1.5,.5,1), background .2s; }
.gx-bigstar {
  position: absolute; left: 50%; top: 42%; width: 300px; height: 300px; margin: -150px 0 0 -150px; z-index: 5;
  -webkit-clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: conic-gradient(#ff4d4d, #ffb13b, #fff53b, #3bff7a, #3be8ff, #5a6bff, #d13bff, #ff4d4d);
}
.gx-revcard { position: absolute; left: 50%; top: 42%; width: min(calc(var(--gw, 390px) * .6), 260px); z-index: 6; transform: translate(-50%, -50%); }
.gx-react { position: absolute; z-index: 8; display: flex; align-items: center; gap: 4px; }
.gx-f { width: 54px; height: 54px; border-radius: 50%; background: #10264a; border: 2px solid var(--c); overflow: hidden; flex: none; }
.gx-f img { width: 100%; height: 100%; object-fit: contain; }
.gx-b { background: #fff; color: #102040; font-weight: 900; font-size: 13px; padding: 5px 9px; border-radius: 12px; white-space: nowrap; }
.gx-namebar { position: absolute; left: 0; right: 0; top: calc(42% + min(calc(var(--gw, 390px) * .42), 182px) + 8px); z-index: 7; text-align: center; }
.gx-nb-n { font-size: 26px; font-weight: 900; color: #fff; text-shadow: 0 0 12px var(--c, #ffd700), 0 3px 0 #102040; }
.gx-nb-s { font-size: 12px; font-weight: 700; opacity: .9; }
.gx-nb-nw { display: inline-block; background: #ff2d55; color: #fff; font-weight: 900; font-size: 14px; border-radius: 8px; padding: 1px 10px; margin-top: 4px; }

/* ---------- 結果の一覧(game.js showGachaResult。カードは表向きで並ぶ。ふわっと出るだけ) ---------- */
.gacha-result .gacha-card { cursor: default; animation: gxResultIn 0.26s ease-out both; }
@keyframes gxResultIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }

/* ガチャの演出の最中は、画面の下の無線のバナーを出さない(★5の隊員の大号令のカットインに重なっていた。2026-10-11 点検)。
   演出の声は Radio.speakOnly(バナーなし)なので影響しない。演出が終われば元どおり。 */
body.gacha-fx-playing .radio-banner { display: none !important; }