/* ============================================================
   슬롯머신 캐비닛 — 목표 시안 1:1 재현 (2026-08-01)
   구조: 흰색 두꺼운 외곽 → 상단(잭팟·로고·고무오리) → 파란 릴 프레임
        → 골드 당첨선+별 → 우측 레버 → 네이비 베팅 패널(칩+START)
   ⚠ --reel-row(54px)는 JS(ROW_H=54)와 맞물림 — 변경 금지
   ⚠ 릴 확대는 .gg-reel-window의 균등 scale로만 처리 (translateY 좌표계 보존)
   ============================================================ */

.gg-slot {
  height: auto;
  min-height: 693px;
  border-radius: 38px;
  /* 매우 연한 하늘색 본체 + 두꺼운 흰 테두리 (시안) */
  border: 7px solid rgba(255, 255, 255, .95);
  background:
    /* 흩어진 물방울 장식 */
    radial-gradient(circle at 88% 6%,  rgba(255, 255, 255, .8) 3px,  transparent 4.5px),
    radial-gradient(circle at 6% 22%,  rgba(173, 213, 250, .5) 4px,  transparent 6px),
    radial-gradient(circle at 94% 30%, rgba(173, 213, 250, .45) 5px, transparent 7px),
    radial-gradient(circle at 3% 55%,  rgba(173, 213, 250, .4) 3px,  transparent 5px),
    radial-gradient(circle at 97% 60%, rgba(173, 213, 250, .4) 3px,  transparent 5px),
    linear-gradient(180deg, #f6fbff 0%, #e9f4fe 40%, #ddeefc 100%);
  box-shadow:
    0 18px 45px rgba(67, 125, 190, .20),
    0 0 40px rgba(140, 190, 255, .16),
    inset 0 2px 0 rgba(255, 255, 255, .95),
    inset 0 -12px 24px rgba(150, 190, 240, .18);
  padding: 14px 18px 18px;
  display: flex; flex-direction: column;
  position: relative;
}

/* ============================================================
   상단 헤더: [왕관오리+JACKPOT+금액] [DUCK SLOTS 로고] [고무오리]
   ============================================================ */
.gg-slot-head {
  position: relative;
  height: 104px;
  background:
    radial-gradient(circle at 27% 22%, rgba(160, 205, 250, .55) 4px, transparent 6px),
    radial-gradient(circle at 30% 46%, rgba(160, 205, 250, .4) 2.5px, transparent 4px),
    radial-gradient(circle at 69% 16%, rgba(160, 205, 250, .5) 3px, transparent 5px),
    radial-gradient(circle at 73% 40%, rgba(160, 205, 250, .38) 2px, transparent 3.5px),
    radial-gradient(circle at 63% 66%, rgba(255, 255, 255, .75) 2.5px, transparent 4px),
    radial-gradient(circle at 35% 72%, rgba(255, 255, 255, .6) 2px, transparent 3.5px),
    /* 물줄기 양끝 물방울: 테이퍼 끝을 자연스럽게 이어줌 */
    radial-gradient(circle at 23.5% 82%, rgba(105, 170, 240, .55) 3px, transparent 5px),
    radial-gradient(circle at 21% 68%,  rgba(125, 185, 245, .45) 2px, transparent 3.5px),
    radial-gradient(circle at 77% 82%,  rgba(105, 170, 240, .55) 3px, transparent 5px),
    radial-gradient(circle at 79.5% 68%, rgba(125, 185, 245, .45) 2px, transparent 3.5px);
  z-index: 2;               /* 물튀김 플랫컷이 릴 프레임 위에 얹힘 */
  margin-bottom: -16px;
}

/* ---- 좌: 왕관오리(JACKPOT 받침대 포함) + 실시간 잭팟 금액 필 ---- */
.gg-slot-jp {
  position: absolute; left: 0; bottom: 4px;      /* 시안: SLOTS 줄 높이 (로고 좌측 투명 영역) */
  display: flex; align-items: center; gap: 2px;
  pointer-events: none;
}
.gg-slot-jp-duck {
  width: 64px; height: 64px;      /* 원본 192px의 1/3 */
  object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 0 8px rgba(255, 210, 80, .45));
  flex: none;
}
.gg-slot-jp-amt {
  position: absolute;
  left: 0; bottom: calc(100% + 8px);   /* PC: 왕관오리 위 — 기계 좌측 최상단 */
  font-size: 12px; font-weight: 900; letter-spacing: 0; color: #ffd94d;
  background: linear-gradient(180deg, #1e4386 0%, #102b5e 100%);
  border: 1px solid #35619f;
  border-radius: 999px; padding: 6px 9px 6px 17px;
  box-shadow: 0 5px 12px rgba(20, 55, 120, .35), inset 0 2px 0 rgba(255, 255, 255, .18);
  white-space: nowrap;
}
.gg-slot-jp-amt::before {          /* 필 왼쪽 반짝임 */
  content: "✦";
  position: absolute; left: 6px; top: 50%; transform: translateY(-54%);
  color: #fff; font-size: 11px;
  text-shadow: 0 0 6px rgba(255, 255, 255, .9);
}

/* ---- 중앙: DUCK SLOTS 버블 로고 (시안 원본 추출 그래픽) ---- */
.gg-slot-logo {
  position: absolute; left: 50%; bottom: 9px;   /* 글자는 프레임 위, 물튀김만 프레임 상단에 걸침 (시안 라인) */
  transform: translateX(-50%);          /* 기계 전체 폭 기준 정중앙 */
  width: 225px; height: auto;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 4px 10px rgba(60, 110, 190, .25));
}

