/* 뽑기 화면 — 글 없이 색과 움직임으로만 말한다. */
.gacha{position:fixed;inset:0;z-index:10;display:grid;
  grid-template-rows:auto 1fr auto;
  background:rgba(24,18,10,.55);backdrop-filter:blur(3px)}

/* 이 화면이 숲 HUD를 덮으므로 이슬을 여기 다시 보여준다 */
.gacha-hud{display:flex;gap:8px;padding:8px 10px}
.gacha-hud .coin{background:var(--panel);border:3px solid var(--wood);border-radius:999px;
  display:flex;align-items:center;gap:6px;padding:4px 12px 4px 6px;
  box-shadow:0 3px 0 rgba(0,0,0,.18)}
.gacha-hud .coin-icon{width:clamp(30px,6.5vmin,44px);height:clamp(30px,6.5vmin,44px);
  object-fit:contain;display:block;flex:none}
.gacha-hud .coin-num{font-variant-numeric:tabular-nums}

.gacha-stage{position:relative;display:grid;place-items:center;min-height:0}

/* 캡슐 — 위/아래 반쪽이 맞물려 있다가 열린다 */
.capsule{position:relative;width:min(46vmin,300px);aspect-ratio:1;display:grid;place-items:center}
.capsule img{position:absolute;width:100%;object-fit:contain;pointer-events:none}
.capsule .top{transform-origin:50% 85%;transition:transform .5s cubic-bezier(.3,-0.4,.4,1.4),opacity .4s}
.capsule .bottom{transform-origin:50% 15%;transition:transform .5s ease-out}
.capsule.open .top{transform:translateY(-52%) rotate(-16deg);opacity:0}
.capsule.open .bottom{transform:translateY(14%)}
.capsule.shake{animation:shake .5s ease-in-out}
@keyframes shake{
  0%,100%{transform:translateX(0) rotate(0)}
  20%{transform:translateX(-4%) rotate(-4deg)}
  50%{transform:translateX(4%) rotate(4deg)}
  80%{transform:translateX(-2%) rotate(-2deg)}}

/* 알 — 캡슐이 열리면 떠오른다 */
.eggs{position:absolute;inset:0;display:flex;flex-wrap:wrap;gap:2%;
  align-content:center;justify-content:center;pointer-events:none}
.egg{width:min(20vmin,120px);aspect-ratio:.82;object-fit:contain;
  opacity:0;transform:translateY(20%) scale(.7);
  animation:eggUp .5s cubic-bezier(.2,1.3,.4,1) forwards}
.egg.one{width:min(38vmin,240px)}
.egg-fallback{border-radius:50% 50% 46% 46%/58% 58% 42% 42%;
  border:4px solid rgba(0,0,0,.35)}
@keyframes eggUp{to{opacity:1;transform:translateY(0) scale(1)}}

/* 빛줄기 — 전설이 나올 때만 */
.rayburst{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.rayburst img{width:120%;height:120%;object-fit:contain;opacity:0;
  animation:ray .9s ease-out forwards}
@keyframes ray{0%{opacity:0;transform:scale(.4)}40%{opacity:.95}100%{opacity:0;transform:scale(1.25)}}

/* 아래 버튼 두 개 — 살 수 있을 때만 빛난다 */
.gacha-buttons{display:flex;gap:10px;padding:0 12px calc(12px + env(safe-area-inset-bottom))}
.gacha-btn{flex:1 1 0;min-height:var(--touch);display:grid;place-items:center;gap:2px;
  background:var(--panel);border:4px solid var(--wood);border-radius:22px;padding:8px 4px;
  cursor:pointer;opacity:.55;filter:grayscale(.65);transition:transform .08s,opacity .2s,filter .2s}
.gacha-btn .cost{display:flex;align-items:center;gap:4px;font-size:.62em;font-variant-numeric:tabular-nums}
.gacha-btn .cost img{width:24px;height:24px}
.gacha-btn .n{font-size:.9em}
.gacha-btn.can{opacity:1;filter:none;animation:glow 1.15s ease-in-out infinite}
.gacha-btn.can:active{transform:scale(.93)}

/* 닫기 — 오른쪽 위, 아이콘만 */
.gacha-close{position:absolute;top:10px;right:10px;width:var(--touch);height:var(--touch);
  border:4px solid var(--wood);border-radius:50%;background:var(--panel);
  display:grid;place-items:center;cursor:pointer;z-index:2}
.gacha-close img{width:60%;height:60%;object-fit:contain}