/* 뽑기 연출 「명부를 펼친다」 — js/gacha_fx.js 와 짝 */
.gx{position:fixed;inset:0;z-index:160;overflow:hidden;color:var(--paper);opacity:0;transition:opacity .22s;
  background:radial-gradient(90% 70% at 50% 45%,#1E1519 0%,#0B0A0E 72%);-webkit-tap-highlight-color:transparent;user-select:none}
.gx.in{opacity:1}
.gx.bye{opacity:0}
.gx::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(55% 42% at 50% 47%,var(--hcA,transparent),transparent 72%)}
.gx.lit::before{opacity:1}
.gx::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:screen;
  background-image:radial-gradient(rgba(255,255,255,.7) 1px,transparent 1.3px);background-size:5px 5px}
.gxCv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.gxFlash{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:6}
.gxFlash.on{animation:gxFlash .45s ease-out}
@keyframes gxFlash{0%{opacity:.8}100%{opacity:0}}
.gxTitle{position:absolute;left:60px;right:60px;top:calc(14px + env(safe-area-inset-top));z-index:7;text-align:center;font:19px 'Black Han Sans',sans-serif;letter-spacing:.5px}
.gxSkip{position:absolute;right:8px;top:calc(6px + env(safe-area-inset-top));z-index:9;min-width:44px;height:44px;padding:0 12px;border:0;border-radius:22px;
  background:rgba(255,255,255,.08);color:var(--paper);font:14px 'Black Han Sans',sans-serif}

/* ① 의식 */
.gxStage{position:absolute;left:50%;top:46%;width:240px;height:300px;margin:-150px 0 0 -120px;z-index:3;transition:opacity .35s,transform .35s}
.gx.out .gxStage{opacity:0;transform:scale(1.35);pointer-events:none}
.gxCircle{position:absolute;left:10px;top:20px;width:220px;height:220px;transform:rotate(-90deg)}
.gxCircle circle{fill:none}
.gxCircle .base{stroke:rgba(242,235,221,.16);stroke-width:15;opacity:0;transition:opacity .4s .1s}
.gx.draw .gxCircle .base{opacity:1}
.gxCircle .ink{stroke:#0E0D10;stroke-width:9;stroke-linecap:round;stroke-dasharray:604;stroke-dashoffset:604;transition:stroke-dashoffset .75s cubic-bezier(.5,0,.3,1);
  filter:drop-shadow(0 0 1px rgba(255,255,255,.35))}
