:root { 
  --bg:#000000; 
  --bg-gradient: linear-gradient(135deg, #000000 0%, #0a0e1a 100%);
  --fg:#e2e8f0; 
  --line:#334155; 
  --btn:#1f2937; 
  --btnHover:#111827; 
  --blue:#1E40AF; 
  --red:#DC143C;
  --purple:#a855f7;
  --card-bg:#0a0e1a;
  --glow-blue: 0 0 20px rgba(30, 64, 175, 0.5);
  --glow-red: 0 0 20px rgba(220, 20, 60, 0.5);
  --glow-purple: 0 0 20px rgba(168, 85, 247, 0.5);
  --glow-green: 0 0 20px rgba(34, 197, 94, 0.5);
}
*{box-sizing:border-box} 
body{
  margin:0;
  background:var(--bg-gradient);
  color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:26px 12px;
  min-height:100vh;
  position: relative;
}
.container{text-align:center;margin-bottom:8px}
#nextDraw,#countdown{
  font-weight:700;
  color:#fff;
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.9), rgba(59, 130, 246, 0.9));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid rgba(30, 64, 175, 0.5);
  border-radius:16px;
  padding:14px 20px;
  margin:8px auto;
  box-shadow: var(--glow-blue), 0 4px 15px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
  width:520px;
  max-width:92vw;
  transition: all 0.3s ease;
  animation: neonPulse 2s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
#result{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  line-height:1.2;
  font-weight:900;
  font-size:2.4rem;
  margin-top:8px;
  margin-bottom:40px;
  text-align:center;
  animation: float 3s ease-in-out infinite;
  background: rgba(10, 14, 26, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(30, 64, 175, 0.3);
  border-radius:16px;
  padding:16px 24px;
  box-shadow: var(--glow-blue), 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}
.gridContainer{
  text-align:left;
  width:100%;
  max-width:720px;
  margin:10px auto;
  border:2px solid rgba(51, 65, 85, 0.5);
  border-radius:20px;
  background: rgba(10, 14, 26, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
  transition: all 0.3s ease;
  padding: 4px;
}
.gridContainer:hover{
  border-color: rgba(30, 64, 175, 0.8);
  box-shadow: var(--glow-blue), 0 12px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
  transform: translateY(-2px);
}
.gridTitle{font-size:18px;font-weight:700;text-align:center;padding:10px 0;border-radius:12px 12px 0 0;margin-bottom:8px}
.blueBackground{background:var(--blue);color:#fff}.redBackground{background:var(--red);color:#fff}
#grid,#powerballGrid{text-align:center;margin-bottom:8px}
.number,.powerballNumber{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:14px;
  border:2px solid rgba(51, 65, 85, 0.6);
  background: rgba(10, 14, 26, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color:var(--fg);
  margin:6px;
  cursor:pointer;
  user-select:none;
  transition: all 0.3s ease;
  font-weight:700;
  position:relative;
  overflow:hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
}
.number:hover,.powerballNumber:hover{
  transform:translateY(-3px) scale(1.1);
  border-color: rgba(30, 64, 175, 0.8);
  box-shadow: var(--glow-blue), 0 4px 12px rgba(0,0,0,0.3);
  background: rgba(10, 14, 26, 0.9);
}
.number:active,.powerballNumber:active{
  transform:translateY(-1px) scale(1.05);
}
.selected{
  background: linear-gradient(135deg, var(--blue), #3b82f6) !important;
  color:#fff !important;
  font-weight:900;
  border-color: var(--blue) !important;
  box-shadow: var(--glow-blue) !important;
  animation: neonPulse 1.5s ease-in-out infinite;
}
.powerballNumber.selected{
  background: linear-gradient(135deg, var(--red), #dc2626) !important;
  color:#fff !important;
  border-color: var(--red) !important;
  box-shadow: var(--glow-red) !important;
  animation: neonPulse 1.5s ease-in-out infinite;
}
#buttons{display:flex;flex-direction:column;align-items:center;margin-top:12px;gap:10px}
#mainButtons,#secondaryButtons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
button{
  padding:14px 20px;
  background: linear-gradient(135deg, rgba(31, 41, 55, 0.8), rgba(42, 47, 58, 0.8));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color:#e5e7eb;
  border:2px solid rgba(51, 65, 85, 0.5);
  border-radius:14px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition: all 0.3s ease;
  min-width:170px;
  position:relative;
  overflow:hidden;
}
button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}
button:hover::before {
  left: 100%;
}
button:hover{
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.9), rgba(26, 31, 46, 0.9));
  transform: translateY(-2px);
  box-shadow: var(--glow-blue), 0 6px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
  border-color: rgba(30, 64, 175, 0.8);
}
button:active{
  transform: translateY(0);
}
button:disabled{
  opacity:0.4;
  cursor:not-allowed;
  filter: grayscale(0.8);
}
.sortedNumber.blue{
  color:var(--blue);
  text-shadow: 0 0 10px var(--blue);
  animation: neonPulse 2s ease-in-out infinite;
}
.sortedNumber.powerball{
  color:var(--red);
  text-shadow: 0 0 10px var(--red);
  animation: neonPulse 2s ease-in-out infinite;
}
/* Mobile Responsive Breakpoints */
@media (max-width:768px){
  #nextDraw,#countdown{
    width:92vw;
    font-size:15px;
    padding: 10px 12px;
  }
  
  /* Tablet: 7 numbers per row */
  .number,.powerballNumber{
    width: 48px;
    height: 48px;
    margin: 5px;
    font-size: 16px;
  }
  
  .gridContainer{
    max-width: 96%;
    padding: 10px;
  }
  
  .gridTitle{
    font-size: 16px;
    padding: 8px 0;
  }
  
  button{
    min-width: 140px;
    padding: 12px 16px;
    font-size: 15px;
  }

  #result{
    font-size: 2rem;
    gap: 12px;
    margin-bottom: 30px;
  }

  /* Ensure buttons are in normal flow on tablet too */
  #buttons{
    position: relative;
    background: transparent;
    backdrop-filter: none;
    padding: 12px 0;
    margin: 16px auto;
    border-top: none;
    box-shadow: none;
    z-index: auto;
    gap: 8px;
    max-width: 95%;
  }
}

