/* ============================================
   OceanPlay - External Styles
   Only what Tailwind CSS cannot handle:
   pseudo-elements, keyframes, complex hover states
   ============================================ */

/* --- Keyframes --- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeUp 0.5s ease-out both;
}

/* --- Play Button Triangle --- */
.play-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.play-circle::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #0f172a;
  margin-left: 3px;
}

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

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

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

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

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