/* PixelArc - External Styles (only what Tailwind can't do) */

/* ===== Animations ===== */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeUp 0.6s ease-out forwards;
}

/* ===== Play Button Triangle ===== */
.play-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #2c1810;
}

/* ===== Game Card Hover Overlay ===== */
.g-card-overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.g-card:hover .g-card-overlay {
  opacity: 1;
}

/* ===== Ranking Number Colors ===== */
.rank-item:nth-child(1) .rank-num {
  color: #c2703e;
}

.rank-item:nth-child(2) .rank-num {
  color: #7c9070;
}

.rank-item:nth-child(3) .rank-num {
  color: #d4a853;
}