/* ---- 우: 물 위 고무오리 (시안 원본 추출 그래픽) ---- */
.gg-slot-rduck {
  position: absolute; right: 0; bottom: 7px;
  width: 124px; height: auto;
  object-fit: contain;
  image-rendering: auto;
  animation: ggRduckFloat 3.2s ease-in-out infinite;
}
@keyframes ggRduckFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* ============================================================
   릴 프레임: 광택 파란 플라스틱 (우측은 레버 자리 확보)
   ============================================================ */
.gg-slot-frame {
  position: relative;
  border-radius: 24px;               /* 레버는 absolute 장식 — 본체 폭/중앙 정렬에 불포함 */
  background: linear-gradient(180deg, #74b2fb 0%, #4a8ef2 55%, #3576dd 100%);
  border: 3px solid #8ec3fc;
  box-shadow:
    0 12px 26px rgba(60, 115, 200, .38),
    0 0 26px rgba(140, 190, 255, .28),
    inset 0 3px 0 rgba(255, 255, 255, .55),
    inset 0 -12px 20px rgba(25, 70, 160, .35);
  padding: 12px 16px 18px;
}

/* ---------- 릴 번호 배지 (1 · 2 · 3) ---------- */
.gg-reel-nums {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-bottom: 10px;
}
.gg-reel-nums span {
  width: 34px; height: 34px; border-radius: 50%;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; color: #fff;
  background: radial-gradient(circle at 50% 30%, #6aa8f7 0%, #2f6fe0 68%, #1f54b8 100%);
  border: 2px solid #bcd8fb;
  box-shadow: 0 3px 8px rgba(25, 70, 165, .45), inset 0 2px 0 rgba(255, 255, 255, .5);
  text-shadow: 0 1px 2px rgba(0, 40, 110, .5);
  position: relative;
}
.gg-reel-nums span::after {          /* 배지 옆 물방울 */
  content: "";
  position: absolute; right: -9px; bottom: 1px;
  width: 7px; height: 9px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: linear-gradient(180deg, #bfe0ff 0%, #6aa8f7 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

/* ============================================================
   세로 릴: 유리 물결 창 — 3릴 동일 폭·높이
   회전은 translateY로만 (로직 불변) · 시각 확대는 scale(1.22)
   ============================================================ */
.gg-reels {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  position: relative;
  --reel-row: 54px;   /* ⚠ JS ROW_H=54와 동일해야 함 — 변경 금지 */
}
.gg-reel {
  height: calc(var(--reel-row) * 5);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  /* 연한 하늘색 유리 + 물방울 */
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .8) 3px, transparent 4.5px),
    radial-gradient(circle at 80% 12%, rgba(255, 255, 255, .6) 2.5px, transparent 4px),
    radial-gradient(circle at 70% 80%, rgba(255, 255, 255, .55) 2px, transparent 3.5px),
    radial-gradient(circle at 24% 70%, rgba(255, 255, 255, .55) 2.5px, transparent 4px),
    radial-gradient(120% 70% at 50% -20%, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(140% 60% at 50% 115%, rgba(110, 175, 245, .35) 0%, rgba(110, 175, 245, 0) 55%),
    linear-gradient(180deg, #d3e9fd 0%, #e9f5ff 30%, #f4faff 50%, #e6f3fe 72%, #cde6fc 100%);
  box-shadow:
    inset 0 10px 14px rgba(90, 145, 210, .28),
    inset 0 -10px 14px rgba(90, 145, 210, .28),
    inset 0 0 0 2px rgba(255, 255, 255, .7),
    0 2px 0 rgba(255, 255, 255, .45);
}
/* 중앙(당첨 행) 흰색 원형 하이라이트 — 시안의 스포트라이트 */
.gg-reel::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 74px; height: 74px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .92) 52%,
    rgba(255, 255, 255, .35) 74%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 0 18px rgba(255, 240, 190, .55);
  pointer-events: none;
}
/* 유리 곡면 음영 (심볼 위) */
.gg-reel::after {
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(90, 145, 210, .20) 0%, rgba(90, 145, 210, 0) 18%,
    rgba(90, 145, 210, 0) 82%, rgba(90, 145, 210, .20) 100%);
}
/* fade mask: scale(1.22) 보정 스톱 — 잘린 화면 기준 위/아래 자연 페이드 */
.gg-reel-window {
  position: absolute; inset: 0; overflow: hidden;
  transform: scale(1.22);            /* 시각 확대 전용 — 중심 고정이라 당첨선 정렬 불변 */
  transform-origin: 50% 50%;
  -webkit-mask-image: linear-gradient(180deg, transparent 9%, #000 19%, #000 81%, transparent 91%);
          mask-image: linear-gradient(180deg, transparent 9%, #000 19%, #000 81%, transparent 91%);
}
.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;
  position: relative;
}
.gg-reel-sym::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 45px; height: 45px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 246, 220, .45);            /* 기본(오리): 연한 크림 */
}
.gg-sym-diamond::before    { background: rgba(190, 222, 255, .48); }
.gg-sym-cherry::before     { background: rgba(255, 205, 226, .42); }
.gg-sym-watermelon::before { background: rgba(198, 240, 208, .45); }
.gg-sym-jackpot::before    {
  background: rgba(255, 236, 170, .55);
  box-shadow: 0 0 12px rgba(255, 200, 70, .65);
}
.gg-reel-sym i {
  position: relative; z-index: 1;
  width: 44px; height: 44px; display: block;
  background: center / contain no-repeat;
  image-rendering: pixelated;
}

