/* =========================================================
   ガチャ演出 v3：デザインの作り込み
   ・背景：星雲が動く奥行きのある背景
   ・カプセル → 魔法陣と、青い蝶が眠るガラスのオーブ
   ・予告の文字：極太の和文フォント＋金属のグラデーション
   ・ランプ → 宝石、PUSH → 金属の縁の光るボタン
   ・結果 → トレカ風（金属の枠・角飾り・星・ホロ・傾き）
   ========================================================= */
:root{--gx-display:"Dela Gothic One","Zen Kaku Gothic New",sans-serif}

/* ---- 背景 ---- */
.gx{background:
  radial-gradient(40% 35% at 20% 25%,rgba(70,90,255,.22),transparent 70%),
  radial-gradient(35% 30% at 80% 70%,rgba(224,67,95,.18),transparent 70%),
  radial-gradient(60% 50% at 50% 50%,#121433,#05050b 75%)}
.gx::before{content:"";position:absolute;inset:-20%;pointer-events:none;opacity:.55;
  background:radial-gradient(1px 1px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 30% 80%,#cfd6ff,transparent),radial-gradient(1.5px 1.5px at 70% 30%,#fff,transparent),
  radial-gradient(1px 1px at 85% 60%,#fff,transparent),radial-gradient(1px 1px at 55% 90%,#ffe9a8,transparent),radial-gradient(1.5px 1.5px at 45% 10%,#fff,transparent);
  background-size:300px 300px;animation:gxDrift 60s linear infinite}
@keyframes gxDrift{to{transform:translate(-300px,-150px)}}
.gx-bg{background:radial-gradient(35% 35% at 50% 50%,var(--gc,#7aa2ff),transparent 70%)}

/* ---- オーブ ---- */
.gx-cap{width:170px;height:170px;margin:-85px 0 0 -85px;border-radius:50%;filter:drop-shadow(0 0 40px var(--gc,#7aa2ff))}
.gx-cap span{left:0;right:0;height:50%;overflow:hidden}
.gx-cap .top{top:0;border-radius:85px 85px 0 0;
  background:radial-gradient(60% 70% at 32% 28%,rgba(255,255,255,.9),rgba(255,255,255,.08) 38%,transparent 60%),
  radial-gradient(120% 120% at 50% 100%,color-mix(in srgb,var(--gc,#7aa2ff) 55%,transparent),rgba(10,14,40,.35) 70%);
  border:1.5px solid rgba(255,255,255,.55);border-bottom:0;backdrop-filter:blur(2px)}
.gx-cap .bot{bottom:0;border-radius:0 0 85px 85px;border:1.5px solid rgba(255,255,255,.35);border-top:0;
  background:radial-gradient(120% 120% at 50% 0%,color-mix(in srgb,var(--gc,#7aa2ff) 45%,transparent),rgba(8,10,30,.6) 70%),linear-gradient(transparent 70%,rgba(255,255,255,.15))}
.gx-cap .bot{border-top:0}
.gx-cap::after{content:"";position:absolute;left:8%;right:8%;top:calc(50% - 1px);height:2px;background:linear-gradient(90deg,transparent,#fff,transparent);box-shadow:0 0 12px var(--gc,#7aa2ff);z-index:2}
.gx-bfly{position:absolute;left:50%;top:50%;width:84px;margin:-34px 0 0 -42px;z-index:1;filter:drop-shadow(0 0 14px var(--gc,#7aa2ff));transition:transform 1.1s cubic-bezier(.3,.8,.3,1),opacity 1.1s}
.gx-cap.split .gx-bfly{transform:translate(120px,-62vh) rotate(25deg) scale(1.6);opacity:0}
.gx-circle{position:absolute;left:50%;top:50%;width:340px;height:340px;margin:-170px 0 0 -170px;overflow:visible;pointer-events:none;opacity:.85;animation:gxSpin 24s linear infinite}
.gx-circle circle,.gx-circle path{fill:none;stroke:var(--gc,#7aa2ff);stroke-width:.8}
.gx-circle .c1{stroke-width:1.4;filter:drop-shadow(0 0 4px var(--gc,#7aa2ff))}
.gx-circle .c2{stroke-dasharray:1.5 4}
.gx-circle .c3{stroke-dasharray:22 6;opacity:.7}
.gx-circle .star{opacity:.45}
.gx-circle .rune{fill:var(--gc,#7aa2ff);font-size:7.5px;letter-spacing:2px;font-family:var(--serif);opacity:.9}
.gx.charge .gx-circle{animation-duration:6s}
.gx-cap.hard .gx-circle{animation-duration:2.2s}
.gx-cap.split .gx-circle{transition:transform .9s cubic-bezier(.2,.9,.3,1),opacity .9s;transform:scale(3.2);opacity:0}
.gx-cap.split span{transition:transform .8s cubic-bezier(.2,.9,.3,1),opacity .8s}
.gx-cap.split .top{transform:translate(-30px,-60vh) rotate(-35deg)}
.gx-cap.split .bot{transform:translate(30px,60vh) rotate(25deg)}
.gx-cap.split::after{opacity:0;transition:opacity .2s}

/* ---- 予告の帯 ---- */
.gx-cut .band{clip-path:polygon(4% 0,100% 0,96% 100%,0 100%)}
.gx-cut .band::before{content:"";position:absolute;inset:6px 0;border-top:2px solid rgba(255,255,255,.75);border-bottom:2px solid rgba(255,255,255,.75)}
.gx-cut b{font-family:var(--gx-display);font-weight:400;letter-spacing:.04em;
  background:linear-gradient(180deg,#fff 0%,#fff 45%,#d7dcef 55%,#ffffff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:0;filter:drop-shadow(0 3px 0 rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(255,255,255,.7))}
.gx-cut.rb b{background:linear-gradient(90deg,#ff5f6d,#ffc371,#fff7ad,#7affc4,#7aa2ff,#c49bff,#ff5f6d);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;animation:gxRainbow 1s linear infinite}
.gx-cut::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:-30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-18deg);opacity:0}
.gx-cut.go::after{animation:gxSheen .9s .25s ease-out}
@keyframes gxSheen{0%{left:-30%;opacity:1}100%{left:120%;opacity:0}}

/* ---- 宝石のランプ ---- */
.gx-steps{gap:14px}
.gx-steps i{width:16px;height:16px;border-radius:2px;transform:rotate(45deg);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.3)}
.gx-steps i.on{background:radial-gradient(circle at 30% 30%,#fff,var(--sc) 55%,color-mix(in srgb,var(--sc) 60%,#000));box-shadow:0 0 16px var(--sc),0 0 4px #fff;animation:gxGem .35s ease}
@keyframes gxGem{50%{transform:rotate(45deg) scale(1.7)}}

/* ---- PUSH ---- */
.gx-push{border:0;font-family:var(--gx-display);font-weight:400;-webkit-text-stroke:0;
  background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.75),transparent 38%),radial-gradient(circle at 50% 60%,var(--pc,#e0435f),color-mix(in srgb,var(--pc,#e0435f) 55%,#000) 90%);
  box-shadow:0 0 0 7px #1a1d33,0 0 0 10px #c9cbd6,0 0 0 12px #6f7488,0 0 70px var(--pc,#e0435f),inset 0 -16px 30px rgba(0,0,0,.45),inset 0 8px 18px rgba(255,255,255,.35);
  text-shadow:0 3px 0 rgba(0,0,0,.45),0 0 16px rgba(255,255,255,.6)}
.gx-push::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:conic-gradient(from var(--a,0deg),transparent 0 70%,#fff 80%,transparent 90%);
  -webkit-mask:radial-gradient(circle,transparent 62%,#000 63%,#000 70%,transparent 71%);mask:radial-gradient(circle,transparent 62%,#000 63%,#000 70%,transparent 71%);animation:spinRing 1.4s linear infinite}
.gx-push small{font-family:var(--sans);font-weight:700}

/* ---- レア度のエンブレム ---- */
.gx-rare{position:relative;font-family:var(--serif);font-style:italic;font-weight:700;letter-spacing:.08em;
  background:linear-gradient(180deg,#fff 0%,var(--rc) 45%,color-mix(in srgb,var(--rc) 55%,#000) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.5)) drop-shadow(0 0 22px var(--rc));text-shadow:none}
.gx-rare::before,.gx-rare::after{content:"";position:absolute;top:50%;width:min(22vw,120px);height:2px;background:linear-gradient(90deg,transparent,var(--rc));-webkit-text-fill-color:initial}
.gx-rare::before{right:100%;margin-right:14px}
.gx-rare::after{left:100%;margin-left:14px;transform:scaleX(-1)}

/* ---- トレカ風の結果カード ---- */
.gx-tilt{perspective:900px}
.gx-card{transform-style:preserve-3d;transition:transform .15s ease-out;border:0;padding:16px 16px 18px;border-radius:20px;
  background:linear-gradient(160deg,#1a1d36,#0b0c19);box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 60px color-mix(in srgb,var(--rc) 55%,transparent)}
.gx-card::after{display:none}
.gx-frame{position:absolute;inset:0;border-radius:inherit;padding:3px;pointer-events:none;z-index:2;
  background:conic-gradient(from 210deg,color-mix(in srgb,var(--rc) 40%,#fff),var(--rc),color-mix(in srgb,var(--rc) 50%,#000),var(--rc),#fff,var(--rc),color-mix(in srgb,var(--rc) 40%,#fff));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.gx-frame::after{content:"";position:absolute;inset:7px;border-radius:14px;border:1px solid color-mix(in srgb,var(--rc) 60%,transparent)}
.gx-corner{position:absolute;width:22px;height:22px;z-index:3;border:2px solid var(--rc);filter:drop-shadow(0 0 4px var(--rc))}
.gx-corner.tl{top:8px;left:8px;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.gx-corner.tr{top:8px;right:8px;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.gx-corner.bl{bottom:8px;left:8px;border-right:0;border-top:0;border-radius:0 0 0 8px}
.gx-corner.br{bottom:8px;right:8px;border-left:0;border-top:0;border-radius:0 0 8px 0}
.gx-chip{position:absolute;top:18px;left:18px;z-index:3;font-family:var(--serif);font-weight:700;font-size:15px;padding:2px 12px;border-radius:99px;color:#120c05;
  background:linear-gradient(180deg,#fff,var(--rc));box-shadow:0 0 12px var(--rc)}
.gx-card .pic,.gx-card .txt,.gx-card .em{position:relative;z-index:1}
.gx-card .pic{border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.gx-card .em{padding:26px 0 6px}
.plate{position:relative;z-index:1;margin-top:12px;padding:10px 12px 4px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border-top:1px solid color-mix(in srgb,var(--rc) 50%,transparent)}
.plate .stars{font-size:14px;letter-spacing:4px;color:var(--rc);text-shadow:0 0 8px var(--rc)}
.plate .nm{margin-top:4px}
.foil{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;mix-blend-mode:color-dodge;opacity:.0}
.gx-card.r-SR .foil{opacity:.35;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(200,170,255,.6),transparent 45%)}
.gx-card.r-SSR .foil{opacity:.55;background:
  linear-gradient(115deg,transparent 20%,rgba(255,95,109,.5) 32%,rgba(255,195,113,.5) 40%,rgba(255,247,173,.55) 48%,rgba(122,255,196,.5) 56%,rgba(122,162,255,.5) 64%,rgba(196,155,255,.5) 72%,transparent 84%);
  background-size:250% 250%;background-position:var(--gx,50%) var(--gy,50%)}
.gx-card.prem .foil{opacity:.75}
.glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;background:radial-gradient(circle at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.35),transparent 40%);mix-blend-mode:overlay}

/* 連続のミニカード */
.gx-mc .fc{border:0;background:linear-gradient(160deg,#1a1d36,#0b0c19);box-shadow:0 10px 24px -8px rgba(0,0,0,.8),0 0 22px color-mix(in srgb,var(--rc) 55%,transparent)}
.gx-mc .fc .gx-frame{border-radius:14px;padding:2px}
.gx-mc .fc .gx-frame::after{inset:4px;border-radius:10px}
.gx-mc .fc i{font-style:italic;font-weight:700;background:linear-gradient(180deg,#fff,var(--rc));-webkit-background-clip:text;background-clip:text;color:transparent;position:relative;z-index:3}
.gx-mc .fc .stars{font-style:normal;font-size:9px;letter-spacing:2px;color:var(--rc);position:relative;z-index:3}
.gx-mc .fc span:not(.pic):not(.gx-frame):not(.foil){position:relative;z-index:3}
.gx-mc .fc .pic,.gx-mc .fc b{position:relative;z-index:1}
.gx-mc.r-SSR .fc .foil{position:absolute;inset:0;border-radius:14px;mix-blend-mode:color-dodge;opacity:.5;z-index:2;
  background:linear-gradient(115deg,transparent 20%,rgba(255,95,109,.5),rgba(255,247,173,.55),rgba(122,255,196,.5),rgba(122,162,255,.5),transparent 80%);background-size:250% 250%;animation:gxFoil 3s linear infinite}
@keyframes gxFoil{to{background-position:250% 0}}

/* PUSH などのボタンの文字 */
.gx-bar .ok{font-family:var(--gx-display);font-weight:400;letter-spacing:.1em;padding:12px 40px;background:linear-gradient(180deg,#fff,#d7dcef);box-shadow:0 6px 20px rgba(0,0,0,.4),0 0 0 2px rgba(255,255,255,.4)}
.gx-bang{font-family:var(--gx-display);font-weight:400}
@media (max-width:640px){.gx-circle{width:280px;height:280px;margin:-140px 0 0 -140px}.gx-cap{width:150px;height:150px;margin:-75px 0 0 -75px}.gx-rare::before,.gx-rare::after{width:60px}}

/* keep the OK button clear of the card on short screens */
.gx-res{justify-content:safe center;padding-top:40px;padding-bottom:120px}
.gx-card .pic{max-height:min(40vh,420px)}
@media (max-height:760px){.gx-card .pic{max-height:32vh}.gx-rare{font-size:clamp(48px,9vw,90px)}.gx-res{gap:2px}}

/* OK sits under the result, never on top of it */
.gx-res{padding-bottom:40px}
.gx-res .gx-okrow{position:static;margin-top:16px;flex:none}
.gx-react{bottom:24px}
@media (max-width:640px){.gx-res{padding-bottom:110px}.gx-react{bottom:20px}}

/* ===== ガチャ中の曲（YouTube プレーヤー：見える形で表示） ===== */
.gx-music{position:absolute;left:16px;top:16px;z-index:7;width:356px;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .4s,transform .4s}
.gx.music .gx-music{opacity:1;pointer-events:auto;transform:none}
.gx-yt{width:356px;height:200px;border-radius:12px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.3);box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 24px rgba(122,162,255,.35)}
.gx-yt iframe{width:100%;height:100%;border:0;display:block}
.gx-music p{margin-top:6px;font-size:12px;color:#cfd6ee;letter-spacing:.06em;text-shadow:0 1px 4px #000}
.gx-top .mus.off{opacity:.45}
@media (max-width:640px){
  .gx-music{width:200px;left:10px;top:10px}
  .gx-yt{width:200px;height:200px}
  .gx.music .gx-res{padding-top:240px}
  .gx.music .gx-hint{top:auto;bottom:24%}
}

/* ===== 自分のタイミングで引く ===== */
.gx.ready .gx-cap{animation:gxFloat 3s ease-in-out infinite}
.gx.ready .gx-circle{animation-duration:30s}
.gx.ready .gx-hint{top:auto;bottom:calc(18% + 70px)}
.gx-bar .pull,.gx-bar .all{font-family:var(--gx-display,var(--sans));font-weight:400;letter-spacing:.08em;font-size:18px;padding:16px 40px;border:0;color:#130f19;
  background:linear-gradient(180deg,#fff,#d7dcef);box-shadow:0 0 0 2px rgba(255,255,255,.5),0 0 40px rgba(122,162,255,.7),0 10px 24px rgba(0,0,0,.5);animation:gxPush .9s ease-in-out infinite}
.gx-bar .all{font-size:14px;padding:12px 28px;animation:none}

/* ===== 10連：裏向きのカードをタップでめくる ===== */
.gx-mc{position:relative}
.gx-res.tapflip .gx-mc{cursor:pointer}
.gx-res.tapflip .gx-mc::before{content:"";position:absolute;inset:0;border-radius:14px;z-index:0;transition:opacity .3s,transform .3s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80'%3E%3Cpath d='M50 40C42 14 10 4 6 20c-3 12 18 18 44 22M50 40C58 14 90 4 94 20c3 12-18 18-44 22M50 42c-14 2-30 12-26 26 4 8 18-4 26-22M50 42c14 2 30 12 26 26-4 8-18-4-26-22' fill='%237aa2ff' opacity='.85'/%3E%3C/svg%3E") center/46% no-repeat,
  repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 2px,transparent 2px 10px),linear-gradient(160deg,#1c2550,#0a0c1a);
  border:2px solid rgba(122,162,255,.55);box-shadow:0 8px 20px rgba(0,0,0,.6)}
[data-motif] .gx-res.tapflip .gx-mc::before{background:var(--motif-light) center/46% no-repeat,repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 2px,transparent 2px 10px),linear-gradient(160deg,#1c2550,#0a0c1a)}
.gx-res.tapflip .gx-mc.r-SR::before{border-color:#c49bff;box-shadow:0 0 18px rgba(196,155,255,.7)}
.gx-res.tapflip .gx-mc.r-SSR::before{border-color:#f2c65a;box-shadow:0 0 26px rgba(242,198,90,.9);animation:gxPulseBack 1.2s ease-in-out infinite}
@keyframes gxPulseBack{50%{box-shadow:0 0 40px rgba(242,198,90,1)}}
.gx-res.tapflip .gx-mc:not(.show):hover::before{transform:translateY(-4px)}
.gx-res.tapflip .gx-mc.show::before{opacity:0}

.gx-taphint{font-size:14px;letter-spacing:.12em;color:#fff;margin:4px 0 8px;animation:gxBlinkSoft 1.4s ease-in-out infinite}
@keyframes gxBlinkSoft{50%{opacity:.45}}

/* calm tap buttons: no jumping, just a soft breathing glow */
.gx-bar .pull{animation:gxBreath 2.4s ease-in-out infinite}
@keyframes gxBreath{50%{box-shadow:0 0 0 2px rgba(255,255,255,.5),0 0 22px rgba(122,162,255,.45),0 10px 24px rgba(0,0,0,.5)}}
.gx-taphint{animation:none;opacity:.85}
.gx-music,.gx-top .mus{display:none!important}