.simple-keyboard {
  background: #343a40 !important;
  border-radius: 8px;
  padding: 15px;
  margin: 20px 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.simple-keyboard .hg-button {
  background: #6c757d !important;
  color: white !important;
  border: 1px solid #495057 !important;
  border-radius: 4px !important;
  margin: 2px !important;
  font-weight: 500;
}

.simple-keyboard .hg-button:hover {
  background: #5a6268 !important;
}

.simple-keyboard .hg-pressed {
  background: #28a745 !important;
  color: white !important;
  box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
  transform: scale(1.05);
  transition: all 0.2s ease;
}

.players-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

.players-list .player {
  font-size: 0.9em;
  padding: 5px 10px;
}

/* Chart styling */
#playersGraph {
  display: none;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #343a40;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

#timeChart {
  background: transparent !important;
}

/* Spotlight Animation for Winner Screen */
.spotlight-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 50% 40%,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(0, 0, 0, 0.9) 70%
  );
  z-index: 1;
  overflow: hidden;
}

.spotlight-beam {
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(255, 215, 0, 0.3) 0%,
    rgba(255, 255, 255, 0.1) 30%,
    transparent 70%
  );
  border-radius: 50%;
  top: -100px;
  left: calc(50% - 150px);
  animation: spotlightPulse 3s ease-in-out infinite;
}

.spotlight-beam-2 {
  width: 200px;
  height: 200px;
  left: calc(50% - 100px);
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 215, 0, 0.1) 40%,
    transparent 70%
  );
  animation: spotlightPulse 2.5s ease-in-out infinite reverse;
}

.spotlight-beam-3 {
  width: 400px;
  height: 400px;
  left: calc(50% - 200px);
  background: radial-gradient(
    circle,
    rgba(255, 215, 0, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 80%
  );
  animation: spotlightRotate 8s linear infinite;
}

@keyframes spotlightPulse {
  0%,
  100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes spotlightRotate {
  0% {
    transform: rotate(0deg) scale(0.9);
    opacity: 0.3;
  }
  50% {
    transform: rotate(180deg) scale(1.1);
    opacity: 0.6;
  }
  100% {
    transform: rotate(360deg) scale(0.9);
    opacity: 0.3;
  }
}

/* Winner text enhancement */
.winner-text {
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.6),
    0 0 30px rgba(255, 215, 0, 0.4);
  animation: winnerGlow 2s ease-in-out infinite alternate;
}

@keyframes winnerGlow {
  0% {
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8),
      0 0 20px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.4);
  }
  100% {
    text-shadow: 0 0 15px rgba(255, 215, 0, 1), 0 0 25px rgba(255, 215, 0, 0.8),
      0 0 35px rgba(255, 215, 0, 0.6), 0 0 45px rgba(255, 215, 0, 0.4);
  }
}

/* Party Parrot Animation */
@keyframes partyBounce {
  0% {
    transform: rotate(-10deg) scale(1);
  }
  100% {
    transform: rotate(10deg) scale(1.2);
  }
}

/* Random Font Chaos */
.font-comic {
  font-family: "Comic Sans MS", cursive !important;
}

.font-papyrus {
  font-family: Papyrus, fantasy !important;
}

.font-times {
  font-family: "Times New Roman", serif !important;
  font-style: italic !important;
}

.font-courier {
  font-family: "Courier New", monospace !important;
  font-weight: bold !important;
}

.font-impact {
  font-family: Impact, "Arial Black", sans-serif !important;
  text-transform: uppercase !important;
}

.font-wingdings {
  font-family: Wingdings, "Webdings", fantasy !important;
}

/* Crazy Cursor Styles */
.cursor-banana {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🍌</text></svg>")
      16 0,
    auto !important;
}

.cursor-poop {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>💩</text></svg>")
      16 0,
    auto !important;
}

.cursor-fire {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🔥</text></svg>")
      16 0,
    auto !important;
}

.cursor-skull {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>💀</text></svg>")
      16 0,
    auto !important;
}

.cursor-alien {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>👽</text></svg>")
      16 0,
    auto !important;
}