/* ============================================================
   당첨선: 양 끝 골드 별 + 금빛 라인 + Shine
   ============================================================ */
.gg-payline {
  position: absolute; left: -26px; right: -26px; top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(255, 197, 49, .3) 0%, #ffd42a 16%, #fff3a5 50%, #ffd42a 84%, rgba(255, 197, 49, .3) 100%);
  background-size: 200% 100%;
  box-shadow: 0 0 10px rgba(255, 208, 42, .85), 0 0 24px rgba(255, 208, 42, .4);
  pointer-events: none;
  z-index: 4;
  animation: ggPaylineShine 3s linear infinite;
}
@keyframes ggPaylineShine {
  0%   { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}
/* 양 끝 골드 별: 시안 원본 추출 그래픽 + 반짝임 Glow */
.gg-payline::before, .gg-payline::after {
  content: "";
  position: absolute; top: 50%;
  width: 34px; height: 36px;
  transform: translateY(-50%);
  background: url("../../../assets/slots/payline-star.png") center / contain no-repeat;
  filter:
    drop-shadow(0 0 5px rgba(255, 255, 255, .95))
    drop-shadow(0 0 10px rgba(255, 205, 60, .9))
    drop-shadow(0 0 20px rgba(255, 215, 90, .5));
  animation: ggStarTwinkle 1.6s ease-in-out infinite;
}
.gg-payline::before { left: -12px; }
.gg-payline::after  { right: -12px; animation-delay: .8s; }
@keyframes ggStarTwinkle {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    filter:
      drop-shadow(0 0 4px rgba(255, 255, 255, .8))
      drop-shadow(0 0 8px rgba(255, 205, 60, .75))
      drop-shadow(0 0 16px rgba(255, 215, 90, .35));
  }
  50% {
    transform: translateY(-50%) scale(1.12);
    filter:
      drop-shadow(0 0 6px rgba(255, 255, 255, 1))
      drop-shadow(0 0 14px rgba(255, 205, 60, 1))
      drop-shadow(0 0 26px rgba(255, 215, 90, .65));
  }
}

