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

:root {
  --color-bg-start: #0a0a0a;
  --color-bg-mid: #1a0d00;
  --color-bg-deep: #2e1300;
  --color-bg-end: #000000;
  --color-glow-orange: #FF8C00;
  --color-glow-yellow: #FFD300;
  --color-soft-white: #fefefe;
  --blur-glass: 25px;
  --radius-2xl: 22px;
  --card-opacity: 0.08;
}

body {
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
}

@keyframes coinFloat {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
  50% { transform: translateY(-15px) rotate(180deg); opacity: 1; }
  100% { transform: translateY(0) rotate(360deg); opacity: 0.8; }
}

@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

.coin {
  position: absolute;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, #FFD300 20%, #FF8C00 100%);
  border-radius: 50%;
  animation: coinFloat 6s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255, 211, 0, 0.6));
}

.glow-text {
  text-shadow: 0 0 8px rgba(255, 140, 0, 0.6);
}

.vip-progress {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  flex-grow: 1;
  margin: 0 12px;
  overflow: hidden;
}

.vip-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #FF8C00, #FFD300);
  box-shadow: 0 0 10px rgba(255, 140, 0, 0.6);
  transition: width 0.5s ease;
}

@media (max-width: 1023px) {
  .payment-methods-scroll {
    overflow-x: auto;
    padding-bottom: 12px;
    scrollbar-width: none;
  }
  .payment-methods-scroll::-webkit-scrollbar {
    display: none;
  }
}