@media (max-width: 480px){
  /* Mobile: 5 numbers per row */
  .number,.powerballNumber{
    width: 52px;
    height: 52px;
    margin: 6px;
    font-size: 17px;
    font-weight: 800;
  }
  
  #nextDraw,#countdown{
    font-size: 14px;
    padding: 8px 10px;
  }
  
  .gridContainer{
    padding: 8px;
    border-radius: 10px;
    max-width: 97%;
  }
  
  .gridTitle{
    font-size: 15px;
  }
  
  /* Buttons in normal document flow - appear AFTER grids */
  #buttons{
    position: relative;
    background: transparent;
    backdrop-filter: none;
    padding: 16px 12px;
    margin: 20px auto;
    border-top: none;
    box-shadow: none;
    z-index: auto;
    gap: 8px;
    max-width: 95%;
    display: flex;
    flex-direction: column;
  }
  
  /* 2x2 Grid Layout for buttons */
  #mainButtons,
  #secondaryButtons {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns */
    gap: 8px;
  }
  
  #mainButtons button,
  #secondaryButtons button {
    min-width: unset;
    width: 100%;
    font-size: 13px; /* Slightly smaller for 2-column layout */
    padding: 12px 8px;
  }

  #mainButtons,#secondaryButtons{
    width: 100%;
    gap: 8px;
  }

  button{
    width: 100%;
    min-width: unset;
    padding: 14px;
    font-size: 14px;
  }

  /* Minimal body padding */
  body{
    padding-bottom: 20px;
  }
  
  /* Ensure proper stacking order */
  .dfb-navbar {
    z-index: 9999;
  }

  /* Selected numbers banner - compact and subtle */
  #result{
    position: relative; /* Not sticky - part of normal flow */
    font-size: 1.3rem;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(15px);
    padding: 6px;
    margin: 4px auto 12px;
    border-radius: 8px;
    border: 1px solid var(--blue);
    box-shadow: var(--glow-blue), 0 2px 8px rgba(0,0,0,0.2);
    z-index: 1; /* Normal flow, don't go under images */
    max-width: 95%;
  }

  .sortedNumber{
    font-size: 1.3rem;
  }
}


