@import url('https://fonts.googleapis.com/css2?family=Pretendard:wght=400;600;700;800&display=swap');

body {
  font-family: 'Pretendard', sans-serif;
  background-color: #0b0d10;
  color: #f3f4f6;
}

/* 야구 스티치 느낌의 커스텀 배경 데코레이션 */
.baseball-bg {
  background: radial-gradient(circle at center, #0a2215 0%, #050807 100%);
}

/* 슬롯머신 릴 애니메이션 */
@keyframes slot-spin {
  0% { transform: translateY(-20px); filter: blur(2px); opacity: 0.3; }
  50% { transform: translateY(20px); filter: blur(2px); opacity: 0.5; }
  100% { transform: translateY(0); filter: blur(0); opacity: 1; }
}

.spinning {
  animation: slot-spin 0.15s infinite linear;
}

/* 국가대표 전용 휘몰아치는 태극 그라데이션 보더 효과 */
.national-glow {
  position: relative;
  background: #0f1423;
  border: 3px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 25px rgba(59, 130, 246, 0.4), 0 0 25px rgba(239, 68, 68, 0.4);
}
.national-glow::after {
  position: absolute;
  top: -3px; bottom: -3px; left: -3px; right: -3px;
  background: linear-gradient(135deg, #ef4444 0%, #3b82f6 100%);
  content: '';
  z-index: -1;
  border-radius: 24px;
}

/* 올스타(All-Star) 테두리: 보라-핑크 은하수 아우라 */
.allstar-glow {
  position: relative;
  background: #140b24;
  border: 3px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.5), 0 0 25px rgba(236, 72, 153, 0.5);
}
.allstar-glow::after {
  position: absolute;
  top: -3px; bottom: -3px; left: -3px; right: -3px;
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
  content: '';
  z-index: -1;
  border-radius: 24px;
}

/* 골든글러브(Golden Glove) 테두리 - 쨍함을 억제하고 고급스러운 메탈릭 골드 느낌 부여 */
.goldglove-glow {
  position: relative;
  background: #120e03;
  border: 3px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 20px rgba(184, 134, 11, 0.35), 0 0 8px rgba(212, 175, 55, 0.15);
  animation: gold-shimmer 3.5s infinite alternate;
}
.goldglove-glow::after {
  position: absolute;
  top: -3px; bottom: -3px; left: -3px; right: -3px;
  background: linear-gradient(135deg, #9a7b2c 0%, #d4af37 50%, #785a1a 100%);
  content: '';
  z-index: -1;
  border-radius: 24px;
}

@keyframes gold-shimmer {
  0% { filter: brightness(0.95) contrast(0.95); }
  100% { filter: brightness(1.08) contrast(1.02); }
}

.glow-gold {
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
  border-color: #d4af37;
}

.glow-card {
  transition: all 0.25s ease-in-out;
}
.glow-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}

/* =================================================================
   와이어 투 와이어 + 한국시리즈 통합 우승 프리미엄 연출
   ================================================================= */

/* 회전하는 다이아몬드 보더 그라데이션 */
@keyframes w2w-border-spin {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.w2w-glow {
  position: relative;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a0a00 50%, #0a0a0a 100%);
  border: 3px solid transparent;
  background-clip: padding-box;
  box-shadow:
    0 0 40px rgba(255, 215, 0, 0.5),
    0 0 80px rgba(255, 140, 0, 0.3),
    0 0 120px rgba(255, 69, 0, 0.15),
    inset 0 0 30px rgba(255, 215, 0, 0.05);
  animation: w2w-pulse 2s ease-in-out infinite alternate;
}
.w2w-glow::after {
  position: absolute;
  top: -3px; bottom: -3px; left: -3px; right: -3px;
  background: linear-gradient(270deg, #ff0000, #ff8c00, #ffd700, #ff6347, #ff1493, #ffd700, #ff8c00, #ff0000);
  background-size: 600% 600%;
  animation: w2w-border-spin 3s ease infinite;
  content: '';
  z-index: -1;
  border-radius: 24px;
}

@keyframes w2w-pulse {
  0% {
    box-shadow:
      0 0 40px rgba(255, 215, 0, 0.5),
      0 0 80px rgba(255, 140, 0, 0.3),
      0 0 120px rgba(255, 69, 0, 0.15);
    filter: brightness(1);
  }
  100% {
    box-shadow:
      0 0 60px rgba(255, 215, 0, 0.7),
      0 0 100px rgba(255, 140, 0, 0.5),
      0 0 160px rgba(255, 69, 0, 0.25);
    filter: brightness(1.15);
  }
}

/* 무지개빛 텍스트 그라데이션 애니메이션 */
@keyframes w2w-text-shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.w2w-text {
  background: linear-gradient(90deg, #ffd700, #ff6347, #ff1493, #ffd700, #ff8c00, #ffd700);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: w2w-text-shimmer 3s ease infinite;
}

/* 왕관 바운스 + 회전 */
@keyframes crown-float {
  0%, 100% { transform: translateY(0) rotate(-5deg) scale(1); }
  25% { transform: translateY(-15px) rotate(5deg) scale(1.1); }
  50% { transform: translateY(-8px) rotate(-3deg) scale(1.05); }
  75% { transform: translateY(-20px) rotate(8deg) scale(1.15); }
}

.crown-float {
  animation: crown-float 2.5s ease-in-out infinite;
  display: inline-block;
}

/* 별 파티클 떨어지는 효과 */
@keyframes sparkle-fall {
  0% { transform: translateY(-100%) rotate(0deg); opacity: 1; }
  100% { transform: translateY(400%) rotate(720deg); opacity: 0; }
}

.sparkle-particle {
  position: absolute;
  font-size: 12px;
  pointer-events: none;
  animation: sparkle-fall linear infinite;
  z-index: 1;
}

/* 통합 우승 배너 내부 빛 줄기 효과 */
@keyframes light-sweep {
  0% { transform: translateX(-100%) skewX(-20deg); }
  100% { transform: translateX(300%) skewX(-20deg); }
}

.light-sweep::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.15), transparent);
  animation: light-sweep 3s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

/* 와이어투와이어 배지 전용 글로우 */
@keyframes badge-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 69, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.3); }
  50% { box-shadow: 0 0 16px rgba(255, 69, 0, 0.9), 0 0 40px rgba(255, 215, 0, 0.5), 0 0 60px rgba(255, 140, 0, 0.2); }
}

.w2w-badge {
  animation: badge-glow 1.5s ease-in-out infinite;
}

/* 한국시리즈 우승 (w2w가 아닌 일반 통합 우승) 전용 개선 글로우 */
.ks-champion-glow {
  position: relative;
  box-shadow:
    0 0 30px rgba(16, 185, 129, 0.4),
    0 0 60px rgba(245, 158, 11, 0.3),
    0 0 90px rgba(16, 185, 129, 0.15);
}
.ks-champion-glow::after {
  position: absolute;
  top: -3px; bottom: -3px; left: -3px; right: -3px;
  background: linear-gradient(270deg, #10b981, #f59e0b, #10b981, #fbbf24);
  background-size: 400% 400%;
  animation: w2w-border-spin 4s ease infinite;
  content: '';
  z-index: -1;
  border-radius: 24px;
}