/* ============================================================
   STEP 2 : 슬롯머신 캐비닛 — 시안 색상 적용
   (심볼/오리/장식 에셋은 다음 단계에서 교체)
   ============================================================ */

.gg-slot {
  height: 693px;
  border-radius: 26px;
  background: linear-gradient(180deg, #123564 0%, #0e2a56 55%, #0c2450 100%);
  border: 1px solid #2a4d8a;
  box-shadow:
    0 14px 34px rgba(15, 47, 98, .35),
    0 0 40px rgba(60, 120, 230, .18),
    inset 0 1px 0 rgba(255, 255, 255, .12);
  padding: 22px 26px 26px;
  display: flex; flex-direction: column;
  position: relative;
}

/* 타이틀 배너 + 마스코트 */
.gg-slot-title {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--gold); font-size: 30px; font-weight: 900; letter-spacing: 2px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 18px rgba(255, 211, 77, .35);
}
.gg-slot-title .gg-s-ico { width: 40px; height: 40px; }
.gg-slot-duck { width: 74px; height: 58px; margin: 8px auto 12px; }

/* 릴 프레임 (밝은 파랑) */
.gg-slot-frame {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg, #5b9cf0 0%, #4988e8 55%, #3a75d6 100%);
  border: 1px solid #6faaf5;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, .35),
    inset 0 2px 0 rgba(255, 255, 255, .35),
    inset 0 -6px 14px rgba(20, 60, 140, .35);
  padding: 24px 56px 30px 28px;
}
/* ---------- 세로 릴 구조 (실제 슬롯머신 방식) ----------
   릴 3개, 각 릴에 5개 심볼 표시 (위2 · 중앙 당첨라인 · 아래2)
   회전은 translateY(transform)로만, 릴별 독립 정지 */
.gg-reels {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  position: relative;
  --reel-row: 54px;   /* 심볼 한 줄 높이 (5줄 = 270px, 기존 릴 영역 크기 유지) */
}
.gg-reel {
  height: calc(var(--reel-row) * 5);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  /* 원통 입체감: 위아래 어둡고 중앙 밝은 곡면 */
  background: linear-gradient(180deg, #c7d9ee 0%, #f4f8fd 16%, #ffffff 40%, #ffffff 60%, #f4f8fd 84%, #c3d5ec 100%);
  box-shadow:
    inset 0 12px 16px rgba(25, 60, 130, .28),
    inset 0 -12px 16px rgba(25, 60, 130, .28),
    inset 0 0 0 1px rgba(110, 155, 220, .4),
    0 2px 0 rgba(255, 255, 255, .45);
}
/* 곡면 음영 오버레이 (심볼 위에 겹침) */
.gg-reel::before {
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(25, 60, 130, .22) 0%, rgba(25, 60, 130, 0) 20%,
    rgba(25, 60, 130, 0) 80%, rgba(25, 60, 130, .22) 100%);
}
/* fade mask: 심볼이 위아래에서 자연스럽게 나타나고 사라짐 */
.gg-reel-window {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%);
}
.gg-reel-strip { will-change: transform; }
.gg-reel-strip.is-blur { filter: blur(2px); }  /* 회전 중 모션 블러 */
.gg-reel-sym {
  height: var(--reel-row);
  display: flex; align-items: center; justify-content: center;
}
.gg-reel-sym i {
  width: 44px; height: 44px; display: block;
  background: center / contain no-repeat;
  image-rendering: pixelated;
}

/* 중앙 당첨라인: 얇은 금색 글로우 밴드 */
.gg-payline {
  position: absolute; left: -8px; right: -8px; top: 50%;
  height: var(--reel-row);
  transform: translateY(-50%);
  border-top: 2px solid rgba(255, 211, 77, .9);
  border-bottom: 2px solid rgba(255, 211, 77, .9);
  border-radius: 6px;
  box-shadow: 0 0 14px rgba(255, 211, 77, .4), inset 0 0 24px rgba(255, 211, 77, .1);
  pointer-events: none;
  z-index: 4;
}

/* 선택된 베팅 칩 */
.gg-chip.is-selected {
  outline: 3px solid rgba(255, 255, 255, .9);
  outline-offset: 2px;
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .45), 0 0 16px rgba(255, 255, 255, .35);
}

/* 당첨 심볼: 정지 후 0.8초 Pulse Glow */
@keyframes ggSymPulse {
  0%   { filter: drop-shadow(0 0 2px rgba(255, 211, 77, .4)); transform: scale(1); }
  40%  { filter: drop-shadow(0 0 14px rgba(255, 211, 77, .95)); transform: scale(1.2); }
  100% { filter: drop-shadow(0 0 2px rgba(255, 211, 77, 0)); transform: scale(1); }
}
.gg-reel-sym.is-win i { animation: ggSymPulse .8s ease; }

/* 스핀 중 START 버튼 */
.gg-start-btn:disabled { filter: grayscale(.35) brightness(.92); cursor: not-allowed; }

/* 최근 당첨 아이콘도 이미지 사용 */
.gg-recent-icons i { background-size: contain; background-position: center; background-repeat: no-repeat; image-rendering: pixelated; }

/* 프레임 하단 중앙 원형 버튼 */
.gg-slot-frame-btn {
  position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #6f97f2 0%, #4a77e6 70%, #3a63c9 100%);
  border: 5px solid #0e2a56;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
}

/* 레버 */
.gg-slot-lever { position: absolute; right: -14px; top: 44px; width: 26px; height: 190px; }
.gg-slot-lever .gg-lever-ball {
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7ba4f5 0%, #4a77e6 70%, #33518c 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .4);
}
.gg-slot-lever .gg-lever-stick {
  width: 8px; height: 120px; margin: 0 auto; border-radius: 4px;
  background: linear-gradient(180deg, #4a77e6, #2a4d8a);
}

/* 베팅 패널 (딥네이비) */
.gg-slot-bet {
  margin-top: 44px;
  border-radius: 18px;
  background: linear-gradient(180deg, #0a2a68 0%, #04205c 100%);
  border: 1px solid #1e3f85;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .25);
  padding: 18px 24px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.gg-slot-bet-label { text-align: center; color: #9fb4e2; font-size: 12.5px; font-weight: 800; }
.gg-chip-row { display: flex; align-items: center; justify-content: center; gap: 18px; }