html[data-theme="light"] .feature-topline,
html[data-theme="light"] .feature-caption strong,
html[data-theme="light"] .feature-caption small {
  color: #f4fbf8;
  text-shadow: 0 1px 12px rgba(6, 18, 24, 0.7);
}

html[data-theme="light"] .game-number,
html[data-theme="light"] .game-type,
html[data-theme="light"] .cover-open {
  background: rgba(13, 28, 35, 0.84);
  color: #f4fbf8;
}

.status-dot,
.rail-node.is-live {
  animation: status-pulse 2.6s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% { opacity: 0.72; box-shadow: 0 0 8px var(--lime); }
  50% { opacity: 1; box-shadow: 0 0 18px var(--lime); }
}

.hero-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 11, 16, 0.16), transparent 34%),
    radial-gradient(120% 82% at 50% 122%, rgba(7, 11, 16, 0.66), transparent 62%);
}

.game-card {
  animation: card-in 480ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.support-button svg {
  animation: support-steam 3.6s ease-in-out infinite;
}

@keyframes support-steam {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  35% { transform: translateY(-2px) rotate(-6deg); }
  65% { transform: translateY(1px) rotate(4deg); }
}

.filter-chip {
  transition: color 150ms ease, transform 150ms ease;
}

.filter-chip:hover {
  transform: translateX(2px);
}

.qr-card {
  transition: border-color 160ms ease, transform 160ms ease;
}

.qr-card:hover {
  border-color: rgba(103, 232, 206, 0.55);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}