/* prize banner image (home) */
.prize-banner{
  width: 100%;
  max-width: 720px;
  margin: 24px auto;
  text-align: center;
  padding: 4px;
  /* El contenedor se ajusta automáticamente a la altura de la imagen */
}
.prize-banner img{
  width: 100%;
  max-width: 100%;
  height: auto; /* Respeta la altura natural de la imagen manteniendo la proporción */
  display: block;
  border-radius: 20px;
  border: 2px solid rgba(30, 64, 175, 0.6);
  box-shadow: var(--glow-blue), 0 8px 32px rgba(0,0,0,0.4);
  transition: all 0.3s ease;
  animation: float 4s ease-in-out infinite;
  background: rgba(10, 14, 26, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.prize-banner img:hover{
  transform: scale(1.02) translateY(-2px);
  box-shadow: var(--glow-blue), 0 12px 40px rgba(0,0,0,0.5);
  border-color: rgba(30, 64, 175, 0.9);
}

/* Mobile prize banner optimization */
@media (max-width: 768px) {
  .prize-banner{
    position: relative !important; /* Not sticky/fixed */
    margin: 16px auto;
    max-width: 96%;
  }
  
  .prize-banner img{
    position: relative !important; /* Not sticky/fixed */
    width: 100%;
    animation: none;
    border-radius: 10px;
    border: 2px solid var(--blue);
    box-shadow: var(--glow-blue), 0 6px 24px rgba(0,0,0,0.4);
  }
}

@media (max-width: 480px) {
  .prize-banner {
    max-width: 97%;
  }
  
  .prize-banner img {
    width: 100%;
    border-radius: 8px;
    border: 2px solid var(--blue);
    box-shadow: var(--glow-blue), 0 4px 16px rgba(0,0,0,0.3);
  }
}

/* Keyframe Animations */
@keyframes neonPulse {
  0%, 100% { 
    box-shadow: 0 0 5px var(--glow-blue), 0 0 10px var(--glow-blue); 
  }
  50% { 
    box-shadow: 0 0 10px var(--glow-blue), 0 0 20px var(--glow-blue); 
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

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

/* Mobile Performance Optimizations */
@media (max-width: 768px) {
  /* Reduce animations for better performance */
  .number:hover,.powerballNumber:hover{
    transition: all 0.2s ease;
  }
  
  .selected{
    animation: neonPulseMobile 1s ease-in-out infinite;
  }
  
  .powerballNumber.selected{
    animation: neonPulseMobile 1s ease-in-out infinite;
  }
  
  #nextDraw,#countdown{
    animation: neonPulseMobile 2.5s ease-in-out infinite;
  }
  
  .sortedNumber.blue, .sortedNumber.powerball{
    animation: none;
    text-shadow: 0 0 8px currentColor;
  }
  
  /* Faster mobile animations */
  @keyframes neonPulseMobile {
    0%, 100% { 
      box-shadow: 0 0 3px var(--glow-blue), 0 0 6px var(--glow-blue); 
    }
    50% { 
      box-shadow: 0 0 6px var(--glow-blue), 0 0 12px var(--glow-blue); 
    }
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects on touch devices */
  .number:hover,.powerballNumber:hover{
    transform: none;
    box-shadow: none;
  }
  
  /* Add active states for touch feedback */
  .number:active,.powerballNumber:active{
    transform: scale(0.95);
    background: linear-gradient(135deg, var(--blue), #1a1f3a);
  }
  
  button:hover{
    transform: none;
  }
  
  button:active{
    transform: scale(0.98);
  }
}

/* Landscape mode optimization */
@media (max-width: 768px) and (orientation: landscape) {
  .number,.powerballNumber{
    width: 44px;
    height: 44px;
    margin: 4px;
    font-size: 15px;
  }
  
  #result{
    font-size: 1.4rem;
    padding: 8px;
    margin: 6px auto 16px;
  }
  
  .sortedNumber{
    font-size: 1.4rem;
  }
  
  .gridContainer{
    position: relative;
    z-index: 1; /* Normal flow, don't go under images */
    margin: 6px auto;
  }
  
  body{
    padding-bottom: 20px;
  }

  #buttons{
    padding: 8px 12px;
    background: transparent;
    backdrop-filter: none;
    border-top: none;
    box-shadow: none;
    margin: 16px auto;
    max-width: 95%;
  }

  button{
    padding: 10px;
    font-size: 13px;
  }
}

/* Accessibility - Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}