/* 가챠 — 잘 푼 판에서 상자를 연다.
   총 2.6초. 소원권 변신(4.75초)보다는 짧게, 다만 아이가 "우와" 할 만큼은 화려하게.

   0.0 덮임 · 0.3 상자 등장 · 0.6~1.2 흔들리며 이음새에서 빛이 샘
   1.25 뚜껑 튕겨 나감 + 섬광 + 충격파 · 1.45 아이템 솟아오름
   1.6 반짝임 + 꽃가루 · 1.9 이름 띠 · 2.6 퇴장 */

/* ── 결과 화면의 상자 버튼 ───────────────── */

.chest-btn {
  position: relative; margin-bottom: 14px; border: none; background: none; padding: 0; cursor: pointer;
  width: 142px; display: grid; place-items: center; justify-self: center;
  margin: 2px auto 4px;
  animation: cbBounce 1.9s ease-in-out infinite;
}
.chest-btn > * { grid-area: 1 / 1; }
.chest-btn:active { animation: none; transform: scale(.94); }

.cb-art { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 6px 10px rgba(190, 90, 140, .42)); }
.chest-btn .ch-shadow { fill: #C07AA0; opacity: .3; }

/* 상자 뒤에서 은은하게 도는 빛 — 여기를 누르라는 신호 */
.cb-glow {
  width: 152px; height: 152px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 226, 130, .8), rgba(255, 200, 230, 0) 70%);
  animation: cbGlow 1.9s ease-in-out infinite;
}

.cb-count {
  justify-self: end; align-self: start; transform: translate(6px, 2px);
  min-width: 25px; height: 25px; border-radius: 13px; padding: 0 7px;
  font-size: 13px; font-weight: 800; line-height: 25px; color: #fff;
  background: linear-gradient(180deg, #FF8FBE, #E2497F);
  box-shadow: 0 2px 5px rgba(190, 60, 110, .5), 0 0 0 2.5px #fff;
}

.cb-label {
  align-self: end; transform: translateY(15px);
  font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--deep);
  background: rgba(255, 255, 255, .82); border-radius: 999px; padding: 3px 11px;
}

