/* gameof.com — custom.css */

body {
  background: #fafafa;
}

html.dark body {
  background: #030712;
}

.toggle-knob {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scrollbar — Light */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Scrollbar — Dark */
html.dark ::-webkit-scrollbar-track { background: #111827; }
html.dark ::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #6b7280; }

/* ============================================================
   NEW — gameof redesign animations & styles
   ============================================================ */

/* Tagline typewriter fade */
.tagline-fade {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.tagline-fade.fade-out {
  opacity: 0;
  transform: translateY(6px);
}
.tagline-fade.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* Game card hover lift + colored shadow */
.game-card:not(.coming-soon):hover {
  transform: translateY(-4px);
  box-shadow:
    0 12px 32px -8px rgba(99, 102, 241, 0.25),
    0 4px 12px -2px rgba(0, 0, 0, 0.08);
}
html.dark .game-card:not(.coming-soon):hover {
  box-shadow:
    0 12px 32px -8px rgba(99, 102, 241, 0.35),
    0 4px 12px -2px rgba(0, 0, 0, 0.3);
}


/* Time pill active state */
.time-pill.active {
  border-color: #6366f1;
  background: #6366f1;
  color: #fff;
  box-shadow: 0 2px 12px -2px rgba(99, 102, 241, 0.4);
}
html.dark .time-pill.active {
  border-color: #818cf8;
  background: #818cf8;
  color: #1e1b4b;
  box-shadow: 0 2px 12px -2px rgba(129, 140, 248, 0.4);
}

/* Cards dimmed by time filter */
.game-card.dimmed {
  opacity: 0.35;
  transform: scale(0.97);
}
.game-card.dimmed:hover {
  transform: scale(0.97);
  box-shadow: none;
}

.game-card.lucky-highlight {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
  z-index: 10;
}
html.dark .game-card.lucky-highlight {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.3);
}