.gx.draw .gxCircle .ink{stroke-dashoffset:0}
.gxCircle .halo{stroke:var(--hc,#555);stroke-width:2;opacity:0;transition:opacity .4s,stroke .3s}
.gx.lit .gxCircle .halo{opacity:.9;filter:drop-shadow(0 0 8px var(--hc));animation:gxHalo 1.1s ease-in-out infinite}
@keyframes gxHalo{50%{stroke-width:5}}
.gxTal{position:absolute;left:50%;top:130px;width:104px;height:160px;margin:-80px 0 0 -52px;opacity:0;transform:translateY(16px) scale(.9);transition:opacity .4s .55s,transform .5s .55s}
.gx.draw .gxTal{opacity:1;transform:none}
.gxPaper{position:relative;width:100%;height:100%;border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:linear-gradient(172deg,#F4D873,#E2B23C);color:#B3170F;box-shadow:0 6px 20px rgba(0,0,0,.6),inset 0 0 0 2px rgba(179,23,15,.55),inset 0 0 0 6px rgba(244,216,115,1),inset 0 0 0 7px rgba(179,23,15,.4);
  transition:box-shadow .3s}
.gx.prem .gxPaper{background:linear-gradient(172deg,#C9271D,#8C120B);color:#F6D27A;box-shadow:0 6px 20px rgba(0,0,0,.6),inset 0 0 0 2px rgba(246,210,122,.6),inset 0 0 0 6px #A9180F,inset 0 0 0 7px rgba(246,210,122,.45)}
.gxPaper b{font:900 54px/1 'Noto Serif KR',serif}
.gxPaper i{font:900 15px/1.1 'Noto Serif KR',serif;font-style:normal;writing-mode:vertical-rl;letter-spacing:4px;margin-top:4px}
.gxPaper em{position:absolute;bottom:9px;font:13px 'Black Han Sans',sans-serif;font-style:normal;padding:1px 4px;border:1.5px solid currentColor;border-radius:3px;opacity:.85}
.gx.lit .gxPaper{box-shadow:0 0 22px var(--hc),0 0 70px var(--hc),inset 0 0 0 2px rgba(179,23,15,.55),inset 0 0 0 6px rgba(244,216,115,1),inset 0 0 0 7px rgba(179,23,15,.4);animation:gxBurn 1.4s ease-in-out infinite}
.gx.prem.lit .gxPaper{box-shadow:0 0 22px var(--hc),0 0 70px var(--hc),inset 0 0 0 2px rgba(246,210,122,.6),inset 0 0 0 6px #A9180F,inset 0 0 0 7px rgba(246,210,122,.45)}
@keyframes gxBurn{50%{filter:brightness(1.18)}}
.gx.up .gxTal{animation:gxShake .45s}
@keyframes gxShake{15%{transform:translate(-6px,2px) rotate(-3deg)}35%{transform:translate(6px,-2px) rotate(3deg)}55%{transform:translate(-4px,1px)}75%{transform:translate(3px,0)}}
.gxHint{position:absolute;left:-40px;right:-40px;top:268px;text-align:center;font:16px 'Black Han Sans',sans-serif;color:var(--hc,#ccc);text-shadow:0 0 12px var(--hc,transparent);min-height:20px}

/* ③ 카드 */
.gxGrid{position:absolute;left:14px;right:14px;top:50%;max-width:440px;margin:0 auto;transform:translateY(-58%);z-index:2;
  display:grid;grid-template-columns:repeat(5,1fr);gap:9px 8px}
.gxGrid.n1{grid-template-columns:1fr;width:min(52vw,220px);left:0;right:0}
.gxCard{position:relative;aspect-ratio:3/4;perspective:700px;opacity:0;--gc:#9A96A0;--gcA:rgba(154,150,160,.25)}
.gxCard.fly{animation:gxFly .55s cubic-bezier(.18,.9,.25,1) both}
.gxCard.shown{opacity:1}
@keyframes gxFly{0%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.25) rotate(var(--rot))}35%{opacity:1}100%{opacity:1;transform:none}}
.gxIn{position:relative;width:100%;height:100%;transition:transform .5s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.gxCard.on .gxIn{transform:rotateY(180deg)}
.gxBack,.gxFront{position:absolute;inset:0;border-radius:7px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.gxBack{display:grid;place-items:center;background:var(--back);box-shadow:0 0 0 1.5px #3A3840,0 4px 10px rgba(0,0,0,.5)}
.gxBack b{font:13px 'Black Han Sans',sans-serif;color:var(--paper)}
.gxFront{transform:rotateY(180deg);background:#000 center/cover;box-shadow:0 0 0 2px var(--gc)}
.gxCard.g-R{--gc:#3FAE8C;--gcA:rgba(63,174,140,.28)}
.gxCard.g-SR{--gc:#4F86F0;--gcA:rgba(79,134,240,.3)}
.gxCard.g-SSR{--gc:#B865F0;--gcA:rgba(184,101,240,.32)}
.gxCard.g-UR{--gc:#F5B941;--gcA:rgba(245,185,65,.34)}
.gxCard.on.g-SR .gxFront{box-shadow:0 0 0 2px var(--gc),0 0 14px var(--gc)}
.gxCard.on.g-SSR .gxFront,.gxCard.on.g-UR .gxFront{box-shadow:0 0 0 3px var(--gc),0 0 22px var(--gc);animation:gxGlow 1.3s ease-in-out infinite}
@keyframes gxGlow{50%{filter:brightness(1.22)}}
.gxCard.charge{opacity:1;animation:gxCharge .7s ease-in both}
.gxCard.charge .gxBack{box-shadow:0 0 0 2px var(--gc),0 0 30px var(--gc)}
@keyframes gxCharge{0%{transform:none}20%{transform:translate(-2px,1px) scale(1.04)}40%{transform:translate(2px,-1px) scale(1.07)}60%{transform:translate(-3px,1px) scale(1.1)}80%{transform:translate(3px,-1px) scale(1.12)}100%{transform:scale(1.12)}}
.gxFront .g{position:absolute;left:3px;top:3px;padding:0 4px;border-radius:3px;background:var(--gc);font:13px 'Black Han Sans',sans-serif;color:#fff}
.gxFront .nw{position:absolute;right:3px;top:3px;padding:0 3px;border-radius:3px;background:var(--red);font:13px 'Black Han Sans',sans-serif;color:#fff}
.gxFront .lv{position:absolute;right:3px;top:3px;padding:0 3px;border-radius:3px;background:rgba(0,0,0,.7);font:13px 'Black Han Sans',sans-serif;color:var(--gold)}
.gxFront .pu{position:absolute;left:0;right:0;bottom:17px;text-align:center;font:13px/13px 'Black Han Sans',sans-serif;color:var(--ink);background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent)}
.gxFront .n{position:absolute;left:0;right:0;bottom:0;padding:9px 2px 3px;font:13px 'Black Han Sans',sans-serif;text-align:center;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.88));border-radius:0 0 7px 7px}
.gxGrid.n1 .gxFront .n{font-size:17px}.gxGrid.n1 .gxFront .g{font-size:14px}.gxGrid.n1 .gxFront .nw,.gxGrid.n1 .gxFront .lv{font-size:13px}
.gxGrid.n1 .gxFront .pu{font-size:13px;line-height:18px;bottom:30px}
.gxRing{position:absolute;z-index:5;width:30px;height:30px;margin:-15px 0 0 -15px;border:3px solid;border-radius:50%;pointer-events:none;animation:gxRing .6s ease-out forwards}
@keyframes gxRing{to{transform:scale(5);opacity:0;border-width:1px}}

/* 세로 폰(10-20 Macho 「모바일에서는 세로잖아, 카드가 작게 보이는 게 맞아? 좀 더 키울 수 없나」) —
   10장을 5·5 대신 4·4·2(가운데 정렬)로 놓아 카드가 약 1.3배(375 폭: 63 → 82px). 가로·낮은 화면은 아래 5칸 그대로 */
@media (orientation:portrait) and (min-height:600px){
  .gxGrid.n10{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 8px;left:10px;right:10px}
  .gxGrid.n10 .gxCard{flex:0 0 calc((100% - 24px) / 4)}
  .gxGrid.n10 .gxFront .n{font-size:13px;padding-top:12px}
  .gxGrid.n10 .gxFront .g{font-size:13px}.gxGrid.n10 .gxFront .nw,.gxGrid.n10 .gxFront .lv{font-size:13px}
  .gx.sum .gxGrid.n10{transform:translateY(-70%)}
}
.gx.sum .gxCard{cursor:pointer}
.gx.under{z-index:70}   /* 결과에서 카드 창(#sheet z 80)을 띄우는 동안 뽑기 화면을 그 아래로 */
.gxTip{margin:-4px 0 10px;text-align:center;font-size:13px;color:rgba(242,235,221,.6)}

/* 2판(2026-10-20 Macho 「카드 연출을 더 고도화시켜, 한번에 10장 나오는데 허접해」) —
   한 장씩 착지 · 등급 예고(뒷면이 제 색으로 달아오르며 떨림) · 뒤집힐 때 「팡」 · 등급 테두리 · 마무리 물결 (js/gacha_fx.js)
   ★날기(.fly)가 끝나면 JS 가 .fly 를 걷고 .shown 으로 고정한다 — 아래 애니가 .fly 를 덮어써 카드가 사라지지 않게 */
.gxCard.land{animation:gxLand .32s cubic-bezier(.3,1.6,.5,1)}
@keyframes gxLand{0%{transform:translateY(-7px) scale(1.07)}100%{transform:none}}
.gxCard.pre{animation:gxPreShake .5s ease-in-out infinite}
.gxCard.pre .gxBack{box-shadow:0 0 0 2px var(--gc),0 0 18px var(--gc);animation:gxPre .7s ease-in-out infinite alternate}
@keyframes gxPre{from{filter:brightness(1)}to{filter:brightness(1.4)}}
@keyframes gxPreShake{25%{transform:rotate(-1.6deg)}75%{transform:rotate(1.6deg)}}
.gxCard.pop{animation:gxPop .38s cubic-bezier(.2,1.5,.4,1)}
.gxCard.pop.g-SR,.gxCard.pop.g-SSR,.gxCard.pop.g-UR{animation:gxPopBig .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes gxPop{40%{transform:scale(1.14)}100%{transform:none}}
@keyframes gxPopBig{35%{transform:scale(1.3) rotate(-4deg)}60%{transform:scale(1.17) rotate(3deg)}100%{transform:none}}
.gxCard.wave{animation:gxWave .45s var(--wd,0ms) cubic-bezier(.3,1.5,.5,1) both}
@keyframes gxWave{45%{transform:translateY(-10px)}100%{transform:none}}
/* 등급 테두리 — N 회색 선 · R 초록 빛 · SR 파랑 빛 · SSR 보라 · UR 금빛(위 .gxCard.on.g-* 와 함께) */
.gxCard.on.g-R .gxFront{box-shadow:0 0 0 2px var(--gc),0 0 9px var(--gcA)}
/* 반짝임 — R 은 뒤집힐 때 한 번, SR 이상은 되풀이 */
.gxFront::before{content:"";position:absolute;inset:0;border-radius:7px;pointer-events:none;opacity:0;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.62) 50%,transparent 65%) no-repeat;background-size:250% 100%}
.gxCard.on.g-R .gxFront::before{animation:gxShine .8s .2s ease-out 1}
.gxCard.on.g-SR .gxFront::before,.gxCard.on.g-SSR .gxFront::before,.gxCard.on.g-UR .gxFront::before{animation:gxShine 2.6s .2s ease-in-out infinite}
@keyframes gxShine{0%{opacity:1;background-position:130% 0}45%{opacity:1;background-position:-30% 0}46%,100%{opacity:0;background-position:-30% 0}}
/* SSR·UR — 테두리를 따라 빛이 돈다 */
@property --gxa{syntax:'<angle>';inherits:false;initial-value:0deg}
.gxCard.on.g-SSR .gxFront::after,.gxCard.on.g-UR .gxFront::after{content:"";position:absolute;inset:-3px;border-radius:9px;padding:3px;pointer-events:none;
  background:conic-gradient(from var(--gxa),var(--gc),#fff 12%,var(--gc) 25%,transparent 40%,var(--gc) 55%,#fff 68%,var(--gc) 80%,transparent 92%,var(--gc));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:gxSpinB 2.2s linear infinite}
.gxCard.on.g-UR .gxFront::after{background:conic-gradient(from var(--gxa),#F5B941,#FFF6C8 12%,#E5452F 25%,#F5B941 38%,#7FE0FF 52%,#FFF6C8 64%,#F5B941 78%,#E5452F 90%,#F5B941)}
@keyframes gxSpinB{to{--gxa:360deg}}
.gx.rm .gxCard.pre,.gx.rm .gxCard.pop,.gx.rm .gxCard.wave,.gx.rm .gxCard.land{animation:none}

/* SSR·UR 확대 */
.gxClose{position:absolute;inset:0;z-index:8;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;
  background:rgba(6,5,9,.86);--gc:#B865F0;--gcA:rgba(184,101,240,.3)}
.gxClose.on{display:flex}
.gxClose.g-UR{--gc:#F5B941;--gcA:rgba(245,185,65,.34)}
.gxRays{position:absolute;left:50%;top:44%;width:180vmax;height:180vmax;margin:-90vmax 0 0 -90vmax;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,var(--gcA) 0deg 7deg,transparent 7deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 8%,transparent 42%);mask:radial-gradient(circle,#000 8%,transparent 42%);animation:gxSpin 14s linear infinite}
@keyframes gxSpin{to{transform:rotate(360deg)}}
.gxCCard{position:relative;width:min(60vw,260px);aspect-ratio:3/4;border-radius:14px;background:#000 center/cover;
  box-shadow:0 0 0 3px var(--gc),0 0 40px var(--gc),0 0 110px var(--gcA);animation:gxCIn .75s cubic-bezier(.2,1.25,.3,1) both}
@keyframes gxCIn{0%{opacity:0;transform:perspective(700px) rotateY(85deg) scale(.55)}100%{opacity:1;transform:none}}
.gxCCard .g{position:absolute;left:8px;top:8px;padding:2px 8px;border-radius:6px;background:var(--gc);font:16px 'Black Han Sans',sans-serif;color:#fff}
.gxStamp{position:absolute;right:-10px;top:-14px;width:66px;height:66px;border:4px solid var(--red);border-radius:10px;display:grid;place-items:center;
  font:18px 'Black Han Sans',sans-serif;color:var(--red);background:rgba(242,235,221,.94);transform:rotate(-14deg);
  animation:gxStamp .38s .5s cubic-bezier(.2,1.8,.4,1) both}
@keyframes gxStamp{0%{opacity:0;transform:rotate(-14deg) scale(3)}100%{opacity:1;transform:rotate(-14deg)}}
.gxCName{position:relative;font:30px 'Black Han Sans',sans-serif;color:#fff;text-shadow:0 0 18px var(--gc);animation:gxRise .45s .35s both}
.gxCMeta{position:relative;max-width:300px;text-align:center;font-size:14px;line-height:1.5;color:rgba(242,235,221,.85);animation:gxRise .45s .5s both}
.gxCMeta small{font-size:13px;color:rgba(242,235,221,.65)}
.gxTap{position:absolute;bottom:calc(24px + env(safe-area-inset-bottom));font-size:13px;color:rgba(242,235,221,.6);animation:gxBlink 1.2s ease-in-out infinite}
@keyframes gxBlink{50%{opacity:.25}}
@keyframes gxRise{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}

/* ④ 결과 */
.gxSum{position:absolute;left:16px;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:7;max-width:440px;margin:0 auto;display:none}
.gx.sum .gxSum{display:block;animation:gxRise .35s both}
.gxBest{text-align:center;font:17px 'Black Han Sans',sans-serif}
.gxBest b{font-weight:400;padding:0 6px;border-radius:5px;background:var(--gb,#6B6870);color:#fff;margin-right:2px}
.gxCount{margin:6px 0 12px;text-align:center;font-size:13px;color:rgba(242,235,221,.75)}
.gxCount b{color:var(--paper);font-family:'Black Han Sans',sans-serif;font-weight:400}
/* 10-27 뽑은 카드가 명부 점수로 판 보상을 키운다는 것을 한 줄로(FGT 9차) */
.gxMb{margin:0 0 10px;padding:8px 10px;border-radius:10px;background:rgba(242,235,221,.08);border:1px solid rgba(242,235,221,.16);text-align:center;font-size:13px;line-height:1.45;color:rgba(242,235,221,.8)}
.gxMb b{display:block;color:var(--paper);font-size:14px}
.gxMb span{display:block}
.gxMb em{font-style:normal;color:#FFD66B;font-weight:700}
.gxMb.up{border-color:rgba(255,214,107,.6);background:rgba(255,214,107,.12)}
.gxBtns{display:flex;gap:10px}
.gxBtns .btn{flex:1}
.gx .btn.line{color:var(--paper);box-shadow:inset 0 0 0 2px rgba(242,235,221,.55)}
.gx.sum .gxGrid{transform:translateY(-66%)}

/* 움직임 줄이기 설정 */
.gx.rm *,.gx.rm{animation-duration:.01ms !important;transition-duration:.01ms !important}
@media (max-height:680px){ .gxGrid{gap:6px} .gxCCard{width:min(52vw,220px)} .gxCName{font-size:24px} }

/* 낮은·가로 화면(812x375 등) — 결과 카드가 제목·요약과 겹치거나 잘리던 것(2026-10-05). 카드 크기를 높이로도 묶는다 */
.gxGrid.n1{width:min(52vw,220px,calc((100vh - 230px) * .75))}
@media (max-height:520px){
  .gxGrid{max-width:min(440px,calc((100vh - 200px) * 2.4));gap:5px}
  .gx.sum .gxGrid{top:calc(44px + env(safe-area-inset-top));transform:none}
  .gxGrid.n1{width:calc((100vh - 220px) * .75);min-width:90px}
  .gx.sum .gxGrid.n1{top:calc(44px + env(safe-area-inset-top))}
  .gxSum{bottom:calc(8px + env(safe-area-inset-bottom))}
  .gxCount{margin:2px 0 6px}
  .gxBtns .btn{min-height:46px}
  .gxStage{transform:scale(.7)}
  .gxCCard{width:calc((100vh - 170px) * .75)}
  .gxCName{font-size:20px}.gxCMeta{font-size:13px}
}

/* ── 의식 새 무대(2026-10-15) — 명부 두루마리 · 먹 붓 원상 · 붉은 도장(js/gacha_fx.js paintPaper·enso·paintSeal) ── */
.gxTal.gxScroll{left:50%;top:6px;width:226px;height:268px;margin:0 0 0 -113px;opacity:1;transform:none;transition:none}
.gxScroll canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.gxScroll .gxPaperCv,.gxScroll .gxInkCv{clip-path:inset(0 50% 0 50%);transition:clip-path .46s cubic-bezier(.3,.7,.2,1) .05s}
.gx.draw .gxScroll .gxPaperCv,.gx.draw .gxScroll .gxInkCv{clip-path:inset(0 0 0 0)}
.gxScroll .gxPaperCv{box-shadow:0 12px 30px rgba(0,0,0,.7)}
.gxScroll .rod{position:absolute;top:-8px;bottom:-8px;width:12px;left:50%;margin-left:-6px;border-radius:6px;
  background:linear-gradient(90deg,#2a1610,#6b3a22 45%,#2a1610);box-shadow:0 4px 10px rgba(0,0,0,.6);opacity:0;transition:left .46s cubic-bezier(.3,.7,.2,1) .05s,opacity .15s}
.gx.draw .gxScroll .rod{opacity:1}
.gx.draw .gxScroll .rod.l{left:-4px}
.gx.draw .gxScroll .rod.r{left:calc(100% + 4px)}
.gxScroll .gxSealCv{left:auto;top:auto;right:20px;bottom:22px;width:44px;height:56px;opacity:0;transform:scale(2.6) rotate(-16deg)}
.gx.seal .gxScroll .gxSealCv{opacity:.95;transform:rotate(-6deg);transition:transform .15s cubic-bezier(.6,0,.9,.4),opacity .08s}
.gx.seal .gxScroll{animation:gxSealHit .22s .13s}
@keyframes gxSealHit{40%{transform:translateY(3px) scale(.985)}}
.gx.lit .gxScroll .gxInkCv{filter:drop-shadow(0 0 3px var(--hc)) drop-shadow(0 0 14px var(--hc));animation:gxEnsoGlow 1.2s ease-in-out infinite}
@keyframes gxEnsoGlow{50%{filter:drop-shadow(0 0 6px var(--hc)) drop-shadow(0 0 26px var(--hc))}}
.gx.lit .gxScroll .gxPaperCv{box-shadow:0 0 30px var(--hcA,transparent),0 12px 30px rgba(0,0,0,.7)}
.gxStage .gxHint{top:290px}
.gx.rm .gxScroll canvas,.gx.rm .gxScroll .rod{transition:none}

/* 카드 뒷면 = 명부 결(js backURL) · 터질 때 번쩍임은 등급 색으로 옅게(10-15) */
.gx .gxBack{background:var(--gxBack, var(--back)) center/cover}
.gx .gxBack b{display:none}
.gxFlash.on{animation:gxFlash2 .4s ease-out}
@keyframes gxFlash2{0%{opacity:.32}100%{opacity:0}}

/* 미드저니 두루마리 그림을 쓸 때(10-15) — 그림 비율 3:4, 그림 안에 축·테두리가 있어 움직이는 축은 펼친 뒤 걷고 그림자 상자는 뺀다 */
.gxTal.gxScroll{width:180px;height:288px;margin-left:-90px;top:0}
.gxScroll .gxPaperCv.img{box-shadow:none}
.gx.drawn .gxScroll .rod{opacity:0;transition:opacity .25s}
.gxStage .gxHint{top:296px}
.gxScroll .gxSealCv{right:22px;bottom:26px;width:38px;height:48px}
.gx.lit .gxScroll .gxPaperCv.img{box-shadow:none}

/* 뒷배경 — 한밤 막차 객차(미드저니 img/gx_bg.webp, 10-15). 어둡게 깔고 6초 동안 천천히 다가온다 */
.gxBg{position:absolute;inset:0;z-index:0;background:url(../img/gx_bg.webp) center/cover no-repeat;opacity:0;transform:scale(1.12);transition:opacity .6s,transform 6s cubic-bezier(.2,.6,.2,1);pointer-events:none}
.gxBg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(10,9,13,.15),rgba(10,9,13,.88) 78%)}
.gx.in .gxBg{opacity:.5;transform:scale(1)}
.gx.sum .gxBg{opacity:.28}
.gx.rm .gxBg{transition:opacity .3s;transform:none}

/* 10-23 뽑기 10번 — 원래 값 줄 긋기 */
.gOld{opacity:.65;text-decoration:line-through;text-decoration-thickness:1.5px;margin-right:2px}