/* ============================================================
   GachaPulse — custom styles layered on top of Tailwind CDN
   ============================================================ */

/* ---------- Hero glow backdrop ---------- */
.hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55rem 26rem at 20% -10%, rgba(245, 197, 66, 0.10), transparent 60%),
    radial-gradient(55rem 28rem at 80% -5%, rgba(167, 139, 250, 0.16), transparent 60%),
    radial-gradient(40rem 22rem at 50% 120%, rgba(56, 189, 248, 0.10), transparent 60%);
  pointer-events: none;
}

/* ---------- News & game cards ---------- */
.card-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card-lift:hover {
  transform: translateY(-4px);
}

/* Per-game hover glow, driven by the card's accent variable */
.game-card {
  --accent: #a78bfa;
}
.game-card:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: 0 10px 40px -12px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ---------- Filter chips ---------- */
.filter-chip {
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.15s ease;
}
.filter-chip:hover {
  border-color: rgba(255, 255, 255, 0.3);
}
.filter-chip.active {
  background: rgb(124 58 237); /* violet-600 */
  border-color: transparent;
  color: #fff;
}

/* ---------- Modal ---------- */
#game-modal .modal-panel {
  animation: modal-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ---------- Back to top ---------- */
#back-to-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
#back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ---------- Scrollbar (dark theme) ---------- */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #0b0d17;
}
::-webkit-scrollbar-thumb {
  background: #252a45;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: #343b63;
}

/* Prevent body scroll while modal is open */
body.modal-open {
  overflow: hidden;
}