/* 삼국지 천하대세전 - 커스텀 비주얼 스타일시트 */

body {
  background-color: #080b10;
  color: #e6edf3;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.08) 0%, transparent 70%),
    radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
}

/* Custom Scrollbar */
.custom-scroll::-webkit-scrollbar { width: 4px; height: 4px; }
.custom-scroll::-webkit-scrollbar-thumb { background: #263345; border-radius: 4px; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: #d97706; }
.custom-scroll::-webkit-scrollbar-track { background: #0d121d; }

/* Card Panel & Glassmorphism */
.card-panel {
  background: rgba(13, 18, 28, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 215, 0, 0.12);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
}

.gold-gradient-text {
  background: linear-gradient(135deg, #fff3c4 0%, #f59e0b 50%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-btn {
  background: linear-gradient(135deg, #f59e0b, #b45309);
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
  transition: all 0.2s ease-in-out;
}

.gold-btn:active, .gold-btn:hover {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
  transform: translateY(-1px);
}

canvas {
  will-change: transform;
  transform: translateZ(0);
}

/* Animations */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.2); }
  50% { box-shadow: 0 0 25px rgba(245, 158, 11, 0.6); }
}

.pulse-glow {
  animation: pulseGlow 2s infinite;
}

@keyframes floatUp {
  0% { transform: translateY(0) scale(0.8); opacity: 1; }
  50% { transform: translateY(-30px) scale(1.2); opacity: 0.9; }
  100% { transform: translateY(-70px) scale(1); opacity: 0; }
}

.float-emoji {
  position: absolute;
  pointer-events: none;
  font-size: 28px;
  animation: floatUp 1.8s ease-out forwards;
  z-index: 40;
}

/* Custom Range Slider */
input[type=range] {
  -webkit-appearance: none;
  background: #1a2332;
  border-radius: 8px;
  height: 8px;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #d97706);
  cursor: pointer;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
  border: 2px solid #ffffff;
}

/* Wheel Spin Animation */
@keyframes spinWheel {
  from { transform: rotate(0deg); }
  to { transform: rotate(1440deg); }
}

.spinning {
  animation: spinWheel 3s cubic-bezier(0.15, 0.9, 0.15, 1) forwards;
}