// Theme overrides for games component
.add-form {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 2px solid var(--witch-lavender);
}

.filter-btn {
  background: var(--witch-lavender);
  color: var(--witch-purple);

  &:hover {
    background: var(--witch-mauve);
  }

  &.active {
    background: var(--witch-rose);
    color: var(--witch-moon);
  }
}

.games-grid {
  .game-card {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid var(--witch-lavender);
    backdrop-filter: blur(10px);

    &:hover {
      border-color: var(--witch-rose);
      box-shadow: 0 4px 12px var(--witch-shadow);
    }

    &.completed {
      opacity: 0.8;
      border-color: var(--witch-mauve);
    }
  }
}

.status {
  &-playing {
    background: var(--witch-lavender);
    color: var(--witch-purple);
  }
  &-completed {
    background: var(--witch-mauve);
    color: var(--witch-purple);
  }
  &-backlog {
    background: var(--witch-rose);
    color: var(--witch-moon);
  }
}

.btn-primary {
  background: var(--witch-rose);
  color: var(--witch-moon);

  &:hover {
    background: var(--witch-plum);
  }
}

.btn-secondary {
  background: var(--witch-mauve);
  color: var(--witch-purple);
}

.btn-danger {
  background: var(--witch-plum);
  color: var(--witch-moon);
}