/* ============================================================
   전역 리셋 · 베이스 · 공통 애니메이션
   ============================================================ */
* { 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;
}

/* ============================================================
   모션 최소화(prefers-reduced-motion) 설정 사용자 배려

   예전에는 여기서 * { animation: none !important } 로 전부 껐는데,
   그러면 오리 걷기처럼 "지금 어떤 상태인지 알려주는" 기능성 모션까지
   같이 죽어서 오리가 고정 자세로 미끄러지는 문제가 있었다.
   그래서 지금은 "시선을 끄는 반복 장식"만 골라서 끈다.

   끄는 것 : 반짝임 · 깜빡임 · 빛 쓸어내림 · 물결 · 맥박 링
   남기는 것 : 오리 걷기, 캐릭터 가벼운 상하 흔들림, 색/그림자 전환
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .gg-jackpot-inner::after,       /* 잭팟 패널 빛 쓸어내림 */
  .gg-start-btn::before,          /* START 버튼 빛 번짐 */
  .gg-slot-title,                 /* 슬롯 타이틀 글로우 */
  .gg-jackpot-amount,             /* 잭팟 금액 글로우 */
  .gg-race-track,                 /* 레이스 물결 */
  .gg-race-status,                /* 접속중 맥박 링 */
  .gg-new-badge,                  /* New 배지 깜빡임 */
  .gg-home-ms-claim,              /* 보상받기 강조 깜빡임 */
  .gg-att-rw.is-next,             /* 출석 다음날 강조 */
  .gg-att-rw.is-box,              /* 출석 랜덤박스 반짝임 */
  .gg-maint-dot,                  /* 점검 표시등 */
  .gg-maint-state.is-on .gg-maint-state-dot {
    animation: none !important;
  }
  /* 화면이 크게 움직이는 전환만 즉시 처리 (색·그림자 전환은 그대로 둔다) */
  .gg-modal, .gg-modal *, .jp-card, .jp-wrap { transition-duration: .01ms !important; }
}

/* ============================================================
   운영자가 *별표* 로 강조한 부분 (core/warntext.js 의 warnHtml)
   올인 확인 창 · 개인회생 확인 창 · 관리자 미리보기 어디서든 같은 모습.
   게임 화면처럼 자기 색을 따로 정해 둔 곳은 그쪽 규칙이 그대로 우선한다.
   ============================================================ */
.gg-em { color: #e03131; font-weight: 900; }