@keyframes cbBounce {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-7px) rotate(1.5deg); }
}
@keyframes cbGlow {
  0%, 100% { opacity: .55; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* ── 뽑기 연출 ───────────────────────────── */

#gacha {
  position: fixed; inset: 0; max-width: 430px; margin-inline: auto; z-index: 380;
  display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center;
  overflow: hidden;
  background: radial-gradient(120% 74% at 50% 44%, #7A4B7C 0%, #472A54 46%, #2A1735 100%);
  animation: gcIn .28s ease both;
}
#gacha > * { grid-area: 1 / 1; }
@keyframes gcIn { from { opacity: 0; } }
#gacha.is-leaving { animation: gcOut .32s ease both; }
@keyframes gcOut { to { opacity: 0; } }

.gc-rays {
  width: 170vmax; height: 170vmax;
  background: repeating-conic-gradient(from 0deg,
    rgba(255, 236, 178, .16) 0deg 2.6deg, transparent 2.6deg 13deg);
  -webkit-mask: radial-gradient(closest-side, #000 3%, transparent 42%);
          mask: radial-gradient(closest-side, #000 3%, transparent 42%);
  filter: blur(2px);
  animation: gcSpin 18s linear infinite, gcRays .55s 1.2s ease-out both;
}
@keyframes gcSpin { to { transform: rotate(360deg); } }
@keyframes gcRays { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

/* 뚜껑이 열리는 순간 퍼지는 충격파 */
.gc-ring {
  width: 120px; height: 120px; border-radius: 50%;
  border: 5px solid rgba(255, 240, 200, .95);
  animation: gcRing .75s 1.25s cubic-bezier(.15, .8, .3, 1) both;
}
@keyframes gcRing {
  0% { opacity: 0; transform: scale(.2); border-width: 9px; }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(4.6); border-width: 1px; }
}

.gc-box {
  width: 252px;
  animation: gcDrop .45s .3s cubic-bezier(.2, 1.5, .4, 1) both,
             gcShake .3s .68s ease-in-out 2 both,
             gcRock .16s 1.05s ease-in-out 1 both,
             gcGone .28s 1.3s ease-in both;
}
.gc-box svg { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 12px 20px rgba(40, 20, 50, .55)); }
.gc-box .ch-shadow { fill: #2A1735; opacity: .45; }

@keyframes gcDrop { from { opacity: 0; transform: translateY(-90px) scale(.6); } }
@keyframes gcShake {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(4deg) translateY(-7px); }
}
@keyframes gcRock {
  0%, 100% { transform: rotate(0) scale(1); }
  50% { transform: rotate(-8deg) scale(1.08); }
}
@keyframes gcGone { to { opacity: 0; transform: scale(1.35); } }

/* 이음새에서 빛이 새어 나온다 — 열리기 전의 뜸들이기 */
.ch-seam { animation: gcSeam .95s .55s ease-in both; }
@keyframes gcSeam {
  0% { opacity: 0; }
  100% { opacity: 1; filter: drop-shadow(0 0 14px #FFE07A) drop-shadow(0 0 6px #fff); }
}

/* 뚜껑만 튕겨 나간다 */
.gc-box .ch-lid {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: gcLid .6s 1.25s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes gcLid {
  0% { transform: translateY(0) rotate(0); }
  100% { transform: translateY(-96px) rotate(-30deg); opacity: 0; }
}

.gc-flash {
  width: 100%; height: 100%;
  background: radial-gradient(closest-side, #fff 0%, #FFF0D8 34%, rgba(255, 240, 216, 0) 72%);
  animation: gcFlash .55s 1.24s ease-out both;
}
@keyframes gcFlash {
  0% { opacity: 0; transform: scale(.25); }
  18% { opacity: 1; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(2.6); }
}

/* 아이템 뒤에 계속 남는 후광 */
.gc-halo {
  width: 290px; height: 290px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 238, 190, .85), rgba(255, 190, 226, .3) 45%, transparent 72%);
  animation: gcHalo .6s 1.4s ease-out both, gcPulse 1.6s 2s ease-in-out infinite;
}
@keyframes gcHalo { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes gcPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

.gc-item {
  width: 268px; display: grid; place-items: center;
  animation: gcItem .85s 1.42s cubic-bezier(.18, 1.5, .35, 1) both, gcFloat 2.4s 2.3s ease-in-out infinite;
}
.gc-item svg { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 0 26px rgba(255, 226, 170, .95)); }
@keyframes gcItem {
  0% { opacity: 0; transform: translateY(46px) scale(.25) rotate(-26deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes gcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* 십자 반짝임 */
.gc-sparks { width: 330px; height: 330px; position: relative; }
.gc-sparks i {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s); margin: calc(var(--s) / -2);
  animation: gcSpark 1s var(--d) cubic-bezier(.2, 1, .3, 1) both;
}
.gc-sparks svg { width: 100%; height: 100%; display: block; fill: #FFF8E4;
  filter: drop-shadow(0 0 6px rgba(255, 216, 140, 1)); }
@keyframes gcSpark {
  0% { opacity: 0; transform: scale(0) rotate(-70deg); }
  32% { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(.3) rotate(45deg); }
}

/* 꽃가루가 흩날린다 */
.gc-confetti { width: 100%; height: 100%; position: relative; overflow: hidden; }
.gc-confetti i {
  position: absolute; left: var(--x); top: -8%;
  width: var(--w); height: calc(var(--w) * 1.7); border-radius: 2px;
  background: var(--c);
  animation: gcFall var(--t) var(--d) cubic-bezier(.35, .1, .6, 1) both;
}
@keyframes gcFall {
  0% { opacity: 0; transform: translateY(0) rotate(0); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translateY(115vh) rotate(720deg); }
}

/* ── 관찰 상태 ───────────────────────────
   연출이 끝나면 터진 것들을 걷고 아이템만 남긴다. 아이가 천천히 뜯어볼 시간이다. */

#gacha.is-settled .gc-rays { opacity: .32; transition: opacity .6s; }
#gacha.is-settled .gc-ring,
#gacha.is-settled .gc-flash,
#gacha.is-settled .gc-box,
#gacha.is-settled .gc-confetti,
#gacha.is-settled .gc-sparks { display: none; }

/* 가만히 있다가 이따금 한 번 통통 튄다.
   쉬지 않고 움직이면 눈이 금방 익숙해져 오히려 안 보인다 — 멈춤이 있어야 눈이 간다. */
#gacha.is-settled .gc-item { animation: gcPeek 4.4s .6s ease-in-out infinite; }
@keyframes gcPeek {
  0%, 58%   { transform: translateY(0) rotate(0) scale(1); }
  64%       { transform: translateY(-19px) rotate(-7deg) scale(1.05); }
  70%       { transform: translateY(0) rotate(5deg) scale(.97); }
  75%       { transform: translateY(-9px) rotate(-3deg) scale(1.02); }
  81%, 100% { transform: translateY(0) rotate(0) scale(1); }
}

/* 후광도 같은 박자로 한 번 밝아진다 */
#gacha.is-settled .gc-halo { animation: gcHaloPeek 4.4s .6s ease-in-out infinite; }
@keyframes gcHaloPeek {
  0%, 58%   { opacity: .8; transform: scale(1); }
  66%       { opacity: 1; transform: scale(1.16); }
  81%, 100% { opacity: .8; transform: scale(1); }
}

.gc-done {
  margin-top: 12px; padding: 15px 0; width: min(72vw, 260px); font-size: 17px;
  opacity: 0; pointer-events: none; transition: opacity .35s;
}
#gacha.is-settled .gc-done { opacity: 1; pointer-events: auto; }

/* 이름 띠 */
.gc-banner {
  align-self: end; margin-bottom: calc(env(safe-area-inset-bottom) + 62px);
  display: grid; justify-items: center; gap: 6px;
  animation: gcWord .55s 1.9s cubic-bezier(.2, 1.5, .4, 1) both;
}
.gc-name {
  font-size: 23px; font-weight: 800; color: #4A2E42;
  background: linear-gradient(180deg, #FFF6DC, #FFE1B8);
  border-radius: 999px; padding: 7px 26px;
  box-shadow: 0 4px 0 #E5B984, 0 10px 20px -8px rgba(0, 0, 0, .45);
}
.gc-tag {
  font-size: 12.5px; font-weight: 800; letter-spacing: .06em; color: #FFE0F1;
  text-shadow: 0 1px 6px rgba(60, 30, 70, .7);
}
@keyframes gcWord { from { opacity: 0; transform: translateY(16px) scale(.9); } }

@media (prefers-reduced-motion: reduce) {
  .gc-rays, .gc-ring, .gc-box, .gc-flash, .gc-sparks, .gc-confetti { display: none; }
  #gacha, .gc-item, .gc-halo, .gc-banner, .chest-btn, .cb-glow { animation: none; }
  #gacha.is-settled .gc-item, #gacha.is-settled .gc-halo { animation: none; }
}