/* ==========================================================
   IDENTIDADE VISUAL & ESTILIZAÇÃO LUXO - OS 50
   FUNDO DO SITE: VERMELHO DE CASSINO REAL (#120204, #2c050a, #520912, #7a0e1c)
   MENU DO TOPO & CARDS: PRETO ÔNIX / LUXURY BLACK (#0a0a0c, #0d0d10, #131317)
   DETALHES: DOURADO IMPERIAL (#D4AF37, #F5D061, #ECC86A)
   ========================================================== */

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

.font-script {
  font-family: 'Caveat', cursive;
}

:root {
  --color-gold-light: #F9E79F;
  --color-gold: #D4AF37;
  --color-gold-dark: #996515;
  --color-gold-glow: rgba(212, 175, 55, 0.4);

  /* Fundo Vermelho de Cassino */
  --casino-red-deep: #120204;
  --casino-red-dark: #1f0307;
  --casino-red-velvet: #36060c;
  --casino-red-rich: #520912;
  --casino-red-vibrant: #7a0e1c;

  /* Cards e Menus em Preto Puro */
  --color-card-bg: #0d0d11;
  --color-card-border: rgba(212, 175, 55, 0.22);
}

html {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* Fundo do Site Exclusivamente em Vermelho Cassino */
body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #120204;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(138, 16, 28, 0.6) 0%, transparent 65%),
    radial-gradient(circle at 10% 35%, rgba(95, 10, 19, 0.45) 0%, transparent 55%),
    radial-gradient(circle at 90% 70%, rgba(120, 14, 25, 0.4) 0%, transparent 55%),
    radial-gradient(circle at 50% 105%, rgba(85, 9, 17, 0.5) 0%, transparent 60%),
    linear-gradient(180deg, #180306 0%, #120204 45%, #0d0102 100%);
  background-attachment: fixed;
  background-size: cover;
  color: #F3F4F6;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
  margin: 0;
  padding: 0;
}

main {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

img, svg, video {
  max-width: 100%;
  height: auto;
}

.font-cinzel {
  font-family: 'Cinzel', serif;
}

/* Gradientes Dourados Premium */
.bg-gold-gradient {
  background: linear-gradient(135deg, #ECC86A 0%, #D4AF37 50%, #B8860B 100%);
}

.bg-gold-gradient-hover:hover {
  background: linear-gradient(135deg, #F9E79F 0%, #ECC86A 50%, #D4AF37 100%);
}

.text-gold-gradient {
  background: linear-gradient(135deg, #FFF0C2 0%, #F5D061 50%, #D4AF37 75%, #B38728 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gold-subtle {
  color: #D4AF37;
}

/* CARDS NA COR PRETA COM BORDAS E DETALHES DOURADOS */
.glass-panel {
  background: rgba(13, 13, 16, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 175, 55, 0.22);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.85), 0 0 15px -5px rgba(0, 0, 0, 0.9);
}

.glass-panel-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-panel-hover:hover {
  background: rgba(16, 16, 20, 0.97);
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.95), 0 0 25px rgba(212, 175, 55, 0.2);
  transform: translateY(-3px);
}

/* Barra de Progresso Dourada */
.gold-progress-bar {
  background: linear-gradient(90deg, #996515 0%, #D4AF37 70%, #F5D061 100%);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.6);
  transition: width 0.8s ease-in-out;
}

/* Grade de 50 Números - Blocos em Preto com Dourado */
.number-box {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.number-available {
  background-color: #15151a;
  color: #F8FAFC;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.number-available:hover {
  background-color: #23232c;
  border-color: #F5D061;
  color: #FFF0C2;
  transform: scale(1.07);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35);
  cursor: pointer;
}

.number-selected {
  background: linear-gradient(135deg, #ECC86A 0%, #D4AF37 100%);
  color: #0d0d11 !important;
  font-weight: 800;
  border-color: #FFF0C2;
  box-shadow: 0 0 22px rgba(212, 175, 55, 0.85);
  transform: scale(1.08);
}

.number-reserved {
  background-color: #261b0d;
  color: #F5D061;
  border: 1px dashed rgba(212, 175, 55, 0.6);
  cursor: not-allowed;
  opacity: 0.85;
}

.number-paid {
  background-color: #0e0e12;
  color: #52525b;
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: not-allowed;
  text-decoration: line-through;
  opacity: 0.45;
}

/* Selos & Badges */
.badge-gold {
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #ECC86A;
}

/* Animações e Pulso */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.25);
  }
  50% {
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.6);
  }
}

.gold-glow-pulse {
  animation: pulseGlow 3s infinite ease-in-out;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0a0a0c;
}
::-webkit-scrollbar-thumb {
  background: #27272f;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #D4AF37;
}

/* Fundo Radial e Halo de Cassino */
.bg-radial-casino {
  background: radial-gradient(circle at 50% 30%, rgba(184, 20, 40, 0.45) 0%, rgba(94, 10, 21, 0.25) 45%, transparent 75%);
}

.bg-radial-card {
  background: radial-gradient(circle at 50% 50%, rgba(184, 20, 40, 0.35) 0%, transparent 70%);
}