.splat {
    font-size: 48px;
    color: #CBA6F7;
    text-shadow: 2px 2px 0 #FF6E54, -1px -1px 0 #74C7EC;
}

.splat.old {
    font-size: 48px;
    color: #89b4fa;
    text-shadow: 2px 2px 0 #f56565, -2px -2px 0 #66b2ff;
}

/* New sections */
.section {
    display: none;
    margin-top: 20px;
    padding: 20px;
    background-color: #1e1e2e;
    border-radius: 8px;
}

.section.active {
    display: block;
}

.game-area {
    margin-top: 30px;
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
}

.ink {
    position: absolute;
    width: 3em;
    height: 3em;
    background: radial-gradient(circle, #FF114570, #FF6E5420);
    border-radius: 50%;
    border-style: groove;
    border-color: #FF114510;
    animation: splatter 15s forwards;
}

.ink-perm {
    position: absolute;
    width: 3em;
    height: 3em;
    background: radial-gradient(circle, #FF114570, #FF6E5420);
    border-radius: 50%;
    border-style: groove;
    border-color: #FF114510;
    animation: splatter-perm 15s infinite;
}
                                                                                                                                                                                            
@keyframes splatter {
    0% {
      transform: scale(0.2);
      opacity: 0;
      filter: blur(5px);
    }
    10% {
      transform: scale(1);
      opacity: 1;
      filter: blur(5px);
    }
    20% {
      transform: scale(1.5);
      opacity: 1;
      filter: blur(5px);
    }
    80% {
      transform: scale(1.2);
      opacity: 1;
      filter: blur(8px);
    }
    90% {
      transform: scale(0.9);
      opacity: 1;
      filter: blur(10px);
    }
    100% {
      transform: scale(0.5);
      opacity: 0;
      filter: blur(10px);
    }
  }

@keyframes splatter-perm {
    0% {
      transform: scale(0.7);
      opacity: 1;
      filter: blur(10px);
    }
    10% {
      transform: scale(1);
      opacity: 1;
      filter: blur(5px);
    }
    20% {
      transform: scale(1.5);
      opacity: 1;
      filter: blur(5px);
    }
    80% {
      transform: scale(1.2);
      opacity: 1;
      filter: blur(8px);
    }
    90% {
      transform: scale(0.9);
      opacity: 1;
      filter: blur(10px);
    }
    100% {
      transform: scale(0.8);
      opacity: 1;
      filter: blur(10px);
    }
  }

.leaderboard {
    margin-top: 20px;
    color: #f8f8f2;
}

.leaderboard table {
    width: 100%;
    border-collapse: collapse;
}

.leaderboard th, .leaderboard td {
    padding: 10px;
    border: 1px solid #313244;
    text-align: center;
}

.weapon-details {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.weapon {
    background-color: #1e1e2e;
    padding: 15px;
    border-radius: 8px;
    width: 200px;
    text-align: center;
}

.weapon img {
    max-width: 100%;
    height: auto;
}

.weapon h3 {
    color: #f980ab;
    margin: 10px 0 5px;
}

.weapon p {
    color: #bac2de;
}