/**
 * Procedural Background Styles
 * Ensures the canvas background works with the rest of the site
 */

/* Make sure the canvas is behind everything */
#background-canvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
}

/* Ensure content is visible over the background */
.crypto-card,
.news-panel,
.sentiment-panel,
.btc-dominance-panel,
.open-interest-panel,
.doge-panel,
.winamp-player {
  position: relative;
  z-index: 10;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Ensure text is readable over any background */
body {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Add subtle glow to important elements */
.crypto-card h2,
.news-panel h2,
.sentiment-panel h2,
.btc-dominance-panel h2,
.open-interest-panel h2,
.doge-panel h2 {
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

/* Make price numbers more visible */
.price-value,
#eth-price-amount,
#btc-dominance-value,
#doge-price {
  text-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
  font-weight: bold;
}

/* Enhance buttons to be more visible on any background */
button {
  background: linear-gradient(135deg, rgba(0, 128, 255, 0.8), rgba(128, 0, 255, 0.8)) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 0 15px rgba(0, 128, 255, 0.5) !important;
}

/* Ensure scrollbars work with the background */
::-webkit-scrollbar {
  width: 8px;
  background-color: rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 128, 255, 0.5);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 128, 255, 0.8);
}