/* 캡슐 개봉 무대: 화면 전체를 어두운 극장처럼. 3D는 rpg-gacha-stage.js, 글씨는 rpg-gacha-ui.js */
#rpg-app .rpg-game .rpg-modal-wrap.gacha-staging{padding:0!important;background:#0a0d18!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;display:block!important;overflow:hidden!important}
.gacha-stage{--r:#ffcf4a;position:fixed;inset:0;z-index:1;color:#f4efe6;font-family:"Noto Sans KR",sans-serif;overflow:hidden;
 background:radial-gradient(ellipse 70% 60% at 50% 42%,color-mix(in srgb,var(--r) 24%,#1d2442) 0%,#131a30 52%,#0a0d18 100%)}
.gacha-stage.ten{--r:#7fd1e8}.gacha-stage.ten.r-SSR{--r:#ffcf4a}.gacha-stage.ten.r-SR{--r:#c79bff}
.gacha-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 55%,#0008 100%)}
.gacha-stage .gs-view{position:absolute;inset:0}
.gacha-stage .gs-canvas{display:block;width:100%;height:100%;cursor:pointer;touch-action:none}
.gacha-stage.opened .gs-canvas{cursor:grab}
.gacha-stage .gs-top{position:absolute;top:26px;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;z-index:2;display:grid;gap:4px;width:max-content;max-width:80vw}
.gacha-stage .gs-top small{font:700 11px "Outfit",sans-serif;letter-spacing:.3em;color:color-mix(in srgb,var(--r) 70%,#fff)}
.gacha-stage .gs-top b{font:700 30px/1.25 "Noto Serif KR",serif;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 18px #0009}
.gacha-stage.r-SSR.opened .gs-top b{background:linear-gradient(90deg,#fff3b0,#ffcf4a 40%,#fff 60%,#ffcf4a);-webkit-background-clip:text;background-clip:text;color:transparent;animation:gs-shine 2.4s linear infinite;background-size:200% 100%}
@keyframes gs-shine{to{background-position:-200% 0}}
.gacha-stage .gs-x{position:absolute;top:22px;right:24px;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid #ffffff40;background:#0b0f1d99;color:#fff;font-size:22px;line-height:1;cursor:pointer;backdrop-filter:blur(6px)}
.gacha-stage .gs-x:hover{background:#ffffff22}
.gacha-stage .gs-hint{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);z-index:2;margin:0;padding:10px 18px;border-radius:999px;background:#0b0f1dcc;border:1px solid #ffffff2a;font-size:14px;white-space:nowrap;pointer-events:none;animation:gs-breathe 1.8s ease-in-out infinite}
.gacha-stage .gs-hint b{color:var(--r)}
@keyframes gs-breathe{50%{opacity:.7}}
.gacha-stage kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;margin:0 3px;border-radius:6px;background:#f4efe6;color:#1b2136;font:800 12px "Outfit",sans-serif;box-shadow:0 2px 0 #9a93a6}
.gacha-stage .gs-skip{position:absolute;right:26px;bottom:28px;z-index:2;padding:9px 16px;border-radius:999px;border:1px solid #ffffff38;background:transparent;color:#d8d2e4;font:700 13px "Noto Sans KR",sans-serif;cursor:pointer}
.gacha-stage .gs-skip:hover{background:#ffffff14;color:#fff}
.gacha-stage [hidden]{display:none!important}

/* 한 알 결과 카드 */
.gacha-stage .gs-card{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:2;width:min(460px,92vw);padding:20px 24px 18px;border-radius:20px;text-align:center;
 background:linear-gradient(180deg,#1d2440f2,#141a30f7);border:1px solid color-mix(in srgb,var(--r) 55%,#ffffff22);box-shadow:0 0 0 1px #0006,0 20px 60px #0009,0 0 40px color-mix(in srgb,var(--r) 25%,transparent);animation:gs-rise .55s cubic-bezier(.2,1.3,.4,1)}
.gacha-stage .gs-card::before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--r),transparent)}
@keyframes gs-rise{from{opacity:0;transform:translate(-50%,30px)}}
.gacha-stage .gs-tier{display:inline-block;padding:3px 12px;border-radius:999px;background:color-mix(in srgb,var(--r) 22%,#0000);border:1px solid var(--r);color:color-mix(in srgb,var(--r) 75%,#fff);font:800 12px "Outfit",sans-serif;letter-spacing:.14em;font-style:normal}
.gacha-stage .gs-card h2{margin:10px 0 2px;font:700 26px/1.3 "Noto Serif KR",serif;color:#fff;letter-spacing:-.02em}
.gacha-stage .gs-kind{display:block;color:#a9a3b8;font-size:12px;margin-bottom:8px}
.gacha-stage .gs-card p{margin:6px 0;color:#e2dcea;font-size:14px;line-height:1.55}
.gacha-stage .gs-card p b{color:color-mix(in srgb,var(--r) 70%,#fff)}
.gacha-stage .gs-extra{padding:8px 12px;border-radius:12px;background:#ffffff0d;font-size:13px!important}
.gacha-stage .gs-extra.set{background:linear-gradient(120deg,#ff9cd233,#ffd16633);color:#fff!important}
.gacha-stage .gs-actions{display:flex;gap:10px;justify-content:center;margin-top:14px}
.gacha-stage .gs-actions .rpg-btn{min-width:120px;padding:11px 18px!important;border-radius:12px!important;border:1px solid #ffffff38!important;background:#ffffff12!important;color:#fff!important;font:700 14px "Noto Sans KR",sans-serif!important;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex-direction:column;line-height:1.2;cursor:pointer}
.gacha-stage .gs-actions .rpg-btn:not(.gold){flex-direction:row}
.gacha-stage .gs-actions .rpg-btn:hover{background:#ffffff22!important}
.gacha-stage .gs-actions .rpg-btn.gold{background:linear-gradient(180deg,#ffd979,#e0a93a)!important;color:#2a1c05!important;border-color:#fff3b0!important;box-shadow:0 6px 20px #e0a93a55}
.gacha-stage .gs-actions .rpg-btn small{font:600 11px "Noto Sans KR",sans-serif;opacity:.8}
.gacha-stage .gs-actions .rpg-btn:disabled{opacity:.45;cursor:not-allowed}
.gacha-stage .gs-actions kbd{height:18px;min-width:18px;font-size:10px;margin:0}

/* 10회 결과 */
.gacha-stage .gs-ten{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;width:min(1000px,95vw);padding:16px 18px 14px;border-radius:20px;background:linear-gradient(180deg,#1d2440ee,#141a30f5);border:1px solid #ffffff26;box-shadow:0 20px 60px #0009;animation:gs-rise .5s cubic-bezier(.2,1.2,.4,1)}
.gacha-stage .gs-sum{margin:0 0 10px;text-align:center;color:#cfc8dc;font-size:13px}
.gacha-stage .gs-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.gacha-stage .gs-prize{position:relative;display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:8px 10px;border-radius:12px;background:#ffffff0c;border:1px solid #ffffff18;border-top:2px solid var(--rarity);text-align:left;animation:gs-pop .4s backwards}
.gacha-stage .gs-prize:nth-child(n){animation-delay:calc(var(--i,0) * 40ms)}
@keyframes gs-pop{from{opacity:0;transform:scale(.9)}}
.gacha-stage .gs-prize i{grid-row:1/3;width:52px;height:52px;display:grid;place-items:center;font-size:30px;font-style:normal;border-radius:10px;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--rarity) 30%,#0000),transparent 70%)}
.gacha-stage .gs-prize i img{width:52px;height:52px}
.gacha-stage .gs-prize em{position:absolute;top:6px;right:8px;font:800 10px "Outfit",sans-serif;letter-spacing:.08em;color:var(--rarity);font-style:normal}
.gacha-stage .gs-prize u{position:absolute;top:-7px;left:8px;padding:1px 6px;border-radius:6px;background:#ff5f8f;color:#fff;font:800 9px "Outfit",sans-serif;text-decoration:none;letter-spacing:.06em}
.gacha-stage .gs-prize b{font-size:12.5px;line-height:1.3;color:#fff;padding-right:22px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gacha-stage .gs-prize small{font-size:11px;color:#a9a3b8}
.gacha-stage .gs-prize.t-SSR{background:linear-gradient(135deg,#ffcf4a2a,#ff8fa31a);box-shadow:0 0 18px #ffcf4a40;border-color:#ffcf4a80}
.gacha-stage .gs-prize.t-SR{background:#c79bff18}
.gacha-stage .gacha-status{margin:8px 0 0;text-align:center;color:#ffb3c6;font-size:13px;min-height:0}
.gacha-stage .gacha-status:empty{display:none}

@media (max-width:760px){
 .gacha-stage .gs-top{top:18px}.gacha-stage .gs-top b{font-size:22px}
 .gacha-stage .gs-x{top:14px;right:14px;width:40px;height:40px}
 .gacha-stage .gs-card{bottom:16px;padding:16px}.gacha-stage .gs-card h2{font-size:21px}
 .gacha-stage .gs-grid{grid-template-columns:repeat(2,1fr);max-height:42vh;overflow:auto}
 .gacha-stage .gs-hint{bottom:70px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){.gacha-stage *{animation:none!important}}

/* 도감: 3D 썸네일. 아직 못 만난 상품은 실루엣 */
.gacha-book .prize-thumb{width:64px;height:64px;display:block;margin:0 auto;filter:drop-shadow(0 4px 6px #0003)}
.gacha-book .prize-thumb.unknown{filter:brightness(0) invert(.9) opacity(.2)}
.ten-prize .prize-thumb{width:56px;height:56px}
.gacha-stage .gs-actions .rpg-btn::before,.gacha-stage .gs-actions .rpg-btn::after{display:none!important}
.gacha-stage .gs-actions .rpg-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* 가챠샵 F 안내: 아래 조작 안내 줄과 겹치지 않게 화면 기준으로 띄운다 */
#rpg-app .gacha-hud .gh-prompt{position:fixed;bottom:calc(172px * var(--ui,1));z-index:5}
@media (max-width:640px){#rpg-app .gacha-hud .gh-prompt{bottom:170px}}
/* 통통 놀이터 HUD */
.gacha-hud .gh-park{display:flex;flex-wrap:wrap;gap:4px 10px;margin:4px 0 0!important;font-size:12px;opacity:.9}
.gacha-hud .gh-park kbd{display:inline-block;padding:0 5px;border-radius:5px;background:#3d2b4a;color:#fff;font:700 10px "Outfit",sans-serif;margin-right:3px}
.gacha-hud .gh-combo{position:fixed;left:50%;top:37%;transform:translateX(-50%);font:900 40px/1 "Outfit","Jua",sans-serif;color:#fff;text-shadow:0 3px 0 #ff6f91,0 0 24px #ff6f9188;letter-spacing:.02em;pointer-events:none;animation:gh-combo .3s cubic-bezier(.3,1.8,.5,1)}
@keyframes gh-combo{from{transform:translateX(-50%) scale(.6)}}
.gacha-hud .gh-jump{display:none}
@media (pointer:coarse){.gacha-hud .gh-jump{display:grid;place-items:center;position:fixed;right:22px;bottom:150px;width:78px;height:78px;border-radius:50%;border:3px solid #fff;background:radial-gradient(circle at 40% 35%,#ffb3c6,#ff6f91);color:#fff;font:900 17px "Jua",sans-serif;box-shadow:0 6px 0 #c94d72,0 10px 24px #0004;pointer-events:auto;touch-action:manipulation;z-index:7}
 .gacha-hud .gh-jump:active{transform:translateY(4px);box-shadow:0 2px 0 #c94d72}}