/* ============================================================
   레버: 파란 손잡이 + 골드 막대 + 하단 도크 (장식 — 시안 재현)
   ============================================================ */
.gg-slot-lever {
  position: absolute; right: -24px; top: 0;
  width: 40px; height: 244px;
  pointer-events: none;
}
.gg-slot-lever .gg-lever-arm {
  position: absolute; left: 50%; bottom: 40px;
  width: 30px; height: 186px;
  transform: translateX(-50%) rotate(7deg);
  transform-origin: 50% 100%;
}
.gg-slot-lever .gg-lever-ball {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 29px; height: 29px; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #9cc6fa 0%, #4a8ceb 55%, #2857b4 100%);
  box-shadow: 0 4px 9px rgba(40, 90, 180, .5), inset 0 2px 2px rgba(255, 255, 255, .55);
}
.gg-slot-lever .gg-lever-stick {
  position: absolute; left: 50%; top: 24px; transform: translateX(-50%);
  width: 8px; height: 162px; border-radius: 5px;
  background: linear-gradient(90deg, #f5c568 0%, #e8a63b 45%, #c67f18 100%);
  box-shadow: inset 1px 1px 0 rgba(255, 240, 200, .8), 2px 2px 5px rgba(120, 80, 10, .3);
}
.gg-slot-lever .gg-lever-dock {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 37px; height: 54px;
  border-radius: 13px 13px 15px 15px;
  background: linear-gradient(180deg, #6fa8f8 0%, #3f7ede 55%, #24509f 100%);
  background: linear-gradient(180deg, #6aa4f5 0%, #3f7ede 55%, #24509f 100%);
  border: 2px solid #9cc6fa;
  box-shadow: 0 6px 12px rgba(35, 80, 170, .5), inset 0 2px 0 rgba(255, 255, 255, .5);
}
.gg-slot-lever .gg-lever-dock::after {   /* 도크 안 어두운 홈 */
  content: "";
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  width: 16px; height: 33px; border-radius: 8px;
  background: linear-gradient(180deg, #123063 0%, #1c3f7d 100%);
  box-shadow: inset 0 2px 4px rgba(0, 15, 50, .6);
}

/* ============================================================
   베팅 패널: 딥네이비 + 칩 + START (시안 동일)
   ============================================================ */
.gg-slot-bet {
  margin-top: 20px;
  border-radius: 22px;
  background: linear-gradient(180deg, #1a4c94 0%, #0d2f66 100%);
  border: 1px solid #2c5c9e;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .10),
    inset 0 -8px 16px rgba(0, 20, 70, .35),
    0 10px 20px rgba(60, 105, 185, .30);
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.gg-slot-bet-label { text-align: center; color: #ffffff; font-size: 13px; font-weight: 900; letter-spacing: .5px; }
.gg-chip-row { display: flex; align-items: center; justify-content: center; gap: 18px; }

/* 칩: 시안 크기·질감 보정 (색상별 스타일은 components.css) */
.gg-slot-bet .gg-chip {
  width: 66px; height: 66px;
  border-width: 5px;
  font-size: 15px;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, .18),
    0 6px 14px rgba(0, 10, 40, .45),
    inset 0 -4px 7px rgba(0, 0, 0, .28),
    inset 0 4px 7px rgba(255, 255, 255, .3);
}
/* 스핀 중: 베팅 칩 잠금 — 어둡게 눌린 느낌 + 클릭 불가
   (🚫 커서는 쓰지 않는다 — pointer-events 를 꺼서 애초에 눌리지 않음) */
.gg-chip-row.is-locked .gg-chip {
  pointer-events: none;
  filter: grayscale(.4) brightness(.82);
  box-shadow: inset 0 3px 8px rgba(20, 45, 90, .35);
  transition: filter .18s ease, box-shadow .18s ease;
}

/* 선택된 베팅 칩: Glow */
.gg-chip.is-selected {
  outline: 3px solid rgba(255, 255, 255, .95);
  outline-offset: 2px;
  transform: translateY(-3px) scale(1.05);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, .45),
    0 0 18px rgba(255, 255, 255, .65),
    0 0 34px rgba(160, 205, 255, .55);
}

/* ---------- START 버튼: 넓은 골드 버튼 + 오리 ---------- */
.gg-start-btn {
  flex-direction: row; gap: 14px;
  width: 96%; margin: 2px auto 0;
  min-height: 76px;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffe86a 0%, #ffd137 62%, #f5bd11 100%);
  color: #4a3413;
  box-shadow:
    inset 0 4px 0 rgba(255, 255, 255, .55),
    0 7px 0 #d89c00,
    0 14px 24px rgba(117, 77, 0, .25);
}
.gg-start-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.gg-start-btn:active {
  transform: translateY(5px);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .55), 0 2px 0 #d89c00, 0 6px 12px rgba(117, 77, 0, .22);
}
.gg-start-duck {
  width: 44px; height: 44px;
  object-fit: contain; image-rendering: pixelated;
  flex: none;
}
.gg-start-txt { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gg-start-txt b { font-size: 27px; font-weight: 900; letter-spacing: 2.5px; color: #4a3413; }
.gg-start-txt span { font-size: 12px; font-weight: 900; color: #7a5a10; opacity: 1; }

/* 스핀 중 START 버튼 */
/* 스핀 중: 눌리지만 않게 (🚫 커서는 쓰지 않는다 — 잠긴 느낌이 강해서) */
.gg-start-btn:disabled { filter: grayscale(.35) brightness(.92); cursor: default; }

/* ---------- 당첨 심볼: 정지 후 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; }

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

/* 베팅 금액을 아직 못 받았을 때: 빈 칩 자리 (잘못된 금액 노출 방지) */
.gg-chip.is-loading {
  color: transparent;
  opacity: .45;
  pointer-events: none;
  animation: ggChipLoad 1s ease-in-out infinite;
}
@keyframes ggChipLoad { 0%, 100% { opacity: .3; } 50% { opacity: .55; } }

/* ---------- 효과음 켜기/끄기 (슬롯 캐비닛 우측 상단) ---------- */
.gg-sfx-btn {
  position: absolute; top: 10px; right: 12px; z-index: 3;
  width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 10px;
  background: rgba(255, 255, 255, .22);
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: background .2s ease, transform .15s ease, opacity .2s ease;
}
.gg-sfx-btn:hover { background: rgba(255, 255, 255, .38); }
.gg-sfx-btn:active { transform: scale(.94); }
.gg-sfx-btn.is-off { opacity: .55; }