body { background: #f2f4f8; }
    .flip-title span { font-size: 48px; font-weight: bold; }
    .coin-wrapper { text-align: center; }
    .coin {
      width: 300px; height: 300px;
      margin: 0 auto 20px;
      border-radius: 50%;
      position: relative;
      perspective: 1000px;
      transform-style: preserve-3d;
    }
    .face {
      width: 100%; height: 100%;
      border-radius: 50%;
      background: #fff;
      position: absolute;
      backface-visibility: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 24px;
    }
    .front { background-color: #e63946; color: white; transform: rotateY(0deg); }
    .back { background-color: #212529; color: white; transform: rotateY(180deg); }
    .coin.flip { animation: flip 1s ease-in-out; }
    @keyframes flip {
      from { transform: rotateY(0); }
      to { transform: rotateY(1800deg); }
    }
    .confetti {
      position: fixed;
      top: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 9999;
    }
    .stat-card {
      background: white;
      border-radius: 10px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .stat-card h5, .stat-card h4, .stat-card h6 {
      font-weight: bold;
    }

    .stat-card small {
      display: block;
    }
    .leaderboard-list {
  background: #fff;
  border-radius: 10px;
  padding: 15px 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  max-height: 300px;
  overflow-y: auto;
}

.leaderboard-list li {
  background-color: #f9fafb;
  border: none;
  margin-bottom: 8px;
  padding: 12px 16px;
  border-radius: 6px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.leaderboard-list li:last-child {
  margin-bottom: 0;
}

.leaderboard-list li::marker {
  font-weight: bold;
  color: #0d6efd;
}
@media (max-width: 767px) {

  .flip-title span{
    font-size:32px;
    font-weight: inherit;
  }
}