/* 야간자율방어 — 카드 프레임 · 뽑기 무대 · 획득 연출 (2026-10-05)
   Macho 「가차연출 화려하게 구현해, 카드 프레임도 개선하고 연출도 전체적으로 개선해」

   ★지켜 온 함정 (index.html 2026-09-20 기록)
     ① 카드 본체에 inset box-shadow 를 여러 겹 쌓거나 ② box-shadow 를 애니메이션하면
        카드가 합성 레이어가 되어 ★그림·글자가 통째로 안 그려졌다(캡처·웹뷰).
        → 빛·그림자는 ★따로 둔 요소(i·::after)로만 얹고, 끝난 애니메이션은 떼어 낸다.
     ③ 3D 뒤집기(rotateY+backface)는 일부 웹뷰에서 뒷면이 비친다 → ★2D 로 접었다 펴는 뒤집기만 쓴다. */

/* ═══ 1. 카드 프레임 (.gc) ═══════════════════════════════════
   일러스트(300×400)에 이미 구워진 얇은 테두리·등급표·이름판은 ★가리고, 그림 칸(8,8)~(292,346)만 보인다.
   크기는 --w 하나로 — 안쪽 치수는 전부 em(= 카드 폭의 1/10)이라 어디서나 같은 비율이다. */
.gc{--w:96px; position:relative; width:var(--w); font-size:calc(var(--w) / 10); flex:none;
  color:#fff; text-align:left; line-height:1.15; user-select:none; -webkit-user-select:none}
.gc *{box-sizing:border-box}
.gc-in{position:relative; padding:.42em .42em 0; border-radius:.95em; border:.13em solid #1a1206;
  background:var(--frame); overflow:hidden}
.gc-win{position:relative; aspect-ratio:284/338; overflow:hidden; border-radius:.55em;
  border:.16em solid var(--rim); background:#10140c}
.gc-art{position:absolute; left:-2.817%; top:-2.367%; width:105.634%; height:118.343%; max-width:none; display:block}
.gc-noimg{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:3.4em}
.gc-shade{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 38%, transparent 58%, rgba(0,0,0,.32) 100%),
             linear-gradient(transparent 72%, rgba(0,0,0,.30))}
/* 머리띠 — 구워진 등급표·별을 덮는다 (그림 칸 위 6.5% 자리) */
.gc-head{position:absolute; left:0; right:0; top:0; height:12%; display:flex; align-items:flex-start; justify-content:space-between;
  padding:.16em .22em 0; background:linear-gradient(var(--hd) 0 60%, transparent); pointer-events:none}
.gc-rk{font-style:normal; font-weight:900; font-size:.92em; letter-spacing:-.02em; padding:.04em .42em .06em; border-radius:.4em;
  background:var(--rkb); color:var(--rkc,#fff); border:.1em solid rgba(0,0,0,.55); text-shadow:0 .06em 0 rgba(0,0,0,.35)}
.gc-st{display:flex; gap:.05em; padding-top:.12em}
.gc-st i{width:.95em; height:.95em; display:block; background:linear-gradient(#fff6c2,#ffc93c 55%,#e08a12);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  filter:drop-shadow(0 .05em 0 rgba(0,0,0,.6))}
/* 이름판 */
.gc-plate{display:flex; align-items:center; gap:.22em; height:2.05em; padding:0 .12em .04em}
.gc-club{width:1.45em; height:1.45em; flex:none; background-size:contain; background-repeat:no-repeat; background-position:center;
  filter:drop-shadow(0 .06em 0 rgba(0,0,0,.45))}
.gc-nm{flex:1; min-width:0; font-weight:900; font-size:1.12em; letter-spacing:-.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--nmc,#fff); text-shadow:0 .07em 0 rgba(0,0,0,.55)}
.gc-sx{font-weight:900; font-size:.95em; flex:none; color:var(--sxc)}
.gc.m .gc-sx{--sxc:#9fd3ff} .gc.f .gc-sx{--sxc:#ffb3c7}
/* 등급 보석 — 위 가운데 */
.gc-gem{position:absolute; left:50%; top:-.38em; width:1.15em; height:1.15em; margin-left:-.575em; transform:rotate(45deg);
  border:.12em solid #1a1206; background:var(--gem); z-index:2}
.gc-gem::after{content:''; position:absolute; left:18%; top:18%; width:32%; height:32%; background:rgba(255,255,255,.85); border-radius:1px}
/* SR 귀퉁이 장식 */
.gc-cn{position:absolute; width:1em; height:1em; transform:rotate(45deg); border:.12em solid #4a2e05; z-index:2;
  background:linear-gradient(135deg,#fffbe0,#ffcf55 45%,#a86d16)}
.gc-cn.c1{left:-.3em; top:-.3em} .gc-cn.c2{right:-.3em; top:-.3em} .gc-cn.c3{left:-.3em; bottom:-.3em} .gc-cn.c4{right:-.3em; bottom:-.3em}
/* 배지 — NEW · 조각 · 레벨 */
.gc-new{position:absolute; right:-.45em; top:1.2em; z-index:3; font-style:normal; font-weight:900; font-size:.95em; color:#fff;
  padding:.1em .45em .14em; border-radius:.35em; background:linear-gradient(#ff6a5b,#d42a2a); border:.12em solid #2a0a06;
  transform:rotate(9deg); text-shadow:0 .06em 0 rgba(0,0,0,.4)}
.gc-pc{position:absolute; right:.2em; bottom:2.35em; z-index:3; font-style:normal; font-weight:900; font-size:.85em; color:#fff;
  padding:.08em .4em; border-radius:.5em; background:linear-gradient(#58c98a,#238a52); border:.1em solid #0d3a22}
.gc-lv{position:absolute; left:.55em; bottom:2.45em; z-index:3; font-style:normal; font-weight:900; font-size:.85em; color:#fff;
  padding:.06em .38em; border-radius:.45em; background:rgba(10,12,20,.78); border:.1em solid rgba(255,255,255,.35)}

/* 등급 — 은(N) · 청옥(R) · 금(SR) */
.gc.t-n{--frame:linear-gradient(165deg,#f6f8fb 0%,#bcc4cf 18%,#808a97 40%,#ccd3db 62%,#7c8693 82%,#adb6c1 100%);
  --rim:#2b313a; --hd:#8b95a2; --rkb:linear-gradient(#a7b0bb,#6b7480)}
.gc.t-r{--frame:linear-gradient(165deg,#dcf1ff 0%,#72b8f6 16%,#2766bb 42%,#5ca9ef 64%,#1d5099 84%,#8fccff 100%);
  --rim:#0b2448; --hd:#2f74c6; --rkb:linear-gradient(#67b3ff,#1f5fb4);
  --gem:linear-gradient(135deg,#d6f0ff,#3d8ee6 55%,#123f86)}
.gc.t-sr{--frame:linear-gradient(165deg,#fffbe0 0%,#ffd76a 14%,#c88d22 36%,#ffeaa6 55%,#a86d16 78%,#ffd76a 100%);
  --rim:#4a2e05; --hd:#cf9a2e; --rkb:linear-gradient(#ff6f7a,#c4173a); --nmc:#fff3c8;
  --gem:linear-gradient(135deg,#ffd0d6,#ef3550 55%,#7a0a1e)}
/* ★돌파 테두리 (2026-10-08) — 카드 밖으로 한 겹. 본체에 그림자를 쌓지 않는다(맨 위 함정 ①) — 따로 둔 요소로 */
.gc-bk{position:absolute; inset:-.32em; border-radius:1.15em; pointer-events:none; z-index:0; padding:.22em;
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.gc.bk1 .gc-bk{background:linear-gradient(135deg,#ffffff,#a9b6c9 40%,#eef3fb 60%,#8794a8)}
.gc.bk2 .gc-bk{background:linear-gradient(135deg,#fff6c2,#f0a81c 40%,#ffe48a 60%,#b9790c)}
.gc.bk3 .gc-bk{background:linear-gradient(135deg,#ff6a8a,#ffd95a 25%,#7ee08a 50%,#5ac8ff 75%,#c58aff)}
.gc.t-sr .gc-plate{background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,0))}

/* ★살아 있는 카드(.live) — 뽑기 무대·크게 보기에서만. 목록에서는 가만히 둔다(수십 장이 돌면 무겁다) */
.gc.live::after{content:''; position:absolute; inset:0; pointer-events:none; border-radius:.95em; padding:.42em;
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  background:conic-gradient(from var(--gca,0deg),transparent 0deg,transparent 290deg,rgba(255,255,255,.35) 330deg,rgba(255,255,255,.95) 346deg,rgba(255,255,255,.35) 356deg,transparent 360deg);
  animation:gcSpin var(--gcd,3.6s) linear infinite}
@property --gca{syntax:'<angle>'; initial-value:0deg; inherits:false}
@keyframes gcSpin{to{--gca:360deg}}
.gc.live.t-n::after{opacity:.45}
.gc.live.t-sr::after{--gcd:5s}
.gc-foil{position:absolute; inset:0; pointer-events:none; opacity:0}
.gc.live.t-r .gc-foil, .gc.live.t-sr .gc-foil{opacity:1; background-size:320% 100%; animation:gcFoil 3.4s ease-in-out infinite;
  background-image:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.0) 42%,rgba(255,255,255,.38) 48%,rgba(190,225,255,.22) 52%,transparent 58%)}
.gc.live.t-sr .gc-foil{animation-duration:2.6s;
  background-image:linear-gradient(105deg,transparent 36%,rgba(255,250,220,.0) 40%,rgba(255,255,255,.55) 47%,rgba(255,215,120,.35) 51%,rgba(255,160,220,.18) 55%,transparent 61%)}
@keyframes gcFoil{0%{background-position:120% 0} 70%,100%{background-position:-30% 0}}
@media (prefers-reduced-motion:reduce){ .gc.live::after,.gc.live .gc-foil{animation:none} }

/* ═══ 2. 뽑기 무대 (#gx) ═════════════════════════════════════ */
#gx{position:absolute; inset:0; z-index:48; overflow:hidden; border-radius:6px; color:#fff; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent; animation:gxIn .28s ease-out both}
#gx.out{animation:gxOut .22s ease-in both}
@keyframes gxIn{from{opacity:0}to{opacity:1}}
@keyframes gxOut{to{opacity:0}}
#gx .gx-bg{position:absolute; inset:0; background:radial-gradient(ellipse at 50% 58%,#3d2f73 0%,#1b1440 46%,#07060f 100%)}
#gx .gx-tint{position:absolute; inset:0; opacity:0; transition:opacity .5s, background .5s;
  background:radial-gradient(ellipse at 50% 55%,var(--tc,rgba(255,210,90,.55)) 0%,transparent 62%)}
#gx.tint-r .gx-tint{--tc:rgba(90,170,255,.45); opacity:1}
#gx.tint-sr .gx-tint{--tc:rgba(255,205,80,.6); opacity:1}
#gx .gx-rays{position:absolute; left:50%; top:56%; width:240vmax; height:240vmax; margin:-120vmax 0 0 -120vmax; pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.075) 0deg 5deg,transparent 5deg 15deg);
  animation:gxSpin 40s linear infinite; opacity:.55; transition:opacity .4s}
#gx.tint-sr .gx-rays{background:repeating-conic-gradient(from 0deg,rgba(255,220,120,.16) 0deg 5deg,transparent 5deg 15deg); animation-duration:14s; opacity:1}
@keyframes gxSpin{to{transform:rotate(360deg)}}
#gx .gx-pts{position:absolute; inset:0; pointer-events:none}
#gx .gx-pts i{position:absolute; bottom:-10px; width:5px; height:5px; border-radius:50%; background:var(--pc,#fff3c4); opacity:0;
  box-shadow:0 0 6px var(--pc,#fff3c4); animation:gxRise linear infinite}
#gx.tint-sr .gx-pts i{--pc:#ffd95e}
#gx.tint-r .gx-pts i{--pc:#9fd3ff}
@keyframes gxRise{0%{transform:translateY(0) scale(.6); opacity:0} 15%{opacity:.9} 100%{transform:translateY(-110vh) scale(1.1); opacity:0}}
#gx .gx-title{position:absolute; left:0; right:0; top:9px; display:flex; justify-content:center; align-items:center; gap:8px; pointer-events:none; z-index:3}
#gx .gx-title b{display:inline-block; font-size:20px; font-weight:900; letter-spacing:-.5px; padding:4px 22px 6px; border-radius:12px;
  background:linear-gradient(#f0563f,#b3261a); border:2px solid #2a1a0c; box-shadow:0 3px 0 #2a1a0c; text-shadow:0 2px 0 rgba(0,0,0,.35)}
#gx .gx-title span{font-size:12px; font-weight:800; color:#f3e2bd; padding:4px 10px; border-radius:999px; background:rgba(10,8,24,.55); border:1px solid rgba(255,255,255,.18)}
#gx .gx-title span:empty{display:none}
#gx .gx-title b.pop{animation:gxPop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes gxPop{0%{transform:scale(.6)} 100%{transform:scale(1)}}
#gx .gx-field{position:absolute; inset:0; z-index:2}
#gx .gx-shake{animation:gxShake .45s ease-out}
@keyframes gxShake{0%,100%{transform:translate(0,0)} 15%{transform:translate(-7px,4px)} 35%{transform:translate(7px,-4px)} 55%{transform:translate(-5px,-3px)} 78%{transform:translate(3px,2px)}}

/* 칸 하나 = 기운 + 카드(뒷면/앞면) */
.gx-slot{position:absolute; left:0; top:0; transition:transform .5s cubic-bezier(.18,.9,.3,1.15), opacity .3s; cursor:pointer}
.gx-slot.dim{opacity:.35}
.gx-aura{position:absolute; left:50%; top:50%; width:190%; height:150%; margin:-75% 0 0 -95%; border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(closest-side,var(--ac) 0%,transparent 100%)}
.gx-slot.h-r{--ac:rgba(80,165,255,.85)} .gx-slot.h-sr{--ac:rgba(255,205,70,.95)}
.gx-slot.h-r .gx-aura, .gx-slot.h-sr .gx-aura{animation:gxAura 1.1s ease-in-out infinite}
@keyframes gxAura{0%,100%{opacity:.55; transform:scale(.92)} 50%{opacity:1; transform:scale(1.06)}}
.gx-card{position:relative}
.gx-card > .gc{visibility:hidden}
.gx-card.open > .gc{visibility:visible}
.gx-card.open > .gx-back{display:none}
.gx-back{position:absolute; inset:0; border-radius:calc(var(--w) * .095); overflow:hidden; border:calc(var(--w) * .022) solid #d9b45a;
  background:radial-gradient(circle at 50% 42%,#2c3874 0%,#151b3d 66%,#0c1028 100%)}
.gx-back::before{content:''; position:absolute; inset:7%; border-radius:6%; border:2px solid rgba(217,180,90,.6);
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 6px,transparent 6px 12px)}
.gx-back::after{content:''; position:absolute; left:50%; top:46%; width:44%; aspect-ratio:156/188; transform:translate(-50%,-50%);
  background:url('img/card_emblem.webp?v=1') center/contain no-repeat}
.gx-slot.h-r .gx-back{border-color:#6fb6ff} .gx-slot.h-sr .gx-back{border-color:#ffd970}
.gx-back .gx-hint{position:absolute; left:0; right:0; bottom:8%; text-align:center; font-weight:900; font-size:calc(var(--w) * .1);
  color:#f3e2bd; opacity:.85}
/* 떨림 — 높은 등급일수록 세게 */
.gx-card.trem{animation:gxTrem .08s linear infinite}
@keyframes gxTrem{0%{transform:translate(0,0) rotate(0)} 25%{transform:translate(calc(var(--amp,1px) * -1),0) rotate(-.6deg)} 75%{transform:translate(var(--amp,1px),0) rotate(.6deg)}}
/* 뒤집기 — 접었다(1) 편다(2) */
.gx-card.f1{animation:gxF1 .13s ease-in forwards}
.gx-card.f2{animation:gxF2 .34s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes gxF1{to{transform:scaleX(0) scaleY(1.04)}}
@keyframes gxF2{from{transform:scaleX(0) scaleY(1.06)} to{transform:scaleX(1) scaleY(1)}}
/* 터짐 — 링·반짝이 */
.gx-ring{position:absolute; left:50%; top:46%; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%; pointer-events:none;
  border:3px solid var(--rc,#fff); animation:gxRing .7s ease-out forwards}
@keyframes gxRing{0%{opacity:1; transform:scale(.3)} 100%{opacity:0; transform:scale(6)}}
.gx-spk{position:absolute; left:50%; top:46%; width:7px; height:7px; margin:-3.5px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,#fff,var(--rc,#fff)); animation:gxSpk .8s ease-out forwards}
@keyframes gxSpk{0%{opacity:0; transform:translate(0,0) scale(.4)} 20%{opacity:1} 100%{opacity:0; transform:translate(var(--dx),var(--dy)) scale(1)}}
/* 이름 띠 (1회 뽑기) */
.gx-name{position:absolute; left:50%; transform:translateX(-50%); z-index:3; text-align:center; white-space:nowrap; pointer-events:none;
  animation:gxName .4s cubic-bezier(.2,1.4,.4,1) both}
.gx-name b{display:inline-block; font-size:23px; font-weight:900; padding:4px 18px 5px; border-radius:10px; border:2px solid #2a1a0c;
  background:var(--nb,linear-gradient(#7c8693,#4e5763)); box-shadow:0 3px 0 #2a1a0c; text-shadow:0 2px 0 rgba(0,0,0,.4)}
.gx-name.t-r b{--nb:linear-gradient(#4f9cf0,#1f5fb4)} .gx-name.t-sr b{--nb:linear-gradient(#ffcf55,#c47d12); color:#2a1606; text-shadow:0 1px 0 rgba(255,255,255,.5)}
.gx-name span{display:block; margin-top:5px; font-size:13px; font-weight:800; color:#f3e2bd; text-shadow:0 1px 2px rgba(0,0,0,.7)}
@keyframes gxName{0%{opacity:0; transform:translate(-50%,10px) scale(.8)} 100%{opacity:1; transform:translate(-50%,0) scale(1)}}
/* 별 — 하나씩 켜진다 */
.gx-stars{position:absolute; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:6px; pointer-events:none}
.gx-stars i{width:32px; height:32px; display:block; opacity:0; background:linear-gradient(#fff6c2,#ffc93c 55%,#e08a12);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.6))}
.gx-stars i.on{animation:gxStar .38s cubic-bezier(.2,1.8,.4,1) forwards}
@keyframes gxStar{0%{opacity:0; transform:scale(2.4) rotate(-40deg)} 100%{opacity:1; transform:scale(1) rotate(0)}}
/* ★SR 도장 */
.gx-stamp{position:absolute; z-index:4; pointer-events:none; font-style:normal; font-weight:900; letter-spacing:-2px; color:#fff;
  font-size:54px; padding:0 14px 4px; border-radius:14px; border:4px solid #2a0a06; transform:rotate(-12deg);
  background:linear-gradient(#ff7a6b,#c4173a); text-shadow:0 3px 0 rgba(0,0,0,.35); animation:gxStamp .42s cubic-bezier(.3,1.6,.5,1) both}
@keyframes gxStamp{0%{opacity:0; transform:rotate(-12deg) scale(3.2)} 60%{opacity:1; transform:rotate(-12deg) scale(.88)} 100%{opacity:1; transform:rotate(-12deg) scale(1)}}
.gx-promo{position:absolute; z-index:4; pointer-events:none; font-weight:900; font-size:40px; color:#ffe27a; letter-spacing:-1px; white-space:nowrap;
  text-shadow:0 0 12px rgba(255,200,60,.9),0 3px 0 #5a2a00; animation:gxPromo 1s ease-out forwards}
@keyframes gxPromo{0%{opacity:0; transform:translate(-50%,10px) scale(.6)} 25%{opacity:1; transform:translate(-50%,0) scale(1.15)} 70%{opacity:1} 100%{opacity:0; transform:translate(-50%,-14px) scale(1)}}
/* 번쩍 */
#gx .gx-flash{position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; background:radial-gradient(circle at 50% 48%,#fffbe6 0%,rgba(255,236,170,.75) 35%,rgba(255,210,90,0) 70%)}
#gx .gx-flash.on{animation:gxFlash .7s ease-out}
@keyframes gxFlash{0%{opacity:0} 15%{opacity:1} 100%{opacity:0}}
/* 색종이 */
#gx .gx-conf{position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden}
#gx .gx-conf i{position:absolute; top:-14px; width:8px; height:12px; opacity:0; animation:gxConf linear both}
@keyframes gxConf{0%{opacity:0; transform:translateY(0) rotate(0)} 8%{opacity:1} 100%{opacity:0; transform:translateY(110vh) rotate(760deg)}}
/* ★SR 컷인 (10연차) — 화면 가운데 크게 */
#gx .gx-cut{position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center; gap:26px;
  background:rgba(8,6,18,.72); animation:gxIn .2s ease-out both; cursor:pointer}
#gx .gx-cut.out{animation:gxOut .25s ease-in both}
#gx .gx-cut .gx-cut-rays{position:absolute; left:50%; top:50%; width:240vmax; height:240vmax; margin:-120vmax 0 0 -120vmax;
  background:repeating-conic-gradient(from 0deg,rgba(255,215,110,.22) 0deg 6deg,transparent 6deg 16deg); animation:gxSpin 9s linear infinite}
#gx .gx-cut .gx-cut-card{position:relative; animation:gxCutIn .55s cubic-bezier(.16,1.2,.3,1) both}
@keyframes gxCutIn{0%{opacity:0; transform:translateX(60vw) skewX(-18deg) scale(.9)} 70%{opacity:1; transform:translateX(-12px) skewX(4deg) scale(1.04)} 100%{opacity:1; transform:none}}
#gx .gx-cut .gx-cut-info{position:relative; animation:gxCutInfo .5s .15s cubic-bezier(.2,1.2,.4,1) both; text-align:left}
@keyframes gxCutInfo{0%{opacity:0; transform:translateX(-40px)} 100%{opacity:1; transform:none}}
#gx .gx-cut .gx-cut-info b{display:block; font-size:34px; font-weight:900; letter-spacing:-1px; color:#fff3c8;
  text-shadow:0 0 14px rgba(255,200,60,.65),0 3px 0 #3a2000}
#gx .gx-cut .gx-cut-info span{display:block; margin-top:6px; font-size:14px; font-weight:800; color:#ffe9a8}
#gx .gx-cut .gx-cut-info .gx-stars{position:relative; left:auto; transform:none; margin-top:10px}
/* 단추 */
#gx .gx-ui{position:absolute; left:0; right:0; bottom:10px; z-index:7; display:flex; justify-content:center; gap:10px; pointer-events:none}
#gx .gx-ui button{pointer-events:auto; min-height:46px; min-width:120px; padding:0 18px; border-radius:12px; border:2px solid #2a1a0c; font-weight:900; font-size:15px;
  color:#2a1a0c; background:linear-gradient(#ffe48a,#f0a81c); box-shadow:0 4px 0 #2a1a0c; cursor:pointer; animation:gxBtn .3s ease-out both}
#gx .gx-ui button.sub{color:#f3e2bd; background:linear-gradient(#6a4a28,#4a3219)}
#gx .gx-ui button.again{color:#fff; background:linear-gradient(#5fd08e,#2f9a5e); text-shadow:0 1px 0 rgba(0,0,0,.3)}
#gx .gx-ui button .gic{width:22px; height:22px; vertical-align:-5px}
#gx .gx-ui button:active{transform:translateY(2px); box-shadow:0 2px 0 #2a1a0c}
@keyframes gxBtn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
#gx .gx-tap{position:absolute; left:0; right:0; bottom:14px; z-index:7; text-align:center; font-size:13px; font-weight:800; color:#f3e2bd;
  pointer-events:none; animation:gxBlink 1.2s ease-in-out infinite}
@keyframes gxBlink{0%,100%{opacity:.35} 50%{opacity:1}}

/* ═══ 3. 획득 연출 (#gxr) — 사면 바로 「획득!」 ═══════════════ */
#gxr{position:absolute; inset:0; z-index:52; display:flex; align-items:center; justify-content:center; background:rgba(8,8,16,.62);
  animation:gxIn .2s ease-out both}
#gxr.out{animation:gxOut .2s ease-in both}
#gxr .gxr-box{position:relative; min-width:min(380px,84%); max-width:92%; padding:16px 20px 14px; border-radius:18px; text-align:center; color:#2a1a0c;
  background:linear-gradient(#fff8e6,#f3e2bd); border:3px solid #2a1a0c; box-shadow:0 6px 0 #2a1a0c; animation:gxrBox .42s cubic-bezier(.2,1.5,.4,1) both}
@keyframes gxrBox{0%{transform:scale(.6); opacity:0} 100%{transform:scale(1); opacity:1}}
#gxr .gxr-rays{position:absolute; left:50%; top:46%; width:520px; height:520px; margin:-260px 0 0 -260px; z-index:-1; pointer-events:none; border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,220,120,.35) 0deg 8deg,transparent 8deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 66%); mask:radial-gradient(circle,#000 18%,transparent 66%); animation:gxSpin 16s linear infinite}
#gxr .gxr-t{display:inline-block; font-size:22px; font-weight:900; color:#fff; padding:2px 22px 5px; border-radius:12px; margin-top:-34px;
  background:linear-gradient(#f0563f,#b3261a); border:2px solid #2a1a0c; box-shadow:0 3px 0 #2a1a0c; text-shadow:0 2px 0 rgba(0,0,0,.35)}
#gxr .gxr-sub{display:block; margin:6px 0 0; font-size:12.5px; font-weight:800; color:#c0392b}
#gxr .gxr-items{display:flex; justify-content:center; flex-wrap:wrap; gap:12px 18px; margin:12px 0 12px}
#gxr .gxr-it{display:flex; flex-direction:column; align-items:center; min-width:76px; animation:gxrIt .45s cubic-bezier(.2,1.7,.4,1) both}
@keyframes gxrIt{0%{opacity:0; transform:scale(.3) translateY(14px)} 100%{opacity:1; transform:none}}
#gxr .gxr-it .gic{width:58px; height:58px; filter:drop-shadow(0 3px 0 rgba(42,26,12,.35))}
#gxr .gxr-it b{font-size:20px; font-weight:900; letter-spacing:-.5px; margin-top:2px}
#gxr .gxr-it span{font-size:11px; font-weight:800; color:#5a4226}
#gxr .gxr-ok{min-height:46px; min-width:140px}
#gxr .gxr-x{position:absolute; right:4px; top:4px; width:44px; height:44px; border:0; background:none; font-size:20px; font-weight:900; color:#5a4226; cursor:pointer}
/* 지갑으로 날아가는 아이콘 */
.gx-fly{position:absolute; z-index:90; width:30px; height:30px; pointer-events:none; background-size:contain; background-repeat:no-repeat;
  transition:transform .62s cubic-bezier(.5,-.2,.8,.6), opacity .62s}
.gx-bump{animation:gxBump .35s cubic-bezier(.2,1.8,.4,1)}
@keyframes gxBump{0%{transform:scale(1)} 40%{transform:scale(1.25)} 100%{transform:scale(1)}}

/* ═══ 4. 레벨업 · 화면 전환 · 그 밖 ═══════════════════════════ */
.lvfx{position:relative}
.lvfx::after{content:'LEVEL UP!'; position:absolute; left:50%; top:50%; z-index:5; pointer-events:none; white-space:nowrap;
  font-weight:900; font-size:22px; color:#fff; letter-spacing:-.5px; padding:2px 14px 4px; border-radius:10px;
  background:linear-gradient(#5fd08e,#2f9a5e); border:2px solid #0d3a22; text-shadow:0 2px 0 rgba(0,0,0,.35);
  animation:lvTxt 1.1s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes lvTxt{0%{opacity:0; transform:translate(-50%,-30%) scale(.5)} 25%{opacity:1; transform:translate(-50%,-50%) scale(1.1)} 75%{opacity:1; transform:translate(-50%,-70%) scale(1)} 100%{opacity:0; transform:translate(-50%,-95%) scale(1)}}
.lvfx > .lvflash{position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%); background-size:250% 100%; animation:lvFlash .7s ease-out forwards}
@keyframes lvFlash{0%{background-position:130% 0; opacity:1} 100%{background-position:-30% 0; opacity:0}}
/* 로비 화면 들어올 때 — 살짝 떠오른다 */
#wrap .ov.lobby:not(.hide){animation:ovRise .22s ease-out}
@keyframes ovRise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
/* 숫자 올라갈 때 */
.gx-num{display:inline-block}
.gx-num.tick{animation:gxBump .25s ease-out}
/* ★알림은 언제나 맨 위 — 뽑기 무대(48)·획득 창(52) 위에서도 보이게 */
#toast{z-index:95 !important}

/* ═══ 5. 새 프레임이 들어간 자리 (2026-10-05) ═══════════════════
   ★바깥의 img 규칙(.ed-card img · #wrap .cardrow .ci img · .nc-art img)이 카드 속 그림까지 잡아
     크기를 바꿔 버린다 — 카드 그림의 치수는 여기서 못 박는다. */
.gc img.gc-art{position:absolute !important; left:-2.817% !important; top:-2.367% !important; width:105.634% !important; height:118.343% !important;
  max-width:none !important; aspect-ratio:auto !important; object-fit:fill !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; margin:0 !important}
#cardZoom .zart2{flex:0 0 auto; padding:8px 4px}
#wrap .cardrow .ci{width:56px}
.cardrow .ci .gc{margin:3px 0}
.ed-card.fx{width:auto; text-align:center; animation:edIn .45s cubic-bezier(.2,1.4,.4,1) both; animation-delay:calc(var(--i,0) * .12s + .3s)}
.ed-card.fx .gc{margin:0 auto}
.ed-card.fx em{display:block; margin-top:5px}
.ed-card.fx.isnew::after{display:none}
@keyframes edIn{0%{opacity:0; transform:translateY(-18px) scale(.7) rotate(-6deg)} 100%{opacity:1; transform:none}}
.nc-art.fxc{width:auto !important; height:auto !important; border:0 !important; box-shadow:none !important; background:none !important; overflow:visible !important; display:flex; justify-content:center; padding:6px 0}

/* ═══ 6. 결과 화면 (2026-10-05) — 제목이 튀어나오고, 성과 칸이 차례로 서고, 숫자가 올라간다 ═══ */
#ovEnd.win:not(.hide) #endT{animation:endPop .55s cubic-bezier(.2,1.6,.4,1) both}
#ovEnd:not(.win):not(.hide) #endT{animation:endShake .55s ease-out both}
@keyframes endPop{0%{opacity:0; transform:scale(.4) rotate(-6deg)} 100%{opacity:1; transform:none}}
@keyframes endShake{0%{opacity:0; transform:translateY(-14px)} 30%{opacity:1; transform:translateX(-8px)} 50%{transform:translateX(7px)} 70%{transform:translateX(-4px)} 100%{transform:none}}
#ovEnd:not(.hide) .ed-stat{animation:edStat .42s cubic-bezier(.2,1.5,.4,1) both}
#ovEnd:not(.hide) .ed-stat:nth-child(1){animation-delay:.15s}
#ovEnd:not(.hide) .ed-stat:nth-child(2){animation-delay:.25s}
#ovEnd:not(.hide) .ed-stat:nth-child(3){animation-delay:.35s}
@keyframes edStat{0%{opacity:0; transform:translateY(12px) scale(.85)} 100%{opacity:1; transform:none}}
#ovEnd:not(.hide) .ed-btns{animation:edStat .4s .45s ease-out both}

/* ★닫히는 중인 무대는 아무것도 안 눌린다 — 「한 번 더」 두 번 톡에 값이 두 번 빠졌다(2026-10-05) */
#gx.out, #gx.out *{pointer-events:none!important}
#gx .gx-ui button.wait{opacity:.55}

/* ═══ 7. 말랑 보상 (2026-10-07 Macho 「모든 보상은 연출이 말랑말랑한 효과가 들게끔,
   보상을 획득했다는 사실 명확하게」) ═══════════════════════════════
   ★말랑 = 작게 → 눌려 퍼졌다(가로↑세로↓) → 늘어났다(세로↑) → 출렁 → 제자리. 발밑(아래 가운데)을 축으로.
   결과 화면 카드·조각·새 동아리, 「획득!」 창(#gxr), 숫자가 다 오를 때의 톡까지 같은 말랑이를 쓴다. */
@keyframes jellyIn{0%{opacity:0; transform:scale(.25) translateY(14px)} 40%{opacity:1; transform:scale(1.16,.84)} 58%{transform:scale(.9,1.12)}
  74%{transform:scale(1.06,.95)} 88%{transform:scale(.98,1.02)} 100%{opacity:1; transform:none}}
@keyframes jellyPop{0%{transform:none} 25%{transform:scale(1.28,.8)} 50%{transform:scale(.88,1.14)} 72%{transform:scale(1.07,.95)} 100%{transform:none}}
@keyframes rwStamp{0%{opacity:0; transform:scale(2.4) rotate(-14deg)} 55%{opacity:1; transform:scale(.88) rotate(-5deg)} 75%{transform:scale(1.08) rotate(-6deg)} 100%{opacity:1; transform:rotate(-5deg)}}
@keyframes rwGlow{0%{opacity:0; scale:.3} 100%{opacity:1; scale:1}}
@keyframes rwSpin{to{rotate:360deg}}

/* 결과 화면 — 받은 것 */
#ovEnd .ed-right, #ovEnd #endRw{overflow:visible}
#ovEnd #endRw{gap:14px 10px; padding:12px 2px 2px; justify-content:center}
#ovEnd .ed-rwTitle{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
#ovEnd .ed-rwTitle small{font-size:10.5px; font-weight:700; color:#8a6a46}
.rw-ttl{display:inline-block; background:linear-gradient(#ff6a4a,#d8321c); color:#fff; padding:2px 11px 3px; border-radius:10px; font-size:14px;
  border:2px solid #2a1a0c; box-shadow:0 2px 0 #2a1a0c; animation:rwStamp .5s .4s both}
.rw-pop{animation:jellyIn .72s var(--d,.5s) cubic-bezier(.3,.8,.4,1) both; transform-origin:50% 90%}
.ed-card.fx.rw-pop{position:relative; cursor:pointer; animation:jellyIn .72s var(--d,.5s) cubic-bezier(.3,.8,.4,1) both}
.ed-card.rw-pop .gc{position:relative; z-index:1; transition:transform .12s}
.ed-card.rw-pop:active .gc{transform:scale(.94)}
.rw-rays{position:absolute; left:50%; top:44%; width:175%; aspect-ratio:1; translate:-50% -50%; z-index:0; pointer-events:none; border-radius:50%;
  background:repeating-conic-gradient(rgba(255,214,90,.6) 0 11deg, transparent 11deg 30deg);
  -webkit-mask:radial-gradient(circle, #000 22%, transparent 66%); mask:radial-gradient(circle, #000 22%, transparent 66%);
  animation:rwGlow .5s var(--d,.5s) ease-out both, rwSpin 10s var(--d,.5s) linear infinite}
.ed-card.t-r .rw-rays{background:repeating-conic-gradient(rgba(110,180,255,.6) 0 11deg, transparent 11deg 30deg)}
.ed-card.t-sr .rw-rays{background:repeating-conic-gradient(rgba(255,200,40,.9) 0 11deg, transparent 11deg 26deg); width:210%}
#ovEnd .ed-card .rw-tag{display:inline-block; position:relative; z-index:2; margin-top:6px; padding:2px 10px 3px; border-radius:10px; font-style:normal;
  font-size:12.5px; font-weight:900; color:#fff; background:linear-gradient(#ff6a4a,#d8321c); border:2px solid #2a1a0c; box-shadow:0 2px 0 #2a1a0c;
  animation:rwStamp .45s calc(var(--d,.5s) + .32s) both; white-space:nowrap}
#ovEnd .ed-card.t-r .rw-tag.new{background:linear-gradient(#6eb4ff,#2f7fd0)}
#ovEnd .ed-card.t-sr .rw-tag.new{background:linear-gradient(#fff2a8,#f0a81c); color:#3b2512}
#ovEnd .ed-card .rw-tag.dup{background:linear-gradient(#7ee08a,#2f9e43)}
.rw-chip{display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; padding:4px 13px 4px 5px; margin:4px 6px 0 0; border-radius:22px;
  background:#fff; border:2px solid #3b2512; box-shadow:0 3px 0 rgba(59,37,18,.35); color:#3b2512; font-size:12.5px; font-weight:900}
.rw-chip .gic{width:30px; height:30px; flex:none}
.rw-chip b{font-size:16px; color:#e2452e; letter-spacing:-.3px}
.rw-chip.unlock{background:linear-gradient(#fff6c8,#ffd95a)}
.rw-chip.unlock b{color:#3b2512}
#endUnlock{display:flex; flex-wrap:wrap; justify-content:center}

/* 성과 칸도 말랑하게 서고, 숫자는 다 오르면 톡 */
#ovEnd:not(.hide) .ed-stat{animation:jellyIn .62s cubic-bezier(.3,.8,.4,1) both; transform-origin:50% 90%}
.gx-num.tick, #endStats b.tick{animation:jellyPop .45s ease-out}
#endStats b{display:block}

/* 「획득!」 창 — 상자와 아이템도 말랑 */
#gxr .gxr-box{animation:jellyIn .6s cubic-bezier(.3,.8,.4,1) both; transform-origin:50% 80%}
#gxr .gxr-it{animation:jellyIn .62s cubic-bezier(.3,.8,.4,1) both}
#gxr .gxr-t{animation:rwStamp .45s .25s both}

@media (prefers-reduced-motion:reduce){
  .rw-pop, .ed-card.fx.rw-pop, .rw-ttl, #ovEnd .ed-card .rw-tag, #gxr .gxr-box, #gxr .gxr-it, #gxr .gxr-t{animation-duration:.01s !important}
  .rw-rays{animation:none}
}
#ovEnd{overflow:hidden}   /* 빛살이 칸 밖으로 번져도 화면에 스크롤이 생기지 않게 */
#endUnlock .rw-chip b{color:#c0392b; font-size:15px}
.ed-card .rw-rays{background:repeating-conic-gradient(rgba(255,170,20,.55) 0 11deg, transparent 11deg 30deg)}
.ed-card.t-r .rw-rays{background:repeating-conic-gradient(rgba(60,140,240,.5) 0 11deg, transparent 11deg 30deg)}
.ed-card.t-sr .rw-rays{background:repeating-conic-gradient(rgba(255,170,0,.85) 0 11deg, transparent 11deg 26deg)}
/* 꼬리표는 카드 아래에 겹쳐 붙는다 — 줄 높이를 아낀다 (2026-10-07 9명 판에서 칸을 뚫어서) */
#ovEnd .ed-card.rw-pop{padding-bottom:13px}
#ovEnd .ed-card .rw-tag{position:absolute; left:50%; bottom:0; translate:-50% 0; margin:0; font-size:11.5px; padding:1px 9px 2px}
.rw-chips{flex:0 0 100%; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 8px}
.rw-chips .rw-chip{margin:0}
#endUnlock:empty{display:none}
.rw-chip.unlock b{color:#c0392b; font-size:15px}
#ovEnd .ed-card.rw-pop{padding-bottom:17px}
#ovEnd .ed-rwTitle small{white-space:nowrap}
@media (max-width:720px){ #ovEnd .ed-rwTitle small{display:none} }
/* 칩 자리 — 왼쪽 성과 칸 아래 (2026-10-07) */
#ovEnd #endStats{margin-bottom:0}
#endChips{display:flex; flex-wrap:wrap; gap:8px 10px; align-content:flex-start; margin:10px 0 auto; min-height:0}
#endChips:empty{margin-top:0}
#endChips .rw-chip{margin:0}

/* ═══ 8. 뽑기 강화 (2026-10-07 Macho 「가차 연출 강화해, 지금 너무 밋밋해」) ═══════════
   ⓪ 모집 봉투가 떨어져 출렁 → 떨며 빛을 빨아들임 → 펑(큰 고리·번쩍·흔들림) → 카드가 사방으로 날아가 말랑 착지
   ① 뒷면에 빛줄기가 흐르고, 예고 등급은 테두리가 빛난다
   ② 뒤집기는 3D(옆으로 돌아 넘어감) → 번쩍 + 말랑 + R·SR 빛기둥
   ③ SR 직전엔 무대가 어두워진다 · 다 열리면 카드가 파도처럼 한 번씩 뛴다 */
.gx-slot{perspective:700px}
.gx-card.f1{animation:gxF1b .14s ease-in forwards}
.gx-card.f2{animation:gxF2b .36s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes gxF1b{0%{transform:rotateY(0) scale(1)} 100%{transform:rotateY(90deg) scale(1.08)}}
@keyframes gxF2b{0%{transform:rotateY(-90deg) scale(1.08)} 60%{transform:rotateY(10deg) scale(1.16)} 100%{transform:rotateY(0) scale(1)}}
.gx-card.pop{animation:gxJelly .6s ease-out}
@keyframes gxJelly{0%{transform:scale(1)} 22%{transform:scale(1.22,.84)} 42%{transform:scale(.9,1.14)} 62%{transform:scale(1.07,.95)} 80%{transform:scale(.98,1.02)} 100%{transform:none}}
.gx-card.land{animation:gxLand .5s ease-out}
@keyframes gxLand{0%{transform:scale(1.25,.72)} 35%{transform:scale(.9,1.12)} 62%{transform:scale(1.05,.96)} 100%{transform:none}}
.gx-card.hop{animation:gxHop .55s calc(var(--i,0) * .055s) ease-out both}
@keyframes gxHop{0%,100%{transform:none} 30%{transform:translateY(-14px) scale(.95,1.07)} 62%{transform:translateY(0) scale(1.07,.93)} 80%{transform:scale(.98,1.02)}}
.gx-card.open .gc-new{animation:jellyIn .5s .12s both}
/* 뒷면 빛줄기 */
.gx-back .gx-shine{position:absolute; inset:0; z-index:1; pointer-events:none; background-size:300% 100%; animation:gcFoil 2.2s ease-in-out infinite;
  background-image:linear-gradient(110deg,transparent 36%,rgba(255,255,255,.3) 48%,rgba(255,230,160,.18) 52%,transparent 62%)}
.gx-slot.h-r .gx-back{box-shadow:0 0 14px 3px rgba(80,165,255,.8)}
.gx-slot.h-sr .gx-back{box-shadow:0 0 22px 6px rgba(255,205,70,.95)}
/* 열리는 순간 번쩍 */
.gx-cflash{position:absolute; inset:-3%; border-radius:12%; background:#fff; pointer-events:none; z-index:3; animation:gxCF .42s ease-out forwards}
@keyframes gxCF{0%{opacity:.95} 100%{opacity:0; transform:scale(1.18)}}
/* R·SR 빛기둥 */
.gx-pillar{position:absolute; left:50%; top:-70%; width:80%; height:240%; translate:-50% 0; pointer-events:none; z-index:-1; border-radius:50%;
  background:linear-gradient(90deg,transparent,var(--pc) 38%,#fff 50%,var(--pc) 62%,transparent); filter:blur(3px); animation:gxPillar .85s ease-out forwards}
@keyframes gxPillar{0%{opacity:0; transform:scaleX(.08)} 22%{opacity:1; transform:scaleX(1)} 100%{opacity:0; transform:scaleX(.45)}}
/* 모집 봉투 */
.gx-pack{position:absolute; z-index:4; width:var(--w); aspect-ratio:1/1.333; translate:-50% -50%; animation:gxPackIn .5s cubic-bezier(.3,.8,.4,1) both}
.gx-pack .gx-back{position:absolute; inset:0}
.gx-pack .b2{transform:rotate(-8deg) translate(-7%,2%)}
.gx-pack .b3{transform:rotate(9deg) translate(8%,3%)}
.gx-pk-glow{position:absolute; left:50%; top:50%; width:250%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side,var(--ac,rgba(255,255,255,.55)),transparent); animation:gxAura 1s ease-in-out infinite}
.gx-pack.h-r{--ac:rgba(80,165,255,.85)} .gx-pack.h-sr{--ac:rgba(255,205,70,.95)}
.gx-pack.h-r .gx-back{border-color:#6fb6ff; box-shadow:0 0 16px 4px rgba(80,165,255,.75)}
.gx-pack.h-sr .gx-back{border-color:#ffd970; box-shadow:0 0 24px 7px rgba(255,205,70,.9)}
.gx-pk-n{position:absolute; right:-16%; bottom:-6%; z-index:2; font-size:calc(var(--w) * .2); font-weight:900; color:#fff; line-height:1.15;
  background:linear-gradient(#f0563f,#b3261a); border:2px solid #2a1a0c; border-radius:12px; padding:0 .3em .05em; box-shadow:0 3px 0 #2a1a0c; rotate:8deg}
.gx-pack.charge{animation:gxCharge .07s linear infinite}
.gx-pack.charge .gx-pk-glow{animation:gxGlowUp 1s ease-in forwards}
@keyframes gxGlowUp{0%{scale:1; opacity:.7} 100%{scale:1.9; opacity:1}}
@keyframes gxCharge{0%{transform:translate(0,0) rotate(0)} 25%{transform:translate(-3px,1px) rotate(-1.6deg)} 75%{transform:translate(3px,-1px) rotate(1.6deg)}}
.gx-pack.boom{animation:gxBoom .2s ease-in forwards}
@keyframes gxBoom{to{transform:scale(1.6); opacity:0}}
@keyframes gxPackIn{0%{opacity:0; transform:translateY(-60vh) rotate(-22deg)} 55%{opacity:1; transform:translateY(0) scale(1.16,.84)} 75%{transform:scale(.93,1.08)} 90%{transform:scale(1.03,.98)} 100%{transform:none}}
/* 빨려 드는 빛 */
.gx-suck{position:absolute; width:7px; height:7px; margin:-3.5px; border-radius:50%; background:#fff; box-shadow:0 0 10px 2px var(--rc,#fff); pointer-events:none; z-index:5;
  animation:gxSuck .55s ease-in forwards}
@keyframes gxSuck{0%{opacity:0; transform:translate(var(--dx),var(--dy)) scale(1.5)} 30%{opacity:1} 100%{opacity:0; transform:translate(0,0) scale(.3)}}
/* 터지는 큰 고리 */
.gx-bigring{position:absolute; width:70px; height:70px; margin:-35px; border-radius:50%; border:6px solid var(--rc,#fff); pointer-events:none; z-index:5;
  box-shadow:0 0 18px var(--rc,#fff), inset 0 0 12px var(--rc,#fff); animation:gxRing .8s ease-out both}
/* SR 직전 — 무대가 어두워진다 */
#gx .gx-bg{transition:filter .35s}
#gx.dark .gx-bg{filter:brightness(.35)}
#gx.dark .gx-rays{opacity:.15}
@media (prefers-reduced-motion:reduce){
  .gx-pack, .gx-pack.charge, .gx-card.pop, .gx-card.land, .gx-card.hop, .gx-back .gx-shine{animation-duration:.01s !important; animation-iteration-count:1 !important}
}

/* ═══ 9. 1장 뽑기 정중앙 · 별 → 등급 딱지 (2026-10-07) ═══════════════
   카드가 정중앙에 서고, 빛살·빛무리·번쩍임이 ★카드 중심(--cy)에서 나온다. 이름은 카드 오른쪽에 왼쪽 맞춤. */
#gx .gx-rays{top:var(--cy,56%)}
#gx .gx-tint{background:radial-gradient(ellipse at 50% var(--cy,55%),var(--tc,rgba(255,210,90,.55)) 0%,transparent 62%)}
#gx .gx-flash{background:radial-gradient(circle at 50% var(--cy,48%),#fffbe6 0%,rgba(255,236,170,.75) 35%,rgba(255,210,90,0) 70%)}
.gx-name{transform:none; text-align:left; animation:gxName2 .4s cubic-bezier(.2,1.4,.4,1) both}
@keyframes gxName2{0%{opacity:0; transform:translateX(-14px) scale(.85)} 100%{opacity:1; transform:none}}
.gx-tier{position:absolute; z-index:3; pointer-events:none; display:inline-block; font-style:normal; font-weight:900; font-size:20px; letter-spacing:-.3px;
  padding:3px 14px 4px; border-radius:11px; border:2px solid #2a1a0c; box-shadow:0 3px 0 #2a1a0c; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.35);
  background:linear-gradient(#a7b0bb,#6b7480); rotate:-5deg; animation:rwStamp .45s both}
.gx-tier.t-r{background:linear-gradient(#67b3ff,#1f5fb4)}
.gx-tier.t-sr{background:linear-gradient(#ff7a6b,#c4173a); font-size:22px}
/* SR 컷인 — 카드만 정중앙, 이름은 오른쪽에 붙는다 */
#gx .gx-cut .gx-cut-info{position:absolute; top:50%; translate:0 -50%}
#gx .gx-cut .gx-cut-info .gx-tier{position:relative; display:inline-block; margin-top:12px; animation-delay:.45s}