/* ============================================================
   전역 리셋 · 베이스 · 공통 애니메이션
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--tx);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 14px;
}

a { color: inherit; }

/* 리소스 이미지 공통 규칙 */
img.gg-logo-img, img.gg-avatar, img.gg-nav-ico, img.gg-t-ico, img.gg-coin,
img.gg-me-duck, img.gg-gift, img.gg-attend-gift, img.gg-charge-duck,
img.gg-jackpot-crown, img.gg-p-ico, img.gg-guide-duck, img.gg-shop-img,
img.gg-m-ico, img.gg-s-ico, img.gg-slot-duck, img.gg-recent-empty-duck {
  background: none;
  object-fit: contain;
  image-rendering: pixelated;
}
img.gg-img-smooth { image-rendering: auto; }

/* ============================================================
   STEP 4 : 애니메이션 및 효과
   - Glow / Fade / Hover / 버튼 Ripple / 패널 등장
   - 전부 CSS 기반 (JS 없음), 부드러운 Transition/Keyframes
   ============================================================ */

/* ---------- 페이지 Fade 인 ---------- */
@keyframes ggFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body { animation: ggFadeIn .4s ease; }

/* ---------- 패널 등장 (아래에서 살짝 떠오르며 순차 등장) ---------- */
@keyframes ggRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gg-main .gg-col > *,
.gg-bottom > *,
.gg-slot {
  animation: ggRise .55s cubic-bezier(0.22, 0.9, 0.3, 1) backwards;
}
.gg-main .gg-col > *:nth-child(1) { animation-delay: .05s; }
.gg-main .gg-col > *:nth-child(2) { animation-delay: .14s; }
.gg-main .gg-col > *:nth-child(3) { animation-delay: .23s; }
.gg-main .gg-col > *:nth-child(4) { animation-delay: .32s; }
.gg-main .gg-col:nth-child(2) > *:nth-child(1) { animation-delay: .08s; }
.gg-main .gg-col:nth-child(2) > *:nth-child(2) { animation-delay: .2s; }
.gg-bottom > *:nth-child(1) { animation-delay: .38s; }
.gg-bottom > *:nth-child(2) { animation-delay: .46s; }

/* ---------- 버튼 Ripple (클릭 시 물결 퍼짐) ---------- */
.gg-btn, .gg-more-btn {
  position: relative;
  overflow: hidden;
}
.gg-btn::after, .gg-more-btn::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  transform: translate(-50%, -50%) scale(10);
  opacity: 0;
  transition: transform .5s ease, opacity .7s ease;
  pointer-events: none;
}
.gg-btn:active::after, .gg-more-btn:active::after {
  transform: translate(-50%, -50%) scale(0);
  opacity: .6;
  transition: none;
}

/* ---------- START! 버튼 Glow 펄스 ---------- */
@keyframes ggStartGlow {
  0%, 100% { opacity: .35; }
  50%      { opacity: .9; }
}
.gg-start-btn { position: relative; }
.gg-start-btn::before {
  content: "";
  position: absolute; inset: -5px;
  border-radius: 20px;
  box-shadow: 0 0 26px rgba(255, 213, 60, .55);
  opacity: .35;
  animation: ggStartGlow 2.2s ease-in-out infinite;
  pointer-events: none;
}

/* ---------- 슬롯 타이틀 Glow 펄스 ---------- */
@keyframes ggTitleGlow {
  0%, 100% { text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 14px rgba(255, 211, 77, .3); }
  50%      { text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 26px rgba(255, 211, 77, .65); }
}
.gg-slot-title { animation: ggTitleGlow 2.6s ease-in-out infinite; }

/* ---------- 잭팟 금액 Glow 펄스 ---------- */
@keyframes ggJackpotGlow {
  0%, 100% { box-shadow: inset 0 2px 8px rgba(0, 0, 0, .6), 0 0 10px rgba(255, 211, 77, .25); }
  50%      { box-shadow: inset 0 2px 8px rgba(0, 0, 0, .6), 0 0 22px rgba(255, 211, 77, .6); }
}
.gg-jackpot-amount { animation: ggJackpotGlow 2s ease-in-out infinite; }

/* ---------- 셔인 키프레임 (잭팟 패널에서 사용) ---------- */
@keyframes ggShine {
  0%, 55% { left: -55%; }
  85%, 100% { left: 135%; }
}

/* ---------- 네비 아이콘 Hover ---------- */
.gg-nav-item .gg-nav-ico { transition: transform .25s ease; }
.gg-nav-item:hover .gg-nav-ico { transform: scale(1.15); }

/* ---------- 레이스: 물결 반짝임 (하늘색 물 위 빛) ---------- */
.gg-race-track {
  background-image:
    linear-gradient(115deg, transparent 0%, transparent 40%, rgba(255, 255, 255, .16) 50%, transparent 60%, transparent 100%),
    linear-gradient(180deg, #c9e8fb 0%, #aedcf7 55%, #9bd2f3 100%);
  background-size: 300% 100%, 100% 100%;
  animation: ggWater 8s linear infinite;
}
@keyframes ggWater {
  from { background-position: 130% 0, 0 0; }
  to   { background-position: -170% 0, 0 0; }
}

/* ---------- 레이스: 물결 흔적 펄스 ---------- */
@keyframes ggWake {
  0%, 100% { opacity: .35; transform: scaleX(.8); }
  50%      { opacity: .75; transform: scaleX(1.2); }
}
.gg-duck-wake { animation: ggWake 1.5s ease-in-out infinite; }

/* ---------- 경기 중 뱃지 펄스 ---------- */
@keyframes ggLivePulse {
  0%   { box-shadow: 0 2px 6px rgba(45, 177, 78, .35), 0 0 0 0 rgba(67, 207, 104, .55); }
  70%  { box-shadow: 0 2px 6px rgba(45, 177, 78, .35), 0 0 0 8px rgba(67, 207, 104, 0); }
  100% { box-shadow: 0 2px 6px rgba(45, 177, 78, .35), 0 0 0 0 rgba(67, 207, 104, 0); }
}
.gg-race-status { animation: ggLivePulse 1.8s ease-out infinite; }

/* ---------- 잭팟 이너 패널 은은한 셔인 ---------- */
.gg-jackpot-inner { position: relative; overflow: hidden; }
.gg-jackpot-inner::after {
  content: "";
  position: absolute; top: -60%; bottom: -60%; left: -55%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: rotate(16deg);
  animation: ggShine 5.5s ease-in-out infinite;
  pointer-events: none;
}

/* ---------- 모션 최소화 설정 사용자